Vue
Vue实例
- 创建实例:
var vm = new Vue({ //code })
- 数据与方法:
只有当实例被创建时 data 中存在的属性才是响应式的;
Vm.b = ‘h1’ 是不会触发视图的变化的; Object.freeze()，这会阻止修改现有的属性
- 生命周期:
created:实例被创建后执行的代码
mounted:模板编译/挂在之后
update:组件更新之后
destoryed:组件销毁之后
不要在选项属性或回调上使用箭头函数
u 模板语法
- 文本：{{ }}双括号文本插值,或者用v-once 一次性的插值，后面将不能改变。
- 原始Html：输出真正的 HTML，你需要使用 v-html 指令
- 特性：不能使用Mustache 语法，遇到这种情况应该使用 v-bind 指令。
- 使用javascript表达式：每个绑定只能单个表达式
- 指令：是带有V-的特殊指令
- 参数：v-bind用于相应式的更新html; v-on用于监听dom变化
- 缩写：v-bind -->: v-on -->@
计算属性和侦听器
- 计算属性和调用方法
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。调用方法每当触发重新渲染时总会再次执行函数，如果你不希望有缓存，请用方法来替代。
u 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()