一.文本指令

• v-text:采用该指令后原文本会被msg替换
• v-html:该指令可以解析带有html标签的文本
• v-once:该指令控制的标签只能被赋值一次

{
    { msg }}
原文本
new Vue({    el: "#app",    data:{        msg:"文本指令",    }})

二.v-bind指令

该指令绑定的是属性html标签的全局属性绑定后属性的属性值可以由变量控制

操作单一变量
简写v-bind指令
操作普通字符串
    
p3p3p3p3p3p3p3p3
    
    
    
    
    
    
    

三.v-on指令

四.v-model指令

v-model指令是数据的双向绑定,该指令绑定的是value值

    
    
    
    
    
    
    
    
    
         篮球
         足球
         乒乓球
     
    
    
    
    
    
         男:
         女:
     
    

五.条件渲染

• v-if

    
Yes
Yes

    
    
       A
    
    
       B
    
    
       C
    

    
    
       A
    
    
       B
    
    
       Not A/B
    

• v-show

    
Yes
    

• v-if VS v-show

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

六.列表渲染

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

    
    
    
    
    
     
value:{
    { num }} | index:{
    { index }}
    
    
    
    
     
value:{
    {v}} | key:{
    {k}} | index:{
    {i}}
    
new Vue({    el: "#app",    data: {        list: [1, 2, 3, 4, 5],        dic: {            name: "小VV",            age: 88,            gender: "男"        }    }})