1. Vue实例及选项

1.1 创建Vue实例（new Vue instance）

　　每个Vue Application必须创建一个root Vue Instance。

<script>

    var vm = new Vue({

    });

</script>

　　一个Vue实例相当于一个MVVM模式中的ViewModel。在创建Vue实例时，可以传入一个选项对象，包括挂载元素(el)、数据(data)、方法(methods)、模板(template)、生命周期钩子等选项。

　　Vue.js通过构造函数Vue{ option }创建一个Vue实例：

var vm = new Vue({ option });

1.2 元素选项（The Element Option）

<div id="app"></div>

<script>

/**

 * 实例化vue对象

 * 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的

 * 实例化Vue时，需要传入一个选项对象

 * el:elment需要获取的对象，一定是html中的根容器元素

 * data：用于存储数据

 */

var vm = new Vue({

    el: "#app"

});

</script>

1.3 数据选项（The Data Option）

<div id="app">{{ title }}</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "标题"

        }

    });

</script>

1.4 方法methods

<div id="app">

    {{ title }}

    {{ hello() }}

    <button @click="say">Hello</button>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "Hello World!"

        },

        methods: {

            hello() {

                return "Hello Vue.js";

            },

            say() {

                console.log("Hello World!");

            }

        }

    });

</script>

1.5 生命周期钩子

　　每个Vue实例创建时，都会经历一些列的初始化过程，调用相应的生命周期钩子。

　　Vue生命周期分为8个阶段：beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）。

　　Vue生命周期钩子：

　　◊ created：实例创建完成后调用，此阶段完成数据监测等，但尚未挂载，$el 还不可用。

　　◊ mounted：el 挂载到实例后调用。

<div id="app">{{ title }}</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "标题"

        },

        created: function () {

            console.log("Vue instance has been created!");

        }

    });

</script>

<div id="app">{{ title }}</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "标题"

        },

        created() {

            console.log("Vue instance has been created!");

        },

        mounted() {

            console.log("mounted:" + this.$el); // <div id="app"></div>

            // console.log("mounted:" + this.$el.id);

        }

    });

</script>

　　Vue各生命周期在真实场景的业务逻辑应用：

　　◊ created：进行Ajax请求异步数据的获取、初始化数据。

　　◊ mounted：挂载元素内DOM节点的获取。

　　◊ nextTick：针对单一事件更新数据后立即操作DOM。

　　◊ updated：数据更新的统一业务逻辑处理。

　　◊ watch：监听具体数据变化，并做相应的处理。

2. 模板语法

　　Vue.js创建实例对象的选项中影响模板或DOM的选项：el 和 template。

　　　　◊ el ：类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。

　　　　◊ template：类型为字符串。默认会将template 值替换挂载元素（即el 值对应的元素），并合并挂载元素和模板根节点的属性。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>libing.vue</title>

    <script src="node_modules/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <h1>将被模板内容替换</h1>

    </div>

    <template id="tpl">

        <div class="tpl">Todo List</div>

    </template>

    <script>

        var vm = new Vue({

            el: "#app",

            template: "#tpl"

        });

    </script>

</body>

</html>

　　渲染输出HTML：

<body>

    <div class="tpl">Todo List</div>

    <template id="tpl">

        <div class="tpl">Todo List</div>

    </template>

    <script>

        var vm = new Vue({

            el: "#app",

            template: "#tpl"

        });

    </script>

</body>

　　Vue.js使用基于HTML的模版语法，允许声明式地将DOM绑定至Vue实例的数据。

　　Vue.js的核心：采用模板语法声明式的将数据渲染到DOM。

2.1 插值（Interpolations）

2.1.1 文本（Text）

　　Vue.js 实例中通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。

　　数据绑定：{{ }}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>libing.vue</title>

  <script src="node_modules/vue/dist/vue.min.js"></script>

</head>

