Vue知识点笔记2

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

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

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

    <div id="app">
        <p v-for="count in 4">迭代数字第 {{ count }} 次</p>
        <p v-for="(item, i) in list">数组第{{i+1}}个为{{ item }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [90, 75, 82, 69, 87]
            },
            method: {}
        })
    </script>

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

    <div id="app">
        <p v-for="(val, key) in user">value:{{ val }}........key:{{ key }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user:{
                    id: 1001,
                    name: 'zhao',
                    age: '30'
                }
            },
            method: {}
        })
    </script>

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

    <h1 v-show="flag">Hello Vue!</h1>
    <h1 v-if="flag">Hello Vue!</h1>
    <h1 v-else>else something</h1>