适合初学者的Vue-1.0教程（二）

在学习了教程（yi），之后大家对data,method,v-for,v-on相信都有所了解了
现在进一步介绍Vue
v-on:因为经常被使用，所以它有个简写即@

image.png

按钮1和按钮2都会弹出数字，说明指令v-on:等价于@

接上文的例子，讲一下事件冒泡

image.png

image.png

点击之后，先弹出1，再弹出2，说明里面元素的事件先触发，它的父元素后触发
为了阻止冒泡，我们得做点什么

AlertMsg1: function (e) {
                        alert(1)
                        e.cancelBubble=true
                    }

修改了这两段代码之后，就不会冒泡了
但是，仍然很麻烦，能不能再简单一点呢？

            
AlertMsg1: function (e) {
                        alert(1)
                    }

那现在只要在事件后面加上“.stop”就可以阻止冒泡了！
除了阻止冒泡，对于事件我们还经常在表单上，阻止默认行为，改怎么做呢？

//传统的做法
e.preventDefault
//Vue的做法
        
 
            
        

这样就阻止了默认行为，只要加“.prevent”就可以了
还有常用的键盘事件

image.png

在输入框，每次按下键盘的按键后，会弹出相应的码号
常用的键盘事件除了keydown还有keyup
有的时候我们希望只在相应的按键触发处理函数，则必须在函数里做一个判断

if(e.keyCode===xx){}

现有有更简单的方式

在键盘事件后面加上“.键的码号”，“a”的码号是65，所以只有输入a时才调用处理函数
对于码号，比较常用的也做了处理，
比如上、下、左、右四个方向键分别用.up、.down、.left、right，还有回车键.enter、.Alt等

    

        ![]({{url}})
    
    

会报错，没有效果

        ![](url)

使用v-bind:指令绑定属性

![](url)

“v-bind:”指令的简化语法“:”
如果绑定class属性Vue给出了更多语法

    
    

        
Vue属性绑定
    
    

image.png

如果添加多个class

    
    

        
Vue属性绑定
    
    

image.png

如果class的值想让它在需要的时候出现，不需要时隐藏，该怎么办

    
    

        
Vue属性绑定
    
    

image.png

        
Vue属性绑定

当对象内blue的值为false时，则class隐藏

image.png

用chrome检查元素，就会发现class的值没有了
一般我们这样用这个特性

    
    

        
Vue属性绑定
    
    

image.png

浏览器检查元素Elements会显示

image.png

因此style也是如此

    

        
Vue属性绑定
    
    

image.png

但是复合样式，必须采用驼峰命名法
接下来，会介绍Vue的模板

    

        
        

        {{msg}}
    
    

image.png

image.png

v-model指令，在输入框的数据会更新模板变化，msg被更新了
如果只绑定一次，怎么办

    

        
        

        {{msg}}
        

        {{msg}}
    

image.png

image.png

data对象msg属性的值更新时，插值处的{{msg}}的值会更新
但使用v-once指令后，则只会在刚开始更新，后来数据更新时，则不会跟着更新
如果data对象的msg的值是html

    

        
        

        {{msg}}
        

        
    

image.png

{{'msg'}}

image.png

使用引号包裹之后，模板就无效了