腾讯课堂IMWeb Vue.js 笔记

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|HtmlElement
• data:代理数据 Object|Function
• methods:定义方法 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。

---