Vue学习笔记

是什么

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')发出该事件