vue知识点总结

持续更新中......

一：vue中的两个核心点

1. 响应的数据绑定
   当数据发生改变时，自动更新视图
   为什么自动更新：利用Object.definedProperty中的getter/setter代理数据，监控对数据的操作。
   注意：由于Object.defineproperty是ES5出现的，所以vue不支持IE8
2. 组合的视图组件
   UI界面映射为组件树
   划分组件可维护，可重用，可测试

二：渐进式框架

我们开发一个页面，组件，大型的单页面等，不需要全部应用，用到哪个用哪个就行

三：虚拟DOM

1. 产生原因：运行js的速度是很快的，但大量的DOM操作就会使速度变慢。时常在更新数据后重新渲染页面，这就造成在没有改变数据的地方也重新渲染了DOM节点，在很大程度上造成了资源浪费
2. 概念： 利用在内存中生成与真实DOM相对应的数据结构，这个在内存中生成的结构称之为虚拟DOM.
3. 优点：在数据发生改变时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上，只重新渲染改变的元素就可以了。虚拟DOM计算之后，会以最小的代价将真实DOM渲染到页面上

四：MVVM模式

M：model数据模型
V：view视图模板
VM：view-model视图模型
M,V是相互独立的，通过VM连接起来

五：指令：特殊的自定义行间属性

职责：当表达式的值改变时，相应的将某些值应用到DOM上

六：内置指令的合集：

v-bind：绑定元素属性(:)
v-on：绑定事件监听器(@)
v-text：更新数据，覆盖已有结构
v-html：解析数据中的HTML结构
v-show：根据真值，切换display属性
v-if v-else-if v-else
v-for：基于源数据多次渲染元素或模板块
v-model：在表单控件元素上创建双向数据绑定
v-pre：跳过元素和子元素的编译过程
v-once：只渲染一次，随后数据更新不重新渲染
v-cloak：隐藏未编译的大胡子语法，CSS中设置[v-cloak]{display:none}

七：模板

1. HTML模板
   HTML模板：基于DOM的模板，模板都是可解析的有效的HTML
   插值：{{}}，原生HTML，属性，JavaScript表达式
2. template模板：模板会替换挂载的元素，挂载元素的内容都将被忽略。根节点只能有一个。
3. 模板-render函数

八 ： 事件修饰符

.stop .prevent .capture .self .once
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .按键(13)
@keyup.enter='addTodo(123,$event)'：这里的$event是我们传递进去的事件对象，它是一个特殊的变量，代表事件对象

九：vue中组件：不支持片段化，每个组件必须有一个根元素

十：声明式和命令式渲染

声明式渲染：只需要声明在哪里，做什么，而无需关心如何实现
命令式渲染：需要以具体代码表达在哪里，做什么，如何实现