Vue 2.x教程之基础API

本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下

• 模板语法（文本插值、属性绑定、JS表达式、过滤器、指令）
• Vue实例（viewModal(属性+函数)、生命周期）
• 计算属性和监听器 (computed(get,set) 与 watch)
• 样式绑定（对象绑定、数组绑定、内联绑定）
• 条件绑定（v-if v-show）
• 列表渲染 (v-for、:key、数组监测、过滤/排序)
• 事件处理 (监听、修饰符、key修饰符)
• 表单输入绑定（text、checkbox、radio、select）
  

一、模板语法

文本插值

- 使用 `{{ }} / <span v-text="msg"></span>` 绑定数据
- `{{ }}` 纯文本绑定，单向，随vm变化而变化
- `<span v-once>{{ msg }}</span>` 纯文本，单次，不跟随vm变化
- `<span v-html="msg"></span>` 不转义html标签，绑定html

</div>

属性绑定

- 使用 `v-bind` 指令绑定数据至标签属性
- `<a v-bind:id="msgId"></a> 简写 <a :id="msgId"></a>`

</div>

模板中的JS

• 支持表达式执行，但不支持多个表达式、语句和控制流的执行
• 属性绑定和绑定的数据都支持JS表达式
  

//加减乘除、三元运算、方法调用
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
//错误用法
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

</div>

过滤器

- 使用 `|` 对原始值进行处理
- 用于属性绑定与 `{{ }}`
- `{{ msg | capitalize }} <a :id="msgId | formatId"></a>`
- 可以串联 `{{ msg | filterA | filterB }}`
- 可以接收参数 `{{ msg | filterA(arg1, arg2) }}`

</div>

指令

- 带有 `v-` 前缀的特殊属性
- 当其表达式的值改变时相应地将某些行为应用到 DOM 上
- `v-bind/v-for/v-html/v-on/v-if/...`
- `v-bind` 缩写 `<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a><a :href="url" rel="external nofollow" rel="external nofollow" ></a>`
- `v-on` 缩写 `<a v-on:click="doSomething"></a><a @click="doSomething"></a>`

</div>

注册过滤器

//全局注册
Vue.filters('capitalize',value=>{
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})
//局部注册
filters: {
 capitalize: function (value, arg1) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
//使用
<span>{{msg | capitalize(arg1) }}

</div>

注意

• 注册过滤器时，如果需要传递参数，必须从第二个参数开始，第一个参数为当前绑定的数据
• 过滤器一般用于简单的文本格式化，如果是对多个状态数据，或是复杂的数据处理应该使用计算属性

注册指令

//全局注册
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})
//局部注册
directives: {
 focus: {
 // 指令的定义---
 }
}
//使用
<input v-focus />

</div>

二、Vue实例

Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建

var vm = new Vue({
 name:'root',
 // 数据
 data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function
 props:[]/{}, // 设置父组件传递给子组件的数据限制
 computed:{}, // 计算属性
 watch:{}, // 监控属性
 methods:{}, // 事件操作
 // 资源
 directives:{}, // 内部指令
 filters:{}, // 内部过滤器
 components:{}, // 内部组件
 // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁
 beforeCreate(){
 console.log('beforeCreate ==> 实例创建')
 },
 created(){
 // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data
 console.log('created ==> 实例创建完成，属性已绑定')
 },
 beforeMount(){
 console.log('beforeMount ==> 模板编译/挂载之前')
 },
 mounted(){
 // 已生成DOM到document中，可访问this.$el属性
 console.log('mounted ==> 模板编译/挂载之后')
 },
 beforeUpdate(){
 console.log('beforeUpdate ==> 组件更新之前')
 },
 updated(){
 // 操作DOM $('#box1')
 console.log('updated ==> 组件更新之后')
 },
 activated(){
 // 操作DOM $('#box1')
 console.log('activated ==> 组件被激活时（for keep-alive组件）')
 },
 deactivated(){
 console.log('deactivated ==> 组件被移除时（for keep-alive组件）')
 },
 beforeDestroy(){
 // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()
 console.log('beforeDestroy ==> 组件销毁之前')
 },
 destroyed(){
 console.log('destroyed ==> 组件销毁之后')
 }
})

</div>

三、计算属性与监听器

computed

任何复杂逻辑，都应当使用计算属性

可以像绑定普通属性一样在模板中绑定计算属性

声明式地创建依赖关系，计算属性的 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('')
 }
 }
})

</div>

使用 methods 和 filter 也能达到计算属性同样的效果，但计算属性使模板更加简单清晰（模板中放入太多的逻辑会让模板过重且难以维护）。

计算属性有 计算缓存 的特性，计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而 methods 每次执行都会重新取值。

什么需要缓存？

假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。

getter与setter

计算属性默认为 getter

data: {
 firstName: 'Foo',
 lastName: 'Bar'
},
computed: {
 fullName: function () {
 return this.firstName + ' ' + this.lastName
 }
}

</div>

也可以添加 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]
 }
 }
}

</div>

watch

使用 watch 来监听data，实时响应数据的变化

例：监听用户输入，显示 正在输入...，输入完成时，显示 请稍等...，并发送异步请求，请求成功里，显示答案

var watchExampleVM = new Vue({
 el: '#watch-example',
 data: {
 question: '',
 answer: 'I cannot give you an answer until you ask a question!'
 },
 watch