本文共 24142 字，大约阅读时间需要 80 分钟。
主要内容
- 使用 ` { { }} / ` 绑定数据 - ` { { }} ` 纯文本绑定，单向，随vm变化而变化 - ` { { msg }} ` 纯文本，单次，不跟随vm变化 - ` ` 不转义html标签，绑定html |
- 使用 ` v-bind` 指令绑定数据至标签属性 - ` 简写 ` |
//加减乘除、三元运算、方法调用 { { number + 1 } } { { ok ? 'YES' : 'NO' } } { { message.split('').reverse().join('') } } |
- 使用 `|` 对原始值进行处理 - 用于属性绑定与 `{ { }}` - `{ { msg | capitalize }} ` - 可以串联 `{ { msg | filterA | filterB }}` - 可以接收参数 `{ { msg | filterA(arg1, arg2) }}` |
- 带有 ` v-` 前缀的特殊属性 - 当其表达式的值改变时相应地将某些行为应用到 DOM 上 - ` v-bind/v-for/v-html/v-on/v-if/...` - ` v-bind` 缩写 ` ` - ` v-on` 缩写 ` ` |
//全局注册 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) } } //使用 { {msg | capitalize(arg1) }} |
注意
//全局注册 // 注册一个全局自定义指令 v-focus Vue.directive( 'focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) //局部注册 directives: { focus: { // 指令的定义--- } } //使用 |
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 ==> 组件销毁之后') } }) |
|
使用 methods 和 filter 也能达到计算属性同样的效果，但计算属性使模板更加简单清晰（模板中放入太多的逻辑会让模板过重且难以维护）。
计算属性有 计算缓存 的特性，计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而 methods 每次执行都会重新取值。
什么需要缓存？
假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。
计算属性默认为 getter
data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } |
也可以添加 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 来监听data，实时响应数据的变化
例：监听用户输入，显示 正在输入...，输入完成时，显示 请稍等...，并发送异步请求，请求成功里，显示答案
var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 发生改变，这个函数就会运行 question: function (newQuestion) { this.answer = '正在输入...' this.getAnswer() } }, methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 getAnswer: _.debounce( function () { if ( this.question.indexOf( '?') === -1) { this.answer = '需要一个问题标识\'?\'' return } this.answer = '请稍候...' var vm = this axios.get( 'https://yesno.wtf/api') .then( function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch( function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 这是我们为用户停止输入等待的毫秒数 500 ) } }) |
使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
使用 v-bind:class 与 v-bind:style 来绑定样式
data: ()=>{ return { isActive: true, hasError: false, classObj:{ 'active': true, 'align-left': true, }, activeClass: 'active', errorClass: 'text-danger', styleObj:{ color: 'red', fontSize: '13px' }, activeColor: 'red', fontSize: 30, baseStyles:{ color: 'red'}, overridingStyles: { fontSize: '20px'} } } |
class 绑定的是对象的 key，如果对象的值为 true，则绑定 key
绑定 class
|
绑定style
|
class 绑定的是数组的 值
style 绑定的是数组中的 对象
|
切换元素的隐藏和显示 v-if、v-else、v-if-else
切换单个元素
|
切换多个元素
|
多条件判断
|
条件渲染默认会复用相同的组件，如果不复用元素，可添加 key 值
| |
display 的 block 和 nonev-if 不同的是，元素隐藏时，并没有从DOM中删除，而 v-if 是删除了元素保存在缓存中。 注意 v-show 不支持 <template> 语法
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
区分 v-if 与 v-show 的使用场景：
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗v-show 较好v-if 较好 v-for='item of items / item in items' 用于迭代对象或数组中的元素
data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] object: { firstName: 'John', lastName: 'Doe', age: 30 } } |
|
添加第二个参数可以获取当前迭代的 key 值
|
|
循环组件，向组件中传递数据
| |
组件有自己的作用域，向组件中传递数据需要使用属性传递
v-for 具有比 v-if 更高的优先级
判断每一个todo项是否可显示
| |
判断是否需要迭代todos
|
key 属性提升重复渲染效率
| |
Vue重写了数组的变异方法，用于监测数组的更新
push()、pop()、shift()、unshift()、
splice()、sort()、reverse() 直接修改数组长度、利用索引修改数组的值，不会被监听到
使用计算属性对原有数组进行过滤和排序
data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter( function (number) { return number % 2 === 0 }) } } |
v-on 用于监听绑定的事件
|
使用 $event 传递原生事件对象
methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } } |
methods 应该只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节
.stop 阻止事件冒泡.prevent 阻止默认事件.capture 使用捕获模式.self 只有当事件作用于本身时才触发.once 只绑定一次| ... ... |
监听键盘按下的键值
监听keyCode
| |
常用按键别名
.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right 2.1 .0 .ctrl .alt .shift .meta |
| |
按键组合
| |
使用 v-modal 给表单控件绑定相关数据（双向绑定）
v-modal 是一个语法糖
// 等同于 |
// 文本框 // 文本域（支持换行） // 复选框 // 单选（返回 true/false ） // 多选 （返回一个数组 ['jack', 'john']） Checked names: { { checkedNames }} //单选框 （返回选中的值） // 下拉框 // 单选 （返回选中的值） // 多选（返回一个数组 ['A','B']） |
当有选项有 value 属性时，选中时，返回 value, 当属性没有 value 时，选中时返回字符串或true/false
value v-model 绑定的 value 通常是静态字符串，对于 radio、checkbox、select，可以动态的使用v-bind设置value
// 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b |
v-modal 的修饰符 .lazy、 .number、.trim
// 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） // 过滤用户输入的首尾空格 |
使用 v-modal 自定义输入组件
前提条件，组件必须有 value 属性， 在有新的value时，可通过 input 事件获取更新的值。
自定义的货币输入组件
|
转载地址：http://gkeni.baihongyu.com/