Vue知识点笔记2

Vue指令之事件修饰符：
.stop 阻止冒泡（写在子元素中阻止其触发父元素事件）
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 仅当事件只在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

v-model实现双向数据绑定：
Vue使用v-model实现表单元素数据的双向绑定，它会根据控件类型自动选择正确的方法来更新元素。v-model本质上是一个语法糖。如下代码本质上是，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input。
使用限制：input（radio, text, address, email...）、select、checkbox、textarea。

v-for指令迭代数字和数组：（迭代数字时基数从1开始而不是0）

    

        
迭代数字第 {{ count }} 次
        
数组第{{i+1}}个为{{ item }}
    

    

v-for指令迭代对象中的属性：

    

        
value:{{ val }}........key:{{ key }}
    

    

v-if和v-show指令：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。也可以用 v-else 添加一个“else 块”。v-show指令也可以控制元素显示/隐藏，v-show="true/false" 。它们的区别是，前者是直接移除元素内容，而后者通过display:none来隐藏元素。（故v-if切换性能消耗大；v-show初始渲染消耗大）

    
Hello Vue!
    
Hello Vue!
    
else something