<body>

  <div id="app">

    <h1>{{ title }}</h1>

  </div>

  <script>

    var vm = new Vue({

      el: "#app",

      data: {

        title: "Todo List"

      }

    });

  </script>

</body>

</html>

2.1.2 原始HTML（Raw HTML）

　　{{ }}：将数据中的 HTML 转为纯文本后再进行插值。

　　v-html ：输出 HTML 代码

<div id="app">

    <div v-html="title"></div>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "<h1>Todo List</h1>"

        }

    });

</script>

2.1.3 属性（Attributes）

　　不能在 Vue 模板中的 HTML 属性上使用{{}}语法。

<div id="app">

    <a href="{{url}}">链接</a><!-- 错误 -->

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            url: "https://www.baidu.com/"

        }

    });

</script>

　　HTML 属性中的值应使用 v-bind 指令。

<div id="app">

    <a v-bind:href="url">链接</a>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            url: "https://www.baidu.com/"

        }

    });

</script>

2.1.4 表达式

<div id="app">

  {{ status ? "是" : "否" }}

  <div v-bind:title="status?'是':'否'">Content</div>

</div>

<script>

  var vm = new Vue({

    el: "#app",

    data: {

      status: true

    }

  });

</script>

2.2 过滤器（Filters）

2.2.1 注册过滤器

　　Vue.js 允许在表达式后添加可选的过滤器，以管道符 “|” 指示。

<div id="app">

    <h1>{{ title | uppercase }}</h1>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "Todo List"

        },

        filters: {

            uppercase: function (value) {

                return value.toUpperCase();

            }

        }

    });

</script>

　　多个过滤器链式使用：

{{ name | filterA | filterB }}

　　传入多个参数：

{{ name | filterA arg1 arg2}}

　　此时，filterA 将 name 的值做为第一个参数，arg1，arg2 做为第二、第三个参数传入过滤器函数中。

　　Vue.js 提供全局方法Vue.filter() 注册一个自定义过滤器，接受过滤器ID 和过滤器函数两个参数。

　　过滤器注册语法格式：

Vue.filter( id, [definition] )

　　示例：日期格式过滤器

　　引入moment.js：

npm install -S moment

import Vue from 'vue'

import moment from 'moment'

Vue.filter('datefmt', function (input, fmtstring) {

  return moment(input).format(fmtstring);

});

new Vue({

  el: '#app',

  data: {

    now: new Date()

  }

})

{{ now | datefmt('YYYY-MM-DD HH:mm:ss') }}

2.3 指令（Directives）

　　指令是带有 v- 前缀的特殊属性。

　　指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

　　v-bind指令：用于响应式地更新 HTML 属性。

　　v-on 指令：用于监听 DOM 事件。

<div id="app">

    <h1 v-if="status">{{ title }}</h1>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "Todo List",

            status: true

        }

    });

</script>

2.3.1 参数（Arguments）

　　一些指令能够接受一个参数，参数在指令后以冒号（:）表示。

<div id="app">

    <a v-bind:href="url">libingql</a>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            url: "https://www.cnblogs.com/libingql"

        }

    });

</script>

2.3.2 修饰符（Modifiers）

　　修饰符：以句号 . 表示的特殊后缀，用于指出一个指定应该以特殊方式绑定。

　　示例：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit"></form>

2.4 用户输入

　　在 input 输入框中使用 v-model 指令来实现双向数据绑定。

<div id="app">

    <div>{{ title }}</div>

    <input type="text" v-model="title" />

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            title: "Todo List"

        }

    });

</script>

2.5 简写（Shorthands）

　　Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供特定简写。

2.5.1 v-bind 简写

<!-- 完整语法 -->

<a v-bind:href="url"> ... </a>

<!-- 简写 -->

<a :href="url"> ... </a>

2.5.2 v-on 简写

<!-- 完整语法 -->

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->

<a @click="doSomething"> ... </a>

3. 条件语句

3.1 v-if

