Vue（二）vue指令及用法举例

c.提高修改的效率。

v-for还有反复生成指定数量的相同结构元素副本的功能，v-for默认从1开始数数，数到n结束。每数一个数，就自动创建当前元素的一个副本。

<元素 v-for=“i of n” :key=“i”>

举例：根据页数生成分页按钮；

• {{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树中，所以将来就算变量值发生变化，也无法通知到这个元素。

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  O等大厂，18年进入阿里一直到现在。**

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-gaXyl6HQ-1715705372513)]

  [外链图片转存中…(img-JxVKBIPU-1715705372513)]

  [外链图片转存中…(img-BK6yvja4-1715705372514)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！