Vue 过滤器 常用相关指令 自定义指令函数式和对象式以及它们的注意事项(六)

总结

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

});

new Vue({

el:“#root2”,

data:{

msg:‘hello,zhangsan’

}

});

总结

在这里插入图片描述

3. Vue 相关指令

=========================================================================

3.1 已经学过的指令


**v-bind指令用于设置HTML属性:v-bind:href 缩写为 :href

v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click**

在这里插入图片描述

3.2 v-text 指令


下面介绍一下v-text指令:

v-text属性会替换掉原先的文本内容,并且不会解析标签完完全全当成文本解析。

Document
{{name}}
111

3.3 v-html指令


3.3.1 cookie 工作原理

关于cookie,在登录时,服务器会向浏览器发送cookies,作为判断标识。

在这里插入图片描述

在这里插入图片描述

我们可以使用Cookie.Editor插件来将cookie导入或者导出。此插件需要去谷歌商店去下载。

我们在浏览器控制台使用:document.cookie,来查看网页目前的cookie。

在这里插入图片描述

3.3.2 v-html 安全性(类似XSS攻击)

v-html的安全性问题:(类似XSS攻击)

源码:

Document
{{name}}

在这里插入图片描述

3.4 v-clock指令


v-clock指令配合CSS可以解决js阻塞问题。

v-cloak属性,一旦被Vue实例对象接管,该属性会被自动删除。

通过这些机制,我们就可以通过属性选择器,来解决js发生阻塞停止了几秒,这时页面也不会显示出未完成的代码块。

总体上,当你的网速过慢时,v-clock指令不会让还没有解析的代码,跑到页面上去。

源码:

Document
{{name}}

总结

在这里插入图片描述

3.5 v-once 指令


v-once指令就是在初次动态渲染后,就视为静态内容。

在这里插入图片描述

源码

Document

初始化值:{{n}}

当前的n值为:{{n}}

<button @click=“n++”>点我加1

3.6 v-pre指令


v-pre指令是一个提高Vue编译过程的指令,有一些代码压根就没有应用到Vue中,我们就可以给他设置v-pre指令,Vue解析时直接跳过,节约时间。

在这里插入图片描述

源码:

Document

Vue其实很简单

当前的n值为:{{n}}

<button @click=“n++”>点我加1

Vue其实很简单

Vue其实很简单

Vue其实很简单

4. 自定义指令

======================================================================

4.1 判断一个元素是否为真实DOM


监测是否为真实DOM的两种方法:

第一种方法:console.dir(object)

//console.dir(object)作用就是打印出该对象的所有属性和属性值.

console.dir(element); //验证a,是否为真实DOM,打印出来的包含许多真实DOM的元素。

第二种方法:instanceof

// instanceof作用就是用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

// HTMLElement 接口表示所有的 HTML 元素

console.log(element instanceof HTMLElement);

4.2 自定义指令(函数定义)


自定义指令,direction就有指令的意思。必须理解好element和binding的结构内容。

Document

当前的n值是

放大十倍的n值是

<button @click=“n++”>点我n++

自定义指令什么时候会被调用?

1.指令与元素成功绑定时(一上来)。2. 指令所在的模板重新解析时,打个比方:如果我们在上面定义了name,我们修改name,照样会引起big的调用。

4.3 自定义指令(对象定义)


4.3.1 执行顺序一定不要混乱

input的autofocus:

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

指定元素获取class元素的样式等等:

className 获取或设置指定元素的class属性的值。

源码:

Document

点我创建一个输入框

4.3.2 自定义指令(对象定义)

对象形式定义也是有简写和常规写法,一定注意对象中bind,inserted和update三个对象函数。

**bind函数:当指令与元素成功绑定时(一上来),调用bind函数。

inserted函数:指令所在元素被插入页面时,调用inserted函数。

update函数:指令所在的模板重新解析时,调用update函数。**

源码:

判断

回到题目,如果你真想检验一个人的水平。第一步先考察一下基本的编程基础,问几个基本的编程问题,可以和前端相关也可以无关。比如垃圾收集大致是怎么做的,setTimeout 大致做了什么(说会在另一个线程里执行回调的直接毙掉)。

第二步考察一下知识面,问问http、tcp的基本知识,dns是怎么工作的,或者常用框架的实现原理,看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力,从一个简单的注册页,或者查询页开始,先让说下代码的基本架构,然后需求、性能、可靠性、安全层层加码,看看能不能很快的反馈出解决方案。能对答如流的要么做过,要么对他来说这种复杂度的东西是小case。

前三步都没问题,基本上说明候选人已经还行了,但是行到什么程度,不知道。如果想找比较厉害的,就增加个第四步,亮点项目考察。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了,我整理一套前端面试题分享给大家,希望对即将去面试的小伙伴们有帮助!

源码:

判断

回到题目,如果你真想检验一个人的水平。第一步先考察一下基本的编程基础,问几个基本的编程问题,可以和前端相关也可以无关。比如垃圾收集大致是怎么做的,setTimeout 大致做了什么(说会在另一个线程里执行回调的直接毙掉)。

第二步考察一下知识面,问问http、tcp的基本知识,dns是怎么工作的,或者常用框架的实现原理,看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力,从一个简单的注册页,或者查询页开始,先让说下代码的基本架构,然后需求、性能、可靠性、安全层层加码,看看能不能很快的反馈出解决方案。能对答如流的要么做过,要么对他来说这种复杂度的东西是小case。

前三步都没问题,基本上说明候选人已经还行了,但是行到什么程度,不知道。如果想找比较厉害的,就增加个第四步,亮点项目考察。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了,我整理一套前端面试题分享给大家,希望对即将去面试的小伙伴们有帮助!

[外链图片转存中…(img-UM85VOux-1715159306600)]

[外链图片转存中…(img-uIIrfr6N-1715159306601)]

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值