一：前言

在Vue的学习使用中，我们经常会使用到一些"v-"开头的指令。 因此，笔者在本文将会列举出常用v-指令及其使用方法。

二：操作

1.概念：

v-指令是带有v-前缀的特殊属性，通过属性来操作元素。

2.指令分类

①.条件 v-if：根据其后表达式的bool值判断是否渲染该元素。 v-show：根据其后表达式的bool值判断元素的display属性是否为none。 v-if是将dom元素整个添加或删除，而v-show是通过设置dom元素的display属性控制显示或者隐藏。

②.循环 v-for：循环遍历，输出目标值。

<p v-for="(item,i) in list">{{i}}:{{item}}</p>//i是索引值，item是每一项的值

③.更新元素 v-text：更新元素的值。 v-html：更新元素的值和html标签。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> v-text的：<p v-text="message">{{message}}</p> <hr/> v-html的：<p v-html="message"></p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', //element data: { message: '<h1>Hello</h1> Vue!' } }) </script> </body> </html>

页面结果：（h1标签是块级标签，会独占一行，所以Hello和Vue就分开了。） ④.单次渲染 v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新。 适用场景：当组件中包含了大量的静态内容时，就可以在根元素上添加这个指令。确保这些内容只渲染一次就不会改变了。

⑤.属性绑定 v-bind：动态的绑定一个或多个属性。

⑥.数据绑定 v-model：双向数据绑定，实现表单输入和应用状态之间的双向绑定。

三：尾言

Vue的指令可以让我们的开发更快捷，我们要想学好Vue，这些基本指令必须掌握。