一、vue介绍

1、核心点

①、响应的数据绑定

当数据发生改变时 ---> 自动更新视图
利用Object.definedProperty中的setter / getter代理数据，监控对数据的操作

②、组合的视图组件

• UI页面映射为组件树

• 划分组件可维护、可重用、可测试

  
  

2、虚拟DOM

只会改变需要改变的地方，最小代价改变DOM

虚拟DOM示意图.png

3、MVVM模式

m ---> Model 本地数据和数据库中的数据,
v ---> View 用户看到的视图
vm ---> ViewModel：监听DOM，绑定数据
ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据
ViewModel 将视图中的状态和用户的行为分离出一个抽象

图片.png

二、vue实例

vue实例

每一个应用都是通过vue这个构造函数创建根实例启动new Vue(选项对象)
需要传入选项对象，对象包含挂载元素，数据，模板，方法等
el：挂载元素选择器 string | HtmlElement
data：代理数据 object | Function
methods：定义方法 Object

三、声明式渲染

声明式

只需要声明在哪里做什么，而无需关心如何实现的

命令式

需要以具体代码表达在哪里做什么如何实现的
eg：求数组中的每一项的倍数
声明式
使用map方法，关注如何求值
命令式
使用for循环拿到每一项，然后求值完成后再放入另一个数组里

vue声明式渲染

初始化根实例，vue自动将数据绑定在DOM模板上

四、指令

指令是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上
在vue中指令以 v-开头

内置指令

• 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 隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none}

template 模板
render函数