关于VUE的一些指令的介绍

V-cloak

这是一个不常用的指令，出现这个指令的原因是因为有时候网络速度慢，还没加载完vue,代码就开始编译了，这个时候渲染出来的内容就可想而知了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <title></title>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <script src="./vue2.js"></script>
 8     <style>
 9       /* 2. 利用属性选择器，选中v-cloak属性，设置display:none */
10       /* 当vue实例被创建完毕之后，vue会将v-cloak指令从标签中移除掉 */
11       [v-cloak] {
12         display: none;
13       }
14     </style>
15   </head>
16   <body>
17     <div id="app">
18       <!-- 
19         v-cloak指令用于解决表达式闪烁问题
20         1. 首先给闪烁的标签加上v-cloak指令
21        -->
22       <h1 v-cloak>{{msg}}</h1>
23     </div>
24     <script>
25       var vm = new Vue({
26         el: '#app',
27         data: {
28           msg: 'hello'
29         }
30       })
31     </script>
32   </body>
33 </html>

View Code

这个是关于V-cloak的使用方法，这个属性要配合display:none这个属性使用，当vue实例还没被创建完毕之后，使用vue-cloak的属性选择器的样式会生效，当vue加载完毕之后，v-cloak将会移除掉

V-show 和 V-if 的区别

v-show和v-if都是用来控制元素的显示和隐藏。他们都是后面跟一个布尔值，如果是true就是显示，如果是false就是隐藏

v-show是通过css样式display：none来控制元素的显示和隐藏的，而v-if则是直接操控dom来控制元素的显示隐藏，所有设置到大量的dom元素的显示和隐藏的时候，就使用v-show，避免重复操控dom降低性能，如果是涉及到异步数据渲染的时候，就使用v-if

V-for

v-for是用来循环遍历数组和对象的，其他的不多说了，在这里主要介绍两种情况不能触发视图模型的更新的情况和解决方法

1.通过数组的length属性去改变数组时不能触发视图更新

解决方法：使用splice方法解决

2.通过数组的索引去改变数组时不能触发视图的更新

通过Vue.set(需要改变的数组，数组的索引，新的值)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title></title>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <script src="./vue2.js"></script>
 8     </head>
 9     <body>
10         <div id="app">
11             <ul>
12                 <li v-for="items in users">
13                     {{items.name}}
14                 </li>
15             </ul>
16             <button @click="userLength">使用length的属性来实现视图的更新</button>
17             <button @click="userSplice">通过splice属性实现视图的更新</button>
18             <button @click="userIndex">通过索引实现视图的更新</button>
19             <button @click="userVueSet">通过Vue.set的方法实现视图的更新</button>
20 
21         </div>
22         <script>
23             var vm = new Vue({
24                 el: '#app',
25                 data: {
26                 users: [
27                     {name: 'jack1', id: 1},
28                     {name: 'jack2', id: 2},
29                     {name: 'jack3', id: 3},
30                     {name: 'jack4', id: 4}
31                 ]
32                 },
33                 methods: {
34                     userLength(){
35                         // 这个方法是无法实现视图更新的
36                         this.users.length=0;
37                     },
38                     userSplice(){
39                         this.users.splice(0,1);
40                     },
41                     userIndex(){
42                         // 直接通过索引的方法是无法实现视图的更新
43                         this.users[0]={name:"rose",id:"3"}
44                     },
45                     userVueSet(){
46                         // 使用Vue.set的方法事件视图的更新，基本的语法为vue.set(需要改变的数组,索引，新的值)
47                        Vue.set(this.users, 0, {name:"rose",id:"3"})
48                     }
49                 }
50             })
51         </script>
52     </body>
53 </html>

View Code

关于VUE的一些指令的介绍

猜你喜欢