是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
渐进式的含义是，可以逐步地使用这个框架的某些部分，而不是强制配合这个框架。
声明式渲染
- data: { key: value } 与 <p>{{ key }}</p>
- data: { key: value } 与 <span v-bind:attr='key'>文本</span>
条件与循环
- data: { key: booleanValue } 与 <p v-if='key'>文本</p>
- data: { key: [] } 与 <p v-for='item in key'>{{ item.key }}</p>
处理用户输入
- method：{ functionName: function(){} } 与 <p v-on:click='functionName'>文本</p>
- data: { key: value } 与 <input v-model='key'>
组件化应用构建
- 任意类型的应用界面都可以抽象为一个组件树
- Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例
- 注册组件：
Vue.component('componentName", {
props: ['key']
template: '<p>{{ key.attr }}</p>'
})
- 使用：
<componentName v-bind:key='value'></componentName>
Vue实例
- 所有的Vue组件都是Vue实例
- Vue实例暴露了一些有用的实例属性与方法，带有前缀$，以便与用户定义的属性区分开
- 实例生命周期hook，每个Vue实例在被创建时都要经过一系列的初始化过程例如create, mounted, updated
- 不要在Vue定义的method或生命周期回调上使用箭头函数，因为箭头函数没有this
模板语法
- 文本插值：<p> {{ key }} </p>，将绑定同步更新，v-once指令可以取消同步更新
- 原始HTML：<p v-html='rawHtml'></p>
- HTML属性的绑定要用v-bind：<div v-bind:id='dynamicId'></div>
- 使用Javascript表达式，只能是单个表达式，语句和控制流都无效
缩写
- v-bind:href→:href
- v-on:click→@
计算属性
- computed: { key: function() {} }和<p> {{ key }} </p>
- 计算属性和方法的区别：计算属性是基于它们的响应式依赖进行缓存的，如果相关依赖没有改变，会立即返回之前的计算结果，不会执行函数
侦听器
- data: { key : value }, watch: { key: function() {} }，在key改变时，自动执行watch的函数
Class与Style绑定
- Class对象语法：<div v-bind:class="{ active: isActive }"></div>，active这个class是否存在取决于isActive的真值
- Class数组语法：<div v-bind:class="[key1, key2]"></div>
- Style对象语法：<div v-bind:style="key"></div>
- Style的数组语法：<div v-bind:style="[key1, key2]"></div>
条件渲染
- v-if用于条件性地渲染一块内容，可以结合v-else使用
- v-if是一个指令，只能添加到一个元素上，如果需要切换多个元素，可以用<template>包裹，并对该元素使用v-if
- v-else元素必须紧跟在v-if或者v-else-if元素的后面
- 避免元素被复用，需要添加不同的key
- v-show不管初始化条件是什么，元素总会被渲染，只是简单地基于CSS进行切换，一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
- v-for指令，支持第二参数为index
- for可以被of代替，更接近js迭代器语法
- 遍历对象可以用<div v-for="( value, name ) in object">
- 在使用v-for时提供key属性，以便它能追踪每个节点的身份
- push(),pop(),shift(),unshift(),splice(),sort(),reverse()方法都将触发视图更新
- items[index] = newValue这样修改数据源数组是非响应的，不会触发状态更新，需要使用Vue.set(vm.items, indexOfItem, newValue)
- Vue不能检测对象属性的添加或删除，同样需要使用Vue.set(object, propertyName, value)
- v-for可以使用值范围，<span v-for="n in 10"> {{ n }} 会输出1到10的span
事件处理
- v-on指令用于监听DOM事件
- v-on的回调函数，写在Vue实例的method属性中
- Vue为v-on提供了事件修饰符.stop .prevent .capture .self .once .passive，用于组织事件传播等功能
- 按键修饰符，<input v-on:keyup.enter="method"> 只有按下enter才会触发
表单输入绑定
- 使用v-model指令在<input> <textarea> <select>元素上创建双向数据绑定
- v-model会表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，应该通过组件的data声明初始值
- 修饰符，.lazy（仅在change事件进行同步）
组件基础
- 组件的data必需是一个函数，data: { count: 0 } 是错误的，正确的应该是 data: function () { return { count: 0 } }
- 父组件监听子组件事件，通过v-on:eventName，子组件通过$emit('eventName')发出该事件
网友评论