生命周期：参考资料https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html
计算属性computed：
侦听器watch：
Class与Style绑定：
条件渲染：
列表渲染：
为字面量添加新属性：
事件处理：
内联处理器中的方法：
特殊变量$event
事件修饰符：
按键修饰符：
系统修饰符：
组件：
传递事件：
<!--组件内-->
<!--无参--> <button v-on:click="$emit(‘enlarge-text‘)"> Enlarge text </button>
<!--有参-->
<button v-on:click="$emit(‘enlarge-text‘, 参)"> Enlarge text </button>
<!--html内-->
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
//javascript
methods: {
//此处只是为了演示，js并没有重载特性
//无参
onEnlargeText: function (enlargeAmount) {
this.postFontSize += 0.1
}
//有参
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
通过插槽（slot）传递文本：
<!--组件样例-->
Vue.component(‘alert-box‘, {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
<!--使用，中间的文本内容将填补在组件的<slot></slot>处-->
<alert-box> Something bad happened. </alert-box>
</router-view>：
有返回值的方法，可以充当普通data使用：
<!--template-->
<li v-for="n in even(numbers)">{{ n }}</li>
//javascript
data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } }
一段取值范围的v-for：
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
<!--输出结果为 1 2 3 4 5 6 7 8 9 10-->
v-for与v-if同时使用：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
由于v-for优先级高于v-if，这里的每一循环项都会根据v-if判断一次选择显示与否，而非整个循环进行判断，若需要这种效果则写成这样：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
组件使用v-for：
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props。不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。下面是一个组件使用v-for的例子：
<!--html-->
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
注：这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与<todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。
Vue.component(‘todo-item‘, {
template: ‘ <li> {{ title }} <button v-on:click="$emit(\‘remove\‘)">Remove</button> </li> ‘,
props: [‘title‘]
})
new Vue({
el: ‘#todo-list-example‘,
data: {
newTodoText: ‘‘,
todos: [
{
id: 1,
title: ‘Do the dishes‘,
},
{
id: 2,
title: ‘Take out the trash‘,
},
{
id: 3,
title: ‘Mow the lawn‘
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ‘‘
}
}
})
v-model：
实质上，v-model只是语法糖
<!--非组件-->
<input v-model="searchText">
等价于
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
组件使用v-model：
<!--组件样例-->
Vue.component(‘custom-input‘, {
props: [‘value‘],
template: `
<input
v-bind:value="value"
v-on:input="$emit(‘input‘, $event.target.value)"
>
`
})
<!--使用v-model-->
<custom-input v-model="searchText"></custom-input>
动态组件（v-bind:is）：
案例：https://jsfiddle.net/chrisvfritz/o3nycadu/
注：
在JavaScript中，Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。
所有值都是真值，除非它们被定义为 falsy (即， 除了false，0，“”，null，undefined和NaN 外)。
原文：https://www.cnblogs.com/macrazds/p/9380442.html