Vue
Vue实例
- 创建实例:
var vm = new Vue({ //code })
- 数据与方法:
只有当实例被创建时 data 中存在的属性才是响应式的;
Vm.b = ‘h1’ 是不会触发视图的变化的; Object.freeze()，这会阻止修改现有的属性
- 生命周期:
created:实例被创建后执行的代码
mounted:模板编译/挂在之后
update:组件更新之后
destoryed:组件销毁之后
不要在选项属性或回调上使用箭头函数
模板语法
- 文本：{{ }}双括号文本插值,或者用v-once 一次性的插值，后面将不能改变。
- 原始Html：输出真正的 HTML，你需要使用 v-html 指令
- 特性：不能使用Mustache 语法，遇到这种情况应该使用 v-bind 指令。
- 使用javascript表达式：每个绑定只能单个表达式
- 指令：是带有V-的特殊指令
- 参数：v-bind用于相应式的更新html; v-on用于监听dom变化
- 缩写：v-bind -->: v-on -->@
计算属性和侦听器
- 计算属性和调用方法
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。调用方法每当触发重新渲染时总会再次执行函数，如果你不希望有缓存，请用方法来替代。
Class 和 Style绑定
绑定html class
- 对象语法 <div v-bind:class=”{active:isActive}”></div> 动态切换。
- 数组语法 <div v-bind:class=”[activeClass,errorClass]”></div> 传一组class过去(也可以按条件，使用三元)
绑定内联样式
- 对象语法 <div v-bind:style=”styleObject”></div> 绑定一个样式对象
- 数组语法 <div v-bind:style=”[activeClass,errorClass]”></div>
- 多重值<div :style=”{display:[‘-webkit-box’,’-ms-flexbox’,’flex’]}”></div> 渲染数组中最后一个被浏览器支持的属性
条件渲染
v-if v-else v-else-if (v-if 与 v-for 一起使用的时候 v-for优先级高)
v-show 切换display属性 不支持template 和 v-else
列表渲染
- v-for 进行遍历(item of items) 在使用的时候提供key,
在遍历一个对象的时候支持三个参数 key value 和index
- 数组的更新监测
会引起视图的变化：pop(),push(),shift(),unshift(),splice(),sort(),reverse()
非变异方法：filter(),concat(),slice()会产生一个新数组
Vue不会监测到变化的：1)使用下标直接设置某一项 2)修改数组的长度
- 对象更改注意事项
Vue不能监测对象属性的添加后者删除。
对于已经创建的实例，不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
赋予多个新属性：Object.assgin(), _.extend()
事件处理
监听事件：v-on 监听dom事件 v-on:click="counter += 1"
事件处理方法： 接受一个需要调用的方法名称 v-on:click=”great”
内联处理器中的方法： 访问原始DOM，可以用特殊变量$event
修饰符：
.stop 阻止 .prevent 不重载页面 .capture 捕获模式 .once 只触发一次 .self 不是从自身出发的
可以串联使用，但是要注意顺序
按键修饰符：
Eg: v-on：keyup.13 当按键值为13的时候才可以执行,
可以使用Vue.config.keyCodes.f1自定义修饰符别名
表单输入绑定
v-module
组件
- 全局注册：vue.component(tagName, options)
使用<my-component></ my-component>
- DOM模板解析注意事项
有些标签下面只能包含特定的元素，放入组件后会导致一些问题，这个时候采取
将：<table>
<my-row>...</my-row>
</table>
变成：<table>
<tr
is="my-row"></tr>
</table>
- Prop
1)父组件通过prop想子组件下发数据，子组件中要显式的声明。
Vue.component('child', {
props: ['message'],
template: '<span>{{ message
}}</span>'
})
2)单项数据流
在子组件中改变prop的话控制台会报错。
Prop 作为初始值传入后，子组件想把它当作局部数据来用：定义一个局部变量，并用 prop 的值初始化它
Prop 作为原始数据传入，由子组件处理成其它数据输出：定义一个计算属性，处理 prop 的值并返回
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
3)自定义事件
- 使用v-on绑定自定义事件
使用 $on(eventName) 监听事件，使用 $emit(eventName,
optionalPayload) 触发事件
不能用$on监听子组件释放的事件，在模板里用v-on直接绑定
- 给组件绑定原生事件
在某组件的根元素上监听原生事件，用v-on的修饰符.native
- .sync修饰符
作为自动更新父组件属性的v-on监听器，<comp :foo="bar"
@update:foo="val => bar = val"></comp>
给对象一次设置多个属性：可以和v-bind一起使用
- 表单输入组件
v-module实现数据的双向绑定，一般会使用value prop 和input事件
- 非父子组件间的通信
使用一个空的Vue实例作为事件总线
|
var bus = new Vue() |
|
// 触发组件 A 中的事件 |
|
// 在组件 B 创建的钩子中监听事件 |
- 使用插槽分发内容
<slot></slot>里的任何内容都被视为备用内容，只有在宿主元素为空的时候才会显示。有name属性来配置如何分发内容。slot-scope是一个可以重用的模板。