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

敬之

已于 2022-04-01 10:36:02 修改

阅读量4.8w

点赞数 39

分类专栏：前端框架之 —— Vue 文章标签： javascript vue.js 前端前端框架

于 2021-10-15 08:57:30 首次发布

本文链接：https://blog.csdn.net/weixin_53072519/article/details/120321216

版权

前端框架之 —— Vue 专栏收录该内容

10 篇文章 70 订阅

订阅专栏

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

9. v-once

10. v-pre

一、Vue 指令

5. v-for

专门在网页中根据一个数组或对象的成员，连续生成多个结构相同，内容不同的一组 html 元素的特殊指令，只要连续生成一组结构相同，但是内容不同的 HTML 元素时，都用 v-for 批量生成。

<要反复生成的元素  v-for="(元素值, 下标) of 数组">
<要反复生成的元素  v-for="(属性值, 属性名) of 对象">

//注意：
//v-for只需一个元素当模板
//v-for统一了js中的for in和for of的功能
//vue中的v-for既可以遍历索引数组，又可以遍历对象

原理：每当 new Vue() 扫描到 v-for 时，先遍历数组或对象中每个成员；每遍历一个成员，取出当前成员的属性名和属性值，将属性值交给 of 前的 () 中第一个变量，将属性名/下标交给 of 前的 () 中第二个变量；同时会自动创建当前 v-for 所在元素的一个新副本，数组或对象包含几个成员 v-for 就会反复创建几个 HTML 元素副本。

of 前的两个变量，虽然没有在 new Vue() 的 data 中的定义，但可以在 v-for 所在元素及其子元素范围内用于绑定语法和指令。

举例：根据数组或对象的内容反复生成多个元素；

<body>
  <div id="app">
    <h3>遍历数组中每个元素</h3>
    <ul>
      <li v-for="(a,i) of arr">{{i+1}} : {{a}}</li>
    </ul>
    <h3>遍历对象中每个属性</h3>
    <ul>
      <li v-for="(value,key) of lilei">{{key}} : {{value}}</li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        arr: ["张三", "李四", "王五"],
        lilei: {
          sname: "Li Lei",
          sage: 11,
          class: "初一2班"
        }
      }
    })
  </script>
</body>

结果如下：

v-for 本身也存在一些问题，即使只修改了数组或对象中一个成员的值，v-for 默认也会删除所有元素副本，重新遍历和创建创建 HTML 元素副本，这样效率极低。

这是因为 v-for 生成的多个 HTML 元素副本，除了内容不同之外，元素本身没有任何差别，所以 v-for 每次只能删除所有 HTML 副本，再重建整个列表。

解决：只要使用 v-for 都必须同时绑定一个专门的属性： :key="不重复的值"

<li  v-for="(元素值, i) of arr" :key="i">

拥有 key 值之后，v-for 就可以通过 key 属性值来鉴别每个 HTML 元素副本不同，修改时只要修改某一个 key 的元素即可，不用重建整个列表。

v-for 为什么必须加:key（高频笔试面试）：

a. 为每个元素添加唯一标识；

b. 避免重建整个列表；

c. 提高修改的效率。

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

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    ul {
      list-style: none;
    }

    ul>li {
      float: left;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #555;
      border-radius: 5px;
      margin-left: 5px;
    }

    ul>li:hover {
      cursor: pointer;
      background-color: lightskyblue;
      color: #fff;
      border: 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="i of pageCount" :key="i">{{i}}</li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pageCount: 10 //共10页
      }
    })
  </script>
</body>

效果如下：

补充拓展

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 关键字获得事件对象，则参数顺序无所谓，只要形参和实参可以对应即可。

举例：

<body>
  <!--点哪儿，喊哪儿疼!-->
  <div id="app">
    <img src="img/1.jpg" @click="say($event,'张三')">
    <img src="img/2.jpg" @click="say($event,'李四')">
  </div>
  <script>
    new Vue({
      el: "#app",
      methods: {
        say(e, sname) {
          if (e.offsetY < 100) {
            console.log(`${sname}头疼`);
          } else if (e.offsetY < 200) {
            console.log(`${sname}胸疼`);
          } else {
            console.log(`${sname}肚子疼`);
          }
        }
      }
    })
  </script>
</body>

7. v-html

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

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

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

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

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

<body>
  <div id="app">
    <h3>来源: {{msg}}</h3>
    <h3 v-html="`来源：${msg}`"></h3>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        msg: `来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息`
      }
    })
  </script>
</body>

效果如下：

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 防止用户短暂看到 {{ }}；

<style>
    /*css中属性选择器: 选择所有带有v-cloak属性的元素*/
    [v-cloak] {
      display: none;
    }
  </style>

<body>
  <div id="app">
    <h3 v-cloak>Welcome {{uname}}</h3>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        uname: "dingding"
      }
    })
  </script>
</body>

<body>
  <div id="app">
    <h3 v-text="`Welcome${uname}`"></h3>
  </div>
  <script>
    setTimeout(function () {
      new Vue({
        el: "#app",
        data: {
          uname: "dingding"
        }
      })
    }, 2000)
  </script>
</body>

对比 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 标记元素只在首次绑定时更新一次，之后不再反复更新；

<body>
  <div id="app">
    <h3 v-once>上线时间: {{time}}</h3>
    <h3>当前系统时间: {{time}}</h3>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        time: new Date().toLocaleString()
      }
    });
    //每隔一秒修改一次vm中time变量的值为新的时间点
    setInterval(function () {
      vm.time = new Date().toLocaleString();
    })
  </script>
</body>

效果如下：

10. v-pre

专门阻止 vue 编译内容中的 {{ }} 的特殊指令，在极少数情况下，正文中包含了不希望被 vue 编译的 {{ }} 时，采用 v-pre 保护。

<元素 v-pre>xxx{{xxx}}xx</元素>

举例：使用 v-pre 防止 vue 编译内容中的 {{ }}；

<body>
  <div id="app">
    <h1>vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置</h1>
    <h1 v-pre>vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置</h1>
  </div>
  <script>
    new Vue({
      el: "#app"
    })
  </script>
</body>

效果如下：

总结：绑定语法+13种指令

(1). 如果元素的内容需要随变量自动变化: {{ }}

(2). 如果元素的属性值需要随变量自动变化: :

(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素

(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素

(5). 控制多个元素多选一显示隐藏: v-if v-else-if v-else

(6). 反复生成多个相同结构不同内容的元素时: v-for :key

(7). 事件绑定: @ $event

(8). 只要绑定的内容中包含HTML片段: v-html

(9). 防止用户短暂看到{{ }}: v-cloak 或 v-text

(10). 限制元素只在首次加载时绑定一次，之后不再变化: v-once

(11). 阻止vue编译内容中的{{ }}: v-pre

(12). 只要想自动获得页面上用户输入或选择的新值: v-model(几乎只要表单元素，都用v-model)