　　v-if指令：条件判断

　　在 <template> 上使用 v-if 进行条件分组

<div id="app">

    <h1 v-if="seen">Todo List</h1>

    <template v-if="ok">

        <ul>

            <li>Todo Item</li>

            <li>Todo Item</li>

            <li>Todo Item</li>

        </ul>

    </template>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            seen: true,

            ok: true

        }

    });

</script>

3.2 v-else

　　v-if / v-else语句块：

<div id="app">

    <h1 v-if="ok">是</h1>

    <h1 v-else>否</h1>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            ok: true

        }

    });

</script>

3.3 v-if-else

　　v-if-else：v-if 之后的“else-if 块”，可以多次链式地调用。

<div id="app">

    <div v-if="type === 'A'">

        A

    </div>

    <div v-else-if="type === 'B'">

        B

    </div>

    <div v-else-if="type === 'C'">

        C

    </div>

    <div v-else>

        Not A/B/C

    </div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            type: 'C'

        }

    });

</script>

3.4 v-show

　　v-show：根据条件展示元素

　　v-show 的元素会始终渲染并保留在 DOM 中。v-show 只会切换元素的 display 这个 CSS 属性。

<div id="app">

    <h1 v-show="ok">Todo List</h1>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            ok: true

        }

    });

</script>

注：v-show 无法用于 <template> 元素，也不能和 v-else 配合使用。

3.5 v-if 和 v-show

　　v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。

　　v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。

　　v-show 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

　　通常来说，v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。

　　如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

4. 循环语句

4.1 v-for遍历数组

　　v-for 遍历数组格式：

item in items

　　其中，

　　　　items 是原始数据数组(source data array)，

　　　　item 是数组中每个迭代元素的指代别名(alias)。

　　可以使用of代替in作为分隔符，of是最接近JavaScript迭代器的语法。

item of items

<div id="app">

    <ul>

        <li v-for="item in items">{{ item.text }}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            items: [{

                id: 1,

                text: "Vue"

            }, {

                id: 2,

                text: "Angular"

            }, {

                id: 3,

                text: "React"

            }]

        }

    });

</script>

<div id="app">

  <ul>

    <li v-for="item in list">{{ item.text }}</li>

  </ul>

</div>

new Vue({

  el: '#app',

  data: {

    list: [{

      id: 1,

      text: 'Vue'

    }, {

      id: 2,

      text: 'Angular'

    }, {

      id: 3,

      text: 'React'

    }]

  }

});

　　v-for索引参数：

<li v-for="(item, index) in items">{{ index }}-{{ item.text }}</li>

　　其中，index从0开始。

4.2 v-for遍历对象

　　v-for 可以遍历对象的属性。

<div id="app">

    <ul>

        <li v-for="value in item">{{ value }}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            item: {

                id: 1,

                text: "Vue"

            }

        }

    });

</script>

　　v-for遍历对象属性：两个参数key、value

<div id="app">

    <ul>

        <li v-for="(value, key) in item">{{ key }}:{{ value }}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            item: {

                id: 1,

                text: "Vue"

            }

        }

    });

</script>

　　v-for遍历对象属性：3个参数index、key、value，索引（index）从0开始。

<div id="app">

    <ul>

        <li v-for="(value, key, index) in item">{{ index }}-{{ key }}:{{ value }}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            item: {

                id: 1,

                text: "Vue"

            }

        }

    });

</script>

4.3 key

　　为便于 Vue 跟踪每个节点的身份，重新复用(reuse)和重新排序(reorder)现有元素，需要为每项提供唯一的 key 属性，从而给 Vue 一个提示。

　　理想的 key 值是每项都有唯一的 id。

　　推荐：在使用 v-for 时，尽可能提供一个 key，除非迭代的 DOM 内容足够简单，或者是故意依赖于默认行为来获得性能提升。

