摘要：
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 一、文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 二、 阅读全文
摘要：
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 一、基本示范 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has bee 阅读全文
摘要：
一、我们可以用 v-for 指令基于一个数组来渲染一个列表。 <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> var example1 = new Vu 阅读全文
摘要：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 一、基本用法 <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else> 阅读全文
摘要：
一、绑定HTML Class 1. 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <div v-bind:class="{ active: isActive }">这是测试一</div> 又或者： <div class="static" v-bind:cla 阅读全文
摘要：
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 一、示范代码 <div id="watch-example"> <p> Ask 阅读全文
摘要：
对于任何复杂逻辑，你都应当使用计算属性。 一、适用场景 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </di 阅读全文
摘要：
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写： 一、v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">单击我试试</a> <br/> <!-- 缩写 --> <a :href="url">单击我试试</a> <br/> <!-- 阅读全文
摘要：
一、参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示 <a v-bind:href="url">单击我试试</a> 在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。 <a v-on:click="doSomethin 阅读全文
摘要：
一、文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <div id="app-10"> {{lastname}} </div> 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。如下： <div id="app-10" v 阅读全文
摘要：
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 一、每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁 实例、 阅读全文
摘要：
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 一、示范代码 // 我们的数据对象 var data = { firstname: 'CL', las 阅读全文