本文实例讲述了Vue常用指令。分享给大家供大家参考，具体如下：
1、创建一个vue实例
vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先获取到界面的标签元素，并实例化一个vue实例。
例如在HTML创建一个div：
<div id="app">
<p>{{msg}}</p>
</div>在js中将其实例化为vue对象：
let app=new Vue({
el:'#app',//标签的类名、id，用于获取元素
//以键值对的形式存放用到的数据成员
data:{
msg:'显示的内容'
},
//包含要用到的函数方法
methods:{
}
});这样js中msg的内容就会在p标签内显示出来。
2、vue常用指令
1、 v-model:将组件与变量进行双向绑定，当组件数据修改时，变量会随之改变。它后面可加修饰符，例如.lazy，只有在标签中的值发生改变时才同步到变量，.trim过滤用户输入中的空格。
2、v-once:不允许修改数据，例如HTML中有如下三个标签：
<div id="app">
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>在input框内输入内容后，会传到msg变量中，第二个p标签内显示的信息会随着msg发生变化，而第一个带有v-once的p标签则只会显示msg的初始值，不会随之变化。
3、v-if=”表达式”，根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉
4、v-show与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。例如：
<p v-if="show">显示内容</p>
<p v-if="hide">注释内容</p>
<p v-show="hide">v-show隐藏</p>令show:true,hide:false，结果如下：
5、v-else、v-else-if与v-if连在一起使用构成逻辑判断，根据返回值决定是否显示，不可以单独或者分开使用，例如：
<p>请输入分值：</p>
<input type="text" v-model="score">
<p v-if="score>90">优秀</p>
<p v-else-if="score>80">良好</p>
<p v-else-if="score>60">中等</p>
<p v-else>不及格</p>测试结果为：
