vue中常用v-表示指令，下面总结一下常用的指令有哪些：

插入文本:v-text

相当于元素的innerText属性，必须是双标签

插入HMTL:v-html

相当于元素的innerHTML属性

循环:v-for

v-for的使用，除了item属性，还有一些其他辅助属性。假设你现在循环的对象名字为students:

• 如果students是数组，还有index属性，如v-for="（item,index） in students";

• 如果students是对象，还有value,key属性，如v-for="（value,key,index） in students";

条件渲染

第一种：if ... else if ...else型

是否插入元素

第二种：v-show

是否隐藏元素

属性绑定:v-bind

v-bind:属性名="常量 || 变量名"，简写形式——:属性名="常量 || 变量名"

如：

//可以简写成
//如果要赋值常量，需要给常量用单引号包起来，如

双向绑定:v-model

所谓的双向绑定，就是你在视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

绑定事件:v-on

v-on:click = "方法名 || 直接改变 vue 内部变量"，简写形式——@click = "方法名 || 直接改变 vue 内部变量"

//可以简写成

可以直接更改vue内部的变量，如上面的num，是我在data里面定义的一个属性。

上述所有指令的例子代码：

    
        
        
        
        [removed][removed]
        
    
        
        

        
        [removed]
            new Vue({
                el:'#app',
                template:`                    

                        

                        

                        

                        

                        显示1
                        显示2
                        显示3
                        

                        我默认显示
                        

                        
通过v-bind来给属性赋值
                        

                        改变num值为1
                        

                        
                        
中国梦，我的梦！
                        

                        

                            

                                
{{item.title}}

                                发布时间：{{item.time}}
                            
                        
                        

                        

                            {{key}}:{{value}}                            

                        
                        
                    
                `,
                data:{
                    myTxt:'我是v-text的值',
                    myHtml:'
我是HTML
',
                    num:2,//改变num的值看效果                    isShow:true,
                    myName:'Sheryl',
                    count:1,
                    country:'',
                    newsList:[
                        {title:"新闻标题一",time:"2018-08-31"},
                        {title:"新闻标题二",time:"2018-08-31"},
                        {title:"新闻标题三",time:"2018-08-31"}
                    ],
                    students:{                        'name':'Sheryl',                        'sex':'女',                        'age':25
                    }
                },
                methods:{
                    changeCount(action) {                        if (action === 'minus') {                            if (this.count > 1) {                                this.count--;
                            } else {
                                alert("不能再减了")
                            }
                        } else {                            this.count++
                        }
                    },
                }
            })        [removed]       
    

v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。v-if 控制元素的渲染 v-if 为假 该元素不会创建
v-show：根据表达式之真假值，切换元素的display CSS 属性。 可以控制元素的显示隐藏通过display none
v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。绑定一个 标签 循环一个数据源 数组 表格 数字 字符串
v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。 属性后面跟的是固定字符串 作用：属性绑定可以让属性后面 跟变量或者表达式
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。 事件名=‘事件处理函数’ 事件名和原生JS一样
v-model：实现表单输入和应用状态之间的双向绑定。 相当于事件绑定v-on和属性绑定v-bind的综合（集合体）
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。