3.vue指令

• {{ xxx }} 插值表达式

  
        {{ msg }}          
    
  
    

• v-text（读取文本不能读取html标签）和v-html（能读取html标签）

    

        {{ msg }}  
        
        

    改变msg的值
    
    

• v-model 双向数据绑定（input文本框里面的数值）

    

        
        
         +  
        = 
        {{res}}
    
    

• 防止闪烁v-text /v-html/v-cloak(配合 css选择器[v-cloak]来实现)

1、使用 v-cloak来解决花括号闪烁，一般会用在比较大的段落
css里：
[v-cloak]{display:none;}
v-cloak直接加在代码里
{{msg}}

2、{{msg}}   与 v-text=msg  等价

{{msg}}

  //防止闪烁

3、转义时{{{msg}}}  与 v-html等价

{{{msg}}}   //转义

  //防止闪烁

数据渲染

• v-for（列表渲染） v-for官方具体用法

 - 特点：在vue1.0版本中可以通过$index获取到索引值，而在vue2.0中被移除掉了
    可以使用track-by="$index"来标记一个当前遍历模板所生产的dom对象的唯一性   
 - 总结：当一个数据中的值是允许重复的时候，需要在使用v-for的同时加上 track-by="$index"  
 body>  
    

        

            
{{item}}
 ----保证唯一性
        
        添加一个值
    
        ------获取索引
                

            

                
编号
                
名称
                
年龄
            
            

                
{{ $index + 1  }}
{{user.name}} -- 
                
{{user.age}}--  
            
        
    

    

• v-if 和 v-show（条件渲染）v-if 和 v-show官方具体用法

v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
  
    

        
        

            {{user.name}}   ---->  {{user.age}}
        
        

        
        

            {{user.name}}   ---->  {{user.age}}
        
    
    

属性绑定

• v-bind
• v-bind作用：可以给一个dom元素绑定任何的属性

1. v-bind的完整写法：
    
2. v-bind的简单写法：
    
3. v-bind的特殊写法：
    原因是在绑定某些属性的时候，这个属性值由固定的字符串加上一个变量来组成的
    那么这个时候如果使用 :href=“getnews”+id 那么id是找不到的
    所以应该使用:
    v-bind="{href:'getnews/'+id}" 写我们的id才会获取到

绑定class style src title 具体用法

事件绑定

• v-on

1.事件监听
2.调用方法
3.修饰符（事件，按键，系统）

v-on官方具体用法