<div id="app">

    <ul>

        <li v-for="item in items" v-bind:key="item.id">{{ item.text }}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            items: [{

                id: 1,

                text: "Vue"

            }, {

                id: 2,

                text: "Angular"

            }, {

                id: 3,

                text: "React"

            }]

        }

    });

</script>

　　简写：

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

4.4 v-for遍历整数

　　v-for可以在整数值范围内迭代。

<div id="app">

    <ul>

        <li v-for="n in 10">{{ n }}</li>

    </ul>

</div>

<script>

    new Vue({

        el: '#app'

    });

</script>

4.5 计算（computed）属性与监听（watch）属性

4.5.1 计算（computed）属性

　　在模板中使用表达式是非常方便直接的，只适用于简单的操作，不适于加入过多的逻辑。

　　对于复杂的逻辑，使用 computed 属性(computed property)。

　　计算属性都以函数的形式，在Vue实例的computed选项中，最终返回计算后的结果。

<div id="app">

    {{ fullName }}

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            firstName: "bing",

            lastName: "li"

        },

        computed: {

            fullName: function () {

                return this.lastName + ' ' + this.firstName;

            }

        }

    });

</script>

　　计算属性内部的this指向Vue实例。

　　计算属性依赖一个或多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图（vm）也会更新。

<div id="app">

    <table>

        <tr>

            <th>商品ID</th>

            <th>商品名称</th>

            <th>单价</th>

            <th>数量</th>

        </tr>

        <tr v-for="item in products">

            <td>{{ item.ID }}</td>

            <td>{{ item.ProductName }}</td>

            <td>{{ item.UnitPrice }}</td>

            <td>

                <input type="text" v-model="item.Quantity" />

            </td>

        </tr>

        <tr>

            <td colspan="4" style="text-align: right;">总计：{{ total }}</td>

        </tr>

    </table>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            products: [{

                ID: 1,

                ProductName: "手机",

                UnitPrice: 1000,

                Quantity: 2

            }, {

                ID: 2,

                ProductName: "电脑",

                UnitPrice: 5000,

                Quantity: 5

            }]

        },

        computed: {

            total: function () {

                var total = 0;

                for (var i = 0; i < this.products.length; i++) {

                    total += this.products[i].Quantity * this.products[i].UnitPrice;

                }

                return total;

            }

        }

    });

</script>

　　computed 属性默认只有 getter ，可以在需要时提供一个 setter 。

<div id="app">

    {{ fullName }}

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            firstName: "Bing",

            lastName: "Li"

        },

        computed: {

            fullName: {

                get: function () {

                    return this.lastName + ' ' + this.firstName;

                },

                set: function (value) {

                    var names = value.split(' ')

                    this.lastName = names[0]

                    this.firstName = names[names.length - 1]

                }

            }

        }

    });

    vm.fullName = "Li Bing2018";

</script>

4.5.2 computed 缓存 vs method 方法

　　computed属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值(re-evaluate)。

<div id="app">

    {{ now }}

</div>

<script>

    new Vue({

        el: '#app',

        computed: {

            now: function () {

                return Date.now()

            }

        }

    });

</script>

　　method方法：每当触发重新渲染(re-render)时，method 调用方式将总是再次执行函数。不管依赖的数据是否改变，methods都会重新计算。

　　在某些场景下，不希望有缓存，使用 method 方法替代。

<div id="app">

    {{ now() }}

</div>

<script>

    new Vue({

        el: '#app',

        methods: {

            now: function () {

                return Date.now()

            }

        }

    });

</script>

4.5.3 computed 属性和 watch 属性

　　watch 属性：Vue 提供的一种更加通用的方式，来观察和响应 Vue 实例上的数据变化。

　　过度滥用 watch 属性会造成一些问题，更推荐的方式是，使用 computed 属性。

