Vue.js知识总结——指令

Vue指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. v-text 指令

v-text 指令用于更新标签包含的文本，它的作用跟双大括号 {{ }} 的效果一样。我们看看它的用法：

 <div id="app">    <p v-text="msg"></p> </div> <script>    let app = new Vue({       el:"#app",       data:{         msg:'hello,vue'       }    }); </script>

我们给<p></p>标签加上了指令 v-text ，它的值就是我们data数据中的msg，就这么简单，最后我们来看看渲染结果：

它的作用跟{{ msg }}效果是一样的：

 <p v-text="msg"></p> <!--效果相同--> <p>{{ msg }}</p>

2. v-html 指令

v-html 帮助我们绑定一些包含html代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符串包含了<b>标签，要想<b>不被当作普通的字符串渲染出来，就得用 v-html 指令。

 <div id="app">    <p v-html="msg"></p> </div> <script>   let app = new Vue({      el:"#app",      data:{        msg:'<b>hello,vue</b>'      }   }); </script>

渲染效果：

就这样，<b>标签被成功解析并渲染出来，视图上的文本也有了加粗的效果。

3. v-show 指令

v-show 指令，跟元素的显示/隐藏 相关，它是来控制元素的display css属性的。

<div id="app">    <p v-show="show1">我是true</p>    <p v-show="show2">我是false</p></div><script>   let app = new Vue({      el:"#app",      data:{        show1:true,        show2:false      }   });</script>

我们用了两个<p>标签，都加上了 v-show 指令，取值分别为true和fasle。

渲染效果：

第一个p标签的v-show设置为true，元素正常显示；第二个p标签的v-show设置为false，元素解析成：

  <p style="display: none">我是false</p>

4. v-if 指令

v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来。

 <div id="app">    <p v-if="if_1">我是true</p>    <p v-if="if_2">我是true</p> </div> <script>   let app = new Vue({     el:"#app",     data:{        if_1:true,        if_2:false     }   }); </script>

渲染效果：

设置为true的 p 标签，成功渲染出来，而设置为false的 p 标签，直接被一行注释代替了，并没有被解析渲染出来。

v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？

记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。

5. v-else 指令

if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令。

 <div id="app">    <p v-if="if_1">我是if</p>    <p v-else>我是else</p> </div> <script>   let app = new Vue({      el:"#app",      data:{        if_1:false      }   });</script>

我们使用两个 p 标签，第一个使用 v-if 指令，并取值为false，第二个使用 v-esle 指令：

只有第二个 p 标签被渲染出来，第一个 p 标签由于 v-if 指令的值为false，直接被忽视了，不渲染。

同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个 p 标签了。 v-if 和 v-else 只有一个会被渲染出来。

6. v-for 指令

有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。

<div id="app">   <div v-for="item in list">{{item}}</div> </div> <script>   let app = new Vue({      el:"#app",      data:{        list:['Tom','John','Lisa']      }      }); </script>

首先，我们的data中包含数组list，数组包含三个元素：“Tom”，“John”，“Lisa”，我们通过 v-for 指令把它渲染出来，其中item表示数组中的每个元素。我们看看渲染结果：

我们看到，我们解析渲染出三个div，其中包含的值分别是数组中的元素，表示我们解析渲染成功。

我们还可以拿到每个元素的索引：

<div id="app">   <div v-for="(item,index) in list">       {{index}}.{{item}}   </div></div>

在循环解析的过程中，我们不但要拿到list数组的每个元素item，我们还获取每个元素的索引，写法如上，循环的时候加上(index,item)。

效果图：

v-for指令除了可以迭代数组，还可以迭代对象和整数。

7. v-bind 指令

v-bind用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。

 <div id="app">    <a v-bind:href="link">hello官网</a> </div> <script>    let app = new Vue({      el:"#app",      data:{        link:"http://hello.com"      } }); </script>

用 v-bind 指令来修饰href属性，表明它的值是一个动态的值，对应的则是data中的link的值：http://hello.com

a 标签的href的值成功地解析渲染成:http://hello.com。

v-bind 指令可以简写成一个冒号“：”

 <a v-bind:href="link">hello官网</a> <!--等价于--> <a :href="link">hello官网</a>

8. v-on 指令

v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数.

<div id="app">    <button v-on:click="say">点击</button> </div> <script> let app = new Vue({    el:"#app",    methods:{        say(){            console.log('hello');        }    } }); </script>

我们通过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的say( )方法。

点击按钮，可以成功触发click事件，并且调用say( )。

此外，如果你想给处理程序say( )传参数，也是可以的，用法跟普通的方法一致。

 <div id="app">   <button v-on:click="say('Tom')">        点击  </button> </div> <script> let app = new Vue({    el:"#app",    methods:{      say(name){        console.log('hello,'+name);      }    } }); </script>

9. v-model 指令

这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定。

<div id="app">    <input v-model="msg" type="text">    <p>你输入：{{ msg }}</p> </div> <script> let app = new Vue({    el:"#app",    data:{        msg:''    } }); </script>

10. v-once 指令

v-once指令，它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

<div id="app">   <input v-model="msg"  type="text">   <p v-once>你输入：{{ msg }}</p> </div> <script> let app = new Vue({    el:"#app",    data:{        msg:'hello,公众号的同学们'    } }); </script>