leverge2009

vue学习笔记

1. v-if & v-show:

v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show

就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在

运行时条件不太可能改变,则使用v-if 好点.

2. Vue元素

创建一个Vue实例时，需要传入一个选项对象，它可以包含数据（data）、模板（template）、挂载元素（el）、方法（methods）、生命周期钩子（lifecyclehook）等选项

3. Vue的生命周期

1）开始创建

2）初始化数据

3）编译模板

4）挂载DOM->渲染

5）更新->渲染

6）卸载

钩子函数：八个阶段

注：Vue实现响应式不是数据发生变化后DOM立即变化，而是按一定的策略进行DOM的更新

1、$nextTick([callback])方法——在下次DOM更新循环结束之后执行延迟回调

1)created截断访问DOM必须要在$nextTick的回调中才能获取到

2)在修改数据后使用$nextTick，才可以在它的回调中获取更新后的DOM节点

2、$forceUpdate方法——迫使Vue实例重新渲染（不建议滥用）

仅仅影响实例本身和插入插槽内容的自组件，而不是所有子组件

4. 模板语法

差值： {{}}绑定普通文本 v-html指令输出真正的HTML

指令： v-bind绑定指令 (v-bind:href简化为:href)

v-on事件绑定指令 (v-on:click简化为@click)

v-if/v-else/v-if-else/v-show/v-for/v-model

:class

:style

5.修饰符

修饰符是由开头的指令后缀来表示的

事件修饰符

event.preventDefault()