1.渐进式框架Vue
2.Vue中两个核心点
3.虚拟 DOM
4.MVVM模式: Model - View - View-Model(Dom Listeners , Data Bindings)
5.Vue实例
6.声明式渲染
7.指令
8.模板
渐进式学习提纲
基础语法
- Vue实例
- 模板语法
- 计算属性
- class 和 style 绑定
- 条件和列表渲染
- 事件处理器
- 表单控件绑定
- 组件
高级进阶
- Vue插件编写
- mixin 混合
- 过渡效果
- 自定义指令
- vue-router 路由系统的使用
- vueX 状态管理器
构建工具
- nodejs JavaScript 运行环境
- webpack 模块管理和打包工具
- vue-cli 脚手架配置
Vue 中两个核心点
响应的数据绑定
- 当数据发生改变,自动更新视图
- 利用
Object.definedProperty
中的setter/getter
代理数据,监控对数据的操作;
组合的视图组件
- ui 页面映射为组件树
- 划分组件可维护、可复用、可测试
虚拟 DOM
虚拟DOM:利用在内存中生成与真实 DOM 与之对应的数据结构,在内存中的生成的结构称之为 Virtual DOM;
模板 - compile -> 渲染函数 - render -> 虚拟DOM树 - create -> 真实DOM
Vue实例
Vue实例
每一个应用都是通过 Vue 这个构造函数创建根实例(root instance)启动;
new Vue(选项对象)
需要传入选项对象,对象包含挂载元素、数据、模板、方法等;el:挂载元素选择器
String|HtmlElementdata:代理数据
Object|Functionmethods:定义方法
Object
Vue 代理 data 数据
每个 Vue 实例都会代理其 data 对象里所有的属性,这些被代理的属性是响应的;
新添加的属性不具备响应功能,改变后不会更新视图;
VUe 实例自身属性和方法
暴露自身的属性和方法,以 $
开头,例如: $el
$data
声明式渲染
声明式
只需要声明在哪里(where)做什么(what),而无需关心如何实现(how)命令式
需要以具体代码表达在哪里(where)做什么(what),如何实现(how);案例
求数组中每一项的倍数命令式:使用 for 循环拿出每一项,然后求值完成后,再放入到另一数组中;
var arr = [1,2,3,4,5]; var newArr = []; for(var i=0; i<arr.length; i++) { newArr.push(arr[i]*2); }
声明式:使用 map 方法,关注如何求值;
var newArr = arr.map(function(item){ return item * 2; });
Vue声明式渲染
初始化根实例,Vue 自动将数据绑定在 DOM 模板上。
指令
- 是一种特殊的自定义行间属性;
- 指令的职责就是当其表达式的值改变时,相应地将某些行为应用到 DOM 上;
- 在 Vue 中,指令以
v-
开头
模板
- HTML模板
- 文本
{{value}}
,仅输出文本,不解析 HTML; - DOM 指令
v-html
+数据项 data ; template
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素,
- 匹配元素的 innerHTML
<script type="x-template">
render
函数接收一个 createElement 方法作为第一个参数用来创建 VNode。