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）

一、模板语法

文本插值

` 绑定数据 - `{{ }}` 纯文本绑定，单向，随vm变化而变化 - `{{ msg }}` 纯文本，单次，不跟随vm变化 - `` 不转义html标签，绑定html

属性绑定

简写 `

模板中的JS

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

//错误用法 {{ var a = 1 }} {{ if (ok) { return message } }}

过滤器

` - 可以串联 `{{ msg | filterA | filterB }}` - 可以接收参数 `{{ msg | filterA(arg1,arg2) }}`

指令

` - `v-on` 缩写 ``

注册过滤器

{ 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) } } //使用 {{msg | capitalize(arg1) }}

注意

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

注册指令

二、Vue实例

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

编译挂载 => 组件更新 => 销毁 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 ==> 组件销毁之后') } })

三、计算属性与监听器

computed

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

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

声明式地创建依赖关系，计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

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('') } } })