Vue基础：第一天

Vue.Js文件的引入：

Vue基本结构

    


    

        
        

        
{{msg1}}
        
{{msg2}}

        

            
Id
Name
            

                

                

            
        


        

        
        

        
        

        


    
    

v-cloak指令

当我们使用{{...}}来渲染数据的时候，如果网速比较慢的情况下，数据还没加载出来，页面上就会出现{{...}}代码

例如：

    
{{msg}}

在网速比较缓慢的情况下页面会出现 {{msg}}  直到等数据加载成功后，才会显示真正的数据。 为了避免这种情况发生，Vue提供了v-cloak指令来解决这个问题。
那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

    
    


    

        
{{msg}}
    
    

v-text指令

    


    

        @*
        v-text默认是没有闪烁的问题的。 当msg数据加载完毕，vue会将msg数据插入标识了v-text的标签元素中；
        例如： 
 最后被渲染成
你好Vue
        注意： v-text是覆盖插入，即便标签有初始值，如
哈哈
，当msg数据加载完毕后，
		   vue会将msg的值插入到
标签的中间，原有的值“哈哈”将会被覆盖，最后被渲染成
你好Vue
        *@
        

    
    

v-html指令

    


    

        @*
        假设我们的msg数据就是一个标签，我们想将她以标签的形式展示出来，而不是以字符串的形式展示，这时候可以使用v-html
        *@
        


        

        

    
    

v-bind指令 :绑定属性的指令

v-bind指令只能实现数据的单向绑定，从Model绑定到View

v-on指令：用于绑定事件的指令

v-on指令的stop事件修饰符：阻止冒泡

    
    


    

        这是没有阻止button被点击后的所触发的事件冒泡
        

            
            
        

        这是阻止了button被点击后的所触发的事件冒泡
        

            
            
        
    
    
    

v-on指令的 prevent事件修饰符：阻止默认事件

    


    

        
        
        
        去百度
    
   
    

v-on指令的once事件修饰符：事件只触发一次

    


    

        
        
        
        
        
        去百度

        
    
   
    

v-on指令的 capture事件修饰符

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 
就是谁有该事件修饰符，就先触发谁。 
代码如下：

我们可以看到当我们点击了按钮,最先触发的是 点击了div,然后才触发了点击了button按钮，这就是上面所说的则由外而内触发

v-model指令 ：实现数据的双向绑定

Vue中通过属性绑定为元素设置class样式

    
    


    

        
        
1:猥琐发育，别浪

        
        
2:猥琐发育，别浪

        
        
3:猥琐发育，别浪

        
        
4:猥琐发育，别浪

        
        
5:猥琐发育，别浪

        
        
6:猥琐发育，别浪

    
    

Vue通过属性绑定为元素设置style行内样式

    


    

        
        
猥琐发育，别浪

        
        
猥琐发育，别浪

        
        
        
猥琐发育，别浪
    
    

v-if指令

    

   
    

        

        
        

            已经确认
        
        

            未确认
        

        
        

            我是1
        
        

            我是2
        
        

            我不是1，也不是2
        

        
        

    
    

v-for指令：遍历

    


    

        
        
{{item}}
        
        
索引:{{index}}--值：{{item}}


        
        
{{item.name}}
        
        
索引:{{index}}--id值:{{item.id}} --name值:{{item.name}}


        
        
索引：{{index}}--ket值为{{key}}--val值为:{{val}}

        
        
        
{{item}}


    
    

v-for中key的使用注意事项

 当在vue.js中用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项的顺序被改变vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给vue一个提示，以便它能够跟踪每个节点的身份，从而重用新排序现有的元素，你需要为每项提供唯一的key属性

    


    

        
        
        
            id
            
        
        
            name
            
        

        
        
        

            
            {{item.id}}--{{item.name}}
        
    
    

没有加v-bind:key="item.id"的效果 

添加了v-bind:key="item.id"的效果 

在v-for配合v-if使用

    

   
    

        
        
{{ item }}