最全Vue（二）vue 指令及用法举例_vue ul，你值得拥有

最新推荐文章于 2025-04-02 15:44:50 发布

2401_84978642

最新推荐文章于 2025-04-02 15:44:50 发布

阅读量401

点赞数 5

文章标签： c语言 c++ 学习

本文链接：https://blog.youkuaiyun.com/2401_84978642/article/details/138941756

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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>