<div id="app">

    <input type="text" v-model="firstName">

    <input type="text" v-model="lastName">

    <div>{{ fullName }}</div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            firstName: 'Bing',

            lastName: 'Li',

            fullName: 'Li Bing'

        },

        computed: {

            firstName: function (val) {

                this.fullName = this.lastName + ' ' + val;

            },

            lastName: function (val) {

                this.fullName = val + ' ' + this.firstName;

            }

        }

    });

</script>

<script>

    new Vue({

        el: '#app',

        data: {

            firstName: 'Bing',

            lastName: 'Li',

            fullName: 'Li Bing'

        },

        watch: {

            firstName: function () {

                this.fullName = this.lastName + ' ' + this.firstName;

            },

            lastName: function () {

                this.fullName = this.lastName + ' ' + this.firstName;

            }

        }

    });

</script>

5. 样式绑定：class和style

5.1 class绑定

5.1.1 对象语法

　　向 v-bind:class 传入一个对象，来动态地切换 class。

<div id="app">

    <div v-bind:class="{ active: isActive }"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            isActive: true

        }

    });

</script>

　　渲染：

<div class="active"></div>

　　active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值。

　　v-bind:class 指令可以和普通 class 属性共存。可以通过在对象中添加多个字段，来切换多个 class。

<div id="app">

    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            isActive: true,

            hasError: false

        }

    });

</script>

　　渲染：

<div class="static active"></div>

　　绑定对象，可以无需内联。

<div id="app">

    <div v-bind:class="className"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            className: {

                active: true,

                'text-danger': true

            }

        }

    });

</script>

　　渲染：

<div class="active text-danger"></div>

　　绑定返回对象的计算属性。

<div id="app">

    <div v-bind:class="className"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            isActive: true,

            hasError: true

        },

        computed: {

            className: function () {

                return {

                    active: this.isActive,

                    'text-danger': this.hasError

                }

            }

        }

    });

</script>

5.1.2 数组语法

　　可以向 v-bind:class 传入一个数组，来与 class 列表对应。

<div id="app">

    <div v-bind:class="[activeClass, errorClass]"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            activeClass: 'active',

            errorClass: 'text-danger'

        }

    });

</script>

　　三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

　　数组语法中使用对象语法：

<div id="app">

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            isActive: true,

            errorClass: 'text-danger'

        }

    });

</script>

5.2 style绑定

5.2.1 对象语法

　　v-bind:style 直接设置样式

<div id="app">

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            activeColor: 'red',

            fontSize: 30

        }

    });

</script>

　　渲染：

<div style="color: red; font-size: 30px;"></div>

　　绑定对象

<div id="app">

    <div v-bind:style="style"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            style: {

                color: 'red',

                fontSize: '13px'

            }

        }

    });

</script>

　　v-bind:style 的对象语法，可以和 computed 属性结合使用，此 computed 属性所对应的 getter 函数需要返回一个对象。

5.2.2 数组语法

　　v-bind:style 的数组语法，可以在同一个元素上，使用多个 style 对象。

<div id="app">

    <div v-bind:style="[baseStyles, overridingStyles]"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            baseStyles: {

                color: 'red',

                fontSize: '30px'

            },

            overridingStyles: {

                'font-weight': 'bold'

            }

        }

    });

</script>

　　渲染：

<div style="color: red; font-size: 30px; font-weight: bold;"></div>

6. 事件处理

6.1 监听事件

　　v-on 指令：监听 DOM 事件，并在事件被触发时执行 JavaScript 代码。

<div id="app">

    <button v-on:click="counter += 1">增加 1</button>

    <div>按钮点击次数：{{ counter }}次</div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            counter: 0

        }

    });

</script>

6.2 定义在 methods 对象中的事件处理器

　　用于处理逻辑复杂事件

<div id="app">

    <button v-on:click="greet">greet</button>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            name: "Li Bing"

        },

        methods: {

            greet: function (event) {

                // `this` 在方法里指当前 Vue 实例

                alert('Hello ' + this.name + '!')

                // `event` 是原生 DOM 事件

                if (event) {

                    alert(event.target.tagName)

                }

            }

        }

    });

    // 可以用 JavaScript 直接调用方法

    vm.greet() // -> 'Hello Li Bing!'

