Web前端最全Vue（二）vue指令及用法举例(2)，四面楚歌的前端工程师该何去何从

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

• {{i}}

• 效果如下：

  

  ---

  补充拓展

  vue2中访问器属性存在两个问题，首先在vue2中使用下标修改数组中的元素值，无法自动更新页面，如下：

  

  解决此问题需要用到数组当中的API代替下标来修改元素：

  

  其次，第二个问题时只有开局就有的成员才受监控，后来新加入的成员不受监控，new VUE()只有在首次加载对象时，才给对象中每个属性自动创建访问器属性，后来强行添加的新成员，就无法获得访问器属性了。

  

  ---

  6.v-on

  专门为元素绑定事件的指令，只要在vue中要给元素绑定事件处理函数，都用v-on。

  <元素 v-on:事件名=“事件处理函数(实参值,…)”

  //简写:

  //所有v-on，都可简写@:

  <元素 @事件名=“事件处理函数(实参值,…)”

  //如果事件处理函数不需要传实参值，则可以省略()

  <元素 @事件名=“事件处理函数”

  //传参: vue中事件处理函数，可以传实参值:

  <元素 @事件名=“事件处理函数(实参值1, 实参值2,…)”

  methods:{

  事件处理函数(形参1, 形参2, …){

  }

  }

  在vue中获得事件对象e：

  <元素 @事件名=“事件处理函数” //一定不要加()

  methods:{

  事件处理函数(e){ } //e指代event

  }

  如果既想穿实参值，又想获得事件对象，就要借助于vue中的一个关键字$event，专门在vue中提前获得事件对象。

  <元素 @事件名=“事件处理函数($event, 其它实参, …)”

  methods:{

  事件处理函数(e, 形参,…){

  e->event //结果是一样的

  }

  }

  在事件发生时，$event关键字会提前获得事件对象event，再由vue框架代为转交给事件处理函数对应的形参变量；只要使用$event关键字获得事件对象，则参数顺序无所谓，只要形参和实参可以对应即可。

  举例：

  <img src=“img/1.jpg” @click=“say($event,‘张三’)”>

  <img src=“img/2.jpg” @click=“say($event,‘李四’)”>

  7.v-html

  专门绑定一段HTML代码片段到页面上的特殊指令，如果要绑定的内容是一段包含HTML内容的代码片段时，都用用v-html。

  直接使用{{ }}绑定HTML代码片段，{{ }}不会将代码片段交给浏览器解析，而是原样显示到页面；这样就可用v-html代替{{ }}，v-html指令底层相当于DOM中的innerHTML，会先将HTML片段交给浏览器解析，将解析后文本显示到页面。

  <元素 v-html=“变量或表达式”></元素>

  还要注意：v-html不能将写死的部分字符串和变化的变量轻易拼接，波许使用js中的模板字符串才能拼接。

  举例：绑定HTML片段到页面中显示；

  来源: {{msg}}

  效果如下：

  

  8.防止用户短暂看到{{ }} v-cloak  v-text

  当网速慢时，new Vue()有可能延迟加载，用户就有可能短暂看到页面上的{{ }}语法。这个时候就可以用到v-cloak和v-text：

  （1）v-cloak

  专门在new Vue()加载之前，暂时隐藏部分元素的特殊指令，如果希望在new Vue()加载完之前，暂时隐藏部分元素，避免用户短暂看到{{ }}，都可以用v-cloak。

  //1.

  //在css中用属性选择器，选择所有带有v-cloak属性的元素，使用display:none，手工隐藏这些元素

  //2.

  <要暂时隐藏的元素 v-cloak>

  原理：在new Vue()加载完之前，v-cloak和css中的属性选择器[v-cloak]联合发挥作用，隐藏部分元素，当new Vue()加载完之后，会自动查找页面中所有v-cloak的元素，自动删除所有v-cloak属性。

  （2）v-text

  专门代替{{ }}绑定元素内容的特殊指令，只要不想让用户短暂看到{{ }}，都可用v-text代替{{ }}。

  <要隐藏的元素 v-text=“变量或表达式”></要隐藏的元素>

  注意如果v-text的内容由需要部分写死的文本和变化的内容拼接而成，必须用模板字符串 。

  举例：使用v-cloak或v-text防止用户短暂看到{{ }}；

  Welcome {{uname}}

  

  对比v-cloak和v-text：

  只需在父元素上添加v-cloak，就可以批量隐藏元素，而使用v-text时如果需要隐藏的元素过多则需重复使用；所以推荐使用v-cloak。

  9. v-once

  专门控制一个元素只在首次加载时绑定一次，之后即使变量值改变，也不会自动更新页面；如果一个元素的内容，只会在首次加载时绑定一次，之后几乎不会改变时，都用v-once标记。

  <元素 v-once>{{…}}</元素>

  原理：凡是标有v-once的元素，new Vue()只在首次记载时，动态更新元素的内容，但不会将v-once的元素加入到虚拟DOM树中，所以将来就算变量值发生变化，也无法通知到这个元素。

  凡是标有v-once的元素，都不会加入虚拟DOM树中，所以减少了虚拟DOM树中的元素的个数，虚拟DOM树遍历更快，效率更高。

  举例：使用v-once标记元素只在首次绑定时更新一次，之后不再反复更新；

  上线时间: {{time}}

  当前系统时间: {{time}}