Vue基础
Vue实例
- 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的。
- 每个 Vue 实例都会代理其 data 对象里所有的属性，只有被代理的属性是响应的。除了 data 属性，Vue 实例其他属性与方法都有前缀 $，与代理的 data 属性区分。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
模板语法
Vue.js 使用了基于 HTML 的模板语法。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
使用 “Mustache” 语法（双大括号）进行文本插值：
<span>Message: {{ msg }}</span>
双大括号会将数据解释为纯文本，使用 v-html 指令插入HTML（数据绑定会被忽略）：
<div v-html="rawHtml"></div>
Mustache 不能在 HTML 属性中使用，应使用 [v-bind 指令]，使用了v-bind 指令后，引号里面就是一个js表达式，而不是字符串：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
如果条件被求值为 false 的话该属性会被移除：
<button v-bind:disabled="isButtonDisabled">Button</button>
Vue.js 的数据绑定支持 JavaScript 表达式，但是每个绑定都只能包含单个表达式。
指令
- 指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
- 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
过滤器
Vue.js 允许自定义过滤器，用作一些常见的文本格式化,用在两个地方：mustache 插值和 v-bind 表达式。添加在 JavaScript 表达式的尾部，由“管道”符指示：
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器设计目的就是用于文本转换。在指令中实现更复杂的数据变换，应该使用计算属性。
计算属性
当需要对模板中的数据进行复杂的处理时，使用computed属性。计算属性 reversedMessage 函数将用作属性 vm.reversedMessage 的 getter 。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
computed vs methods
- 计算属性会基于它的依赖进行缓存，只有在它的相关依赖发生改变时才会重新求值。
- 只要发生重新渲染，methods调用总会执行该函数。
计算属性setter
计算属性默认只有 getter ，在需要时也可以自定义一个 setter 。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
观察watch
当需要在数据变化响应，执行异步操作或开销较大的操作时，使用watch 。
Class 绑定
在 v-bind 用于 class 和 style 时，表达式的结果类型除了字符串之外，还可以是对象或数组。
对象语法
v-bind:class 指令可以与普通的 class 属性共存。动态地切换 class：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
也可以绑定返回对象的计算属性:
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
数组语法
//三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
//当有多个条件 class 时这样写有些繁琐，在数组语法中使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]">
条件渲染
v-if，v-else-if，v-else ，v-show。
Vue 提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
v-if vs v-show
- v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如需频繁地切换，使用 v-show ；如运行时条件不太可能改变，则使用 v-if。
列表渲染
用 v-for 根据一组数组进行渲染.
- 数组语法： (item,[index]) in items 。
- 对象语法：(value, key, index) in object
组件和v-for
组件有自己独立的作用域，为了传递迭代数据到组件里，要用 props：
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id">
</my-component>
事件处理器
为什么在HTML中监听事件？
Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。它有如下优点：
- 根据HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 无须在 JavaScript 里手动绑定事件， ViewModel 代码是纯粹的逻辑，和 DOM 完全解耦，更易于测试。
- 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除，无须手动清理它们。
