Vue—指令v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-on

1.v-text(文本插值)

    


    

            
            {{vtext}}
    

可以使用{{}}代替v-text

2.v-html(普通HTML插入)

    


    

            {{vtext}}
            

    

3.v-show(显示或隐藏标签)

有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。

    


    

            
Vue is awesome!
    

4.v-if、v-else、v-else-if(表达式的值的真假条件渲染元素)

说明：
v-if、v-else、v-else-if指令用于条件性地渲染DOM,当结果是假时Dom不会生成, 而v-show只是简单地切换元素的CSS属性display。
v-else元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别

 

        
        
中国
      
        
        
中国
        
其他
        
        
中国
        
美国
        
俄罗斯
        
其他
    

5.v-for(基于源数据多次渲染元素)

    



    

        

            

                {{ item.message }}
            
        
        

            

                {{ index + "." +item.message }}
            
        
    

可以用of替代in作为分隔符

    {{ item.message }}

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

如果需要重新排序现有元素，就必须提供一个唯一key属性

    

        {{ item.message }}
    

6.v-on(绑定事件监听器)

v-on既能监听原生DOM事件，也可以监听自定义组件触发的自定义事件。

v-on缩写为@

    


    

        
        v-on绑定点击事件
        
        v-on缩写
        
        传参bbbbb
    

7.v-bind(动态地绑定特性)

    


    

        
        {{url}}

        
        v-bind缩写：

        
        绑定内联样式style：

        
        绑定class：

    

8.v-model(数据双向绑定)

    


    

            
            
message is: {{ message }}

 
            
            {{ checked }}

 
            
                A
                B
                C
            
            Selected: {{ selected }}

    

9.v-slot

10.v-pre

11.v-cloak

12.v-once

只渲染元素和组件一次。随后的不在重新渲染。

This will never change: {{msg}}