Vue 知识复习(上)

Vue

Vue实例

1. 创建实例:

var vm = new Vue({ //code })

1. 数据与方法:

只有当实例被创建时 data 中存在的属性才是响应式的;

Vm.b = ‘h1’ 是不会触发视图的变化的; Object.freeze()，这会阻止修改现有的属性

1. 生命周期:

created:实例被创建后执行的代码

mounted:模板编译/挂在之后

update:组件更新之后

destoryed:组件销毁之后

不要在选项属性或回调上使用箭头函数

u 模板语法

1. 文本：{{ }}双括号文本插值,或者用v-once 一次性的插值，后面将不能改变。
2. 原始Html：输出真正的 HTML，你需要使用 v-html 指令
3. 特性：不能使用Mustache 语法，遇到这种情况应该使用 v-bind 指令。
4. 使用javascript表达式：每个绑定只能单个表达式
5. 指令：是带有V-的特殊指令
6. 参数：v-bind用于相应式的更新html; v-on用于监听dom变化
7. 缩写：v-bind  -->:  v-on  -->@

计算属性和侦听器

1. 计算属性和调用方法

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。调用方法每当触发重新渲染时总会再次执行函数，如果你不希望有缓存，请用方法来替代。

u Class  和 Style绑定

绑定html class

1. 对象语法  <div v-bind:class=”{active:isActive}”></div> 动态切换。
2. 数组语法  <div v-bind:class=”[activeClass,errorClass]”></div>  传一组class过去(也可以按条件，使用三元)

绑定内联样式

1. 对象语法  <div v-bind:style=”styleObject”></div>  绑定一个样式对象
2. 数组语法  <div v-bind:style=”[activeClass,errorClass]”></div>
3. 多重值<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

列表渲染

1. v-for 进行遍历(item of items)   在使用的时候提供key,

在遍历一个对象的时候支持三个参数 key  value 和index

1. 数组的更新监测

会引起视图的变化：pop(),push(),shift(),unshift(),splice(),sort(),reverse()

非变异方法：filter(),concat(),slice()会产生一个新数组

Vue不会监测到变化的：1)使用下标直接设置某一项   2)修改数组的长度

1. 对象更改注意事项

Vue不能监测对象属性的添加后者删除。

对于已经创建的实例，不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

赋予多个新属性：Object.assgin(),  _.extend()