</script>

6.3 定义在行内的事件处理器

<div id="app">

    <button v-on:click="greet('Li Bing')">greet</button>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        methods: {

            greet: function (name) {

                alert('Hello ' + name + '!');

            }

        }

    });

</script>

6.4 事件修饰符(Event Modifiers)

　　在事件处理程序中常见调用 event.preventDefault() 或 event.stopPropagation()

　　v-on 提供事件修饰符，以点(.)开头的指令后缀来表示。

　　　　◊ .stop

　　　　◊ .prevent

　　　　◊ .capture

　　　　◊ .self

　　　　◊ .once

<!-- 停止点击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重新载入页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以链式调用 -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件监听器时，使用事件捕获模式 -->

<!-- 内部元素触发的事件先在此处处理，然后才交给内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只有在 event.target 是元素自身时，才触发处理函数。 -->

<!-- 也就是说，event.target 是子元素时，不触发处理函数 -->

<div v-on:click.self="doThat">...</div>

　　v-on:click.prevent.self 阻止所有点击

　　v-on:click.self.prevent 只阻止元素自身的点击

Vue.js 2.x笔记：基本语法（2）的更多相关文章

两万字Vue.js基础学习笔记
Vue.js学习笔记目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了首先,我们需要在HTM ...
从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点官网:http://cn ...
vue.js初学，笔记1，安装
最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...
Vue.js 2.x笔记：组件（5）
1. 组件简介组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件:为了拆分Vue实例的代码量,以不同的组件来划分不同的功能模块,需要 ...
Vue.js 2.x笔记：安装与起步（1）
1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...
vue.js初始学习笔记&vue-cli
笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...
Vue.js教程--基础(实例模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...

随机推荐

springboot~rabbitmq自己通过UI手动发布队列需要注意的地方
springboot里发布队列消息为了兼容性和可读性更好,我们一般使用json字符串做为数据载体. public void decreaseCallMonitor(CallMonitorInfo c ...
不使用 webpack，vuejs 异步加载模板
webpack 打包不会玩,整了这么个小玩具一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...
k8s滚动更新（六）--技术流ken
实践滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 下面我们部署三副本应用, ...
整合 MyPerf4J 做Java性能监控和统计工具
快速启动MyPerf4J MyPerf4J 采用 JavaAgent 配置方式,透明化接入应用,对应用代码完全没有侵入. 打包项目地址: https://github.com/LinShunKang ...
【深度学习系列】PaddlePaddle垃圾邮件处理实战（二）
PaddlePaddle垃圾邮件处理实战(二) 前文回顾在上篇文章中我们讲了如何用支持向量机对垃圾邮件进行分类,auc为73.3%,本篇讲继续讲如何用PaddlePaddle实现邮件分类,将深度 ...
css文字超出一行用点表示
1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...
W3C 代码标准规范
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组.社区组.商务组等).W3C会根据产业界的标准需求 ...
loj#6073. 「2017 山东一轮集训 Day5」距离(树链剖分主席树)
题意题目链接 Sol 首先对询问差分一下,我们就只需要统计$u, v, lca(u, v), fa[lca(u, v)]$到根的路径的贡献. 再把每个点与$k$的lca的距离差分一下,则只需 ...
Dynamics 365 Customer Engagement中插件的调试
微软动态CRM专家罗勇 ,回复319或者20190319可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 本文主要根据官方的教 ...
[Alibaba-ARouter] 简单好用的Android页面路由框架
开发一款App,总会遇到各种各样的需求和业务,这时候选择一个简单好用的轮子,就可以事半功倍前言 Intent intent = new Intent(mContext, XxxActivity.cl ...

Vue.js 2.x笔记：基本语法（2）