vue基本知识概述

1. MVVM设计模式:
   传统网页组成: 3部分:
   HTML: 定义网页的内容
   CSS: 定义网页的样式
   JS: 为网页添加交互行为
   问题: JS DOM操作，既要加工数据，又要承担大量的反复的增删改查操作。
   重新划分上述3部分：
   View视图: 指网页中的元素和样式，包括HTML和css
   Model模型数据: 指程序中创建的或从远程获取的数据（如ajax请求的数据，放在data中）
   ViewModel视图模型/控制器:
   代替之前的DOM/JQUERY操作，自动把模型中的数据和视图中的HTML元素"绑定"在一起.
   其实就是new Vue()
   原理: 添加一种新类型——Vue:
   包括: 2部分:
   1. 构造函数——创建Vue类型的实例对象
   2. 原型对象——保存所有Vue类型子对象共有的成员（API）
   new Vue() 创建Vue类型的一个示例，其实是创建一个用于同步Model和View的ViewModel对象
   new Vue({
   el:“选择器”, //告诉Vue监听哪个父元素的内容
   data:{ //作为Model，保存页面需要的所有数据
   模型数据:值, 模型数据
   }
   })
   //2. ViewModel控制器
   var vm=new Vue({
   el:"#header",//element:找到并监视header
   data:{//Model数据模型: 其实就是普通对象
   //模型变量
   uname :“dingding”,
   score:3000
   }
   })
   //两大系统:
   //1. 响应系统: 通知Vue有属性发生更改
   //2. 虚拟DOM: 负责实际修改DOM树

   什么是绑定: 不需要写一行代码，就可让页面元素内容和数据保持联动变化。
   Vue类型，提供的就是一种强大的ViewModel对象，可自动同步数据和页面元素。
   ViewModel的核心原理: 2部分:

   1. 响应系统(Reactivity System):
      内存中数据变，页面自动变
      原理:
      （每个内存中的数据，都被Vue自动添加了访问器属性。）
      new Vue()将data中的每个模型数据提升为整个Vue对象的访问器属性。在访问器属性的set方法中，只要修改模型数据的值，就触发通知。通知Vue框架修改页面。。

2. 虚拟DOM(Virtual DOM):
   什么是: 用js程序模拟的一棵简化版的DOM子树
   为什么：真实DOM树包含的内容太多！极其不便于比较和遍历。
   如何生成虚拟DOM树:
   new View({el:“选择器”})会查找指定父元素，并遍历其中所有子内容。仅将可能发生变化的元素和属性用js对象结构集中存储在内存中。
   何时使用虚拟DOM树:
   当修改模型数据，触发响应系统时，响应系统通知Vue要修改DOM树。Vue框架就遍历虚拟DOM树，找到发生变化的节点，利用底层的DOM API仅修改发生变化的DOM元素
   用js面向对象方式，模拟的DOM树。
   保存了当前界面中所有DOM节点的描述信息，以及节点间关系。
   优点1: 仅保存关注的少部分节点属性和内容，遍历快！

   当响应系统通知Vue框架某个属性发生变化，要修改页面时，Vue框架会快速遍历虚拟DOM树，找出发生变化的DOM元素节点，仅修改发生变化的真实DOM树上的节点。没有发生变化的节点，保持不变。

   优点2: 仅修改受影响的少量元素，效率高。——无需人工

总结:
使用Vue框架步骤:

1. 定义HTML和CSS界面，只不过用特殊标识标记可能改变的位置

2. 在内存中定义模型数据对象data，其中，页面有几处改变，data中就要有几个模型变量与之对应。

3. 创建new Vue()示例对象，充当ViewModel
   new Vue()中定义el:“选择器”，指向要监视的父元素
   new Vue()中，还要将data对象包含进来作为Model
   强调: 即使选择器找到多个父元素，vue也只能监视第一个找到的父元素及其子元素。

4. 数据绑定语法:
   {{}}: 双括号语法，也叫大胡子语法(Mustache)
   官方名字: interpolation 补缺
   什么是: 可选择特定的Model中的数据，绑定到View视图中
   何时: 只要希望将Model中的一个数据，显示到页面上，就在页面上用{{模型变量}}引入
   如何: {{}}中可包含多种表达式:

   1. 直接写{{模型变量名}}: {{uname}}
   2. {{运算}}: 算术/比较/逻辑/三目运算:小计 {{price*count}}
   3. {{方法调用}}: {{uname.toUpperCase()}}
   4. {{对象.属性}}: {{address.city}}
   5. {{数组[i]}}: {{list[2]}}
      注意: 不能写if,else,for等程序结构(不止一句话，so不行)
      问题: 只能绑定元素的内容(innerHTML)，不能绑定属性和事件
      解决:

5. 指令(directive):
   什么是: Vue.js提供的，专门用于增强HTML功能的特殊属性
   为什么: HTML本身是静态的，写死的，没有任何动态生成内容的能力。
   何时: 只要希望根据内存中的数据，动态绑定HTML元素的属性和样式时，都用指令。
   包括: 看手册: 官网/学习/API
   如何: v-*, 凡是v-*开头的自定义扩展属性，都是vue为增强HTML功能而提供的指令。

6. v-bind: 专门绑定属性值:
   如何: 强调: 绑定属性，不用{{}}！
   简写: v-bind可省略，只保留:
   v-bind

7. v-for: 根据数组或集合内容，反复生成多个相同的HTML元素。
   何时: 只要反复生成多个相同的HTML元素时
   如何: 结果：根据in后的集合中的元素个数，反复生成 每次in都取出元素的值和下标，保存到in前的变量中
   在 强调: v-for必须写在想要反复生成的元素上
   ul
   li v-for
   简写: 1.如果只关心内容，不关心下标可省略()
   v-for="变量 in 数组

2.变化: 其实, in可用of代替。（效果一样）

• {{i+1}}-{{task}}

3. v-if: 根据一个bool数据作为条件，控制是否创建该元素到DOM树（控制显示隐藏） 何时: 根据条件，控制一个元素的显示隐藏时 如何:

4. v-show: 用法和v-if几乎完全一样！也可以控制一个元素的显示隐藏。
   
   鄙视: v-show vs v-if的区别:
   v-show，不改变DOM树，通过display:none/block控制显示隐藏
   优: 效率高！
   缺: 只适合控制一个元素的显示隐藏。如果控制多个元素的显示隐藏时，代码会很繁琐
   v-if，通过添加/删除DOM树上元素节点的方式控制显示隐藏
   缺: 效率低！
   优: 专门控制多个元素选其一显示，代码精简。
   如果一个元素频繁显示隐藏切换，首选v-show
   如果多个元素控制选其一显示，首选v-if, v-else-if, v-else
   v-if vs v-show:

v-if... 都是用添加删除DOM元素的方式，来控制显示隐藏
v-show: 不改变DOM的内容，通过display:none来控制显示隐藏
1. 如果只控制一个元素的显示隐藏，首选v-show
2. 如果控制多个元素选其一显示时，首选v-if
3. 如果频繁显示隐藏切换时，首选v-show，效率高

5. v-on: 为元素绑定事件处理函数
   问题: 通常vue实例对象都是没名的，为了避免冲突和全局污染。所以，在普通事件处理函数中，不可能访问vue中的模型变量。
   解决: v-on
   何时: 今后只要在vue中绑定事件一律用v-on:
   如何: 2步:

   1. 添加事件处理函数:
      new Vue({
      el:…,
      data:{ … },
      methods:{
      处理函数(){
      //this->当前vue实例对象
      … this.模型变量 …
      }
      }
      })
   2. 定义绑定: 简写:
      1.v-on:事件名 => @事件名
      被@替代: @click=”submit()”

6. v-html: 使用模型数据替换当前元素的innerHTML
   何时: 要用HTML代码片段替换内容

7. v-text: 使用模型数据替换当前元素的innerText
   何时: 要用纯文本内容代替元素内容
   {{}} vs v-text vs v-html

8. {{}}可和其它内容拼接形成新的内容
   v-text和v-html只能完整替换内容

9. 如果绑定纯文本内容，则首选v-text，原样显示，不转换
   如果绑定HTML片段，则首选v-html，会被浏览器转换为正文，不保持原样。

   ￥{{price.toFixed(2)}}

10. v-cloak: 可让未加载完的元素，暂时不显示
    问题: 当vue加载慢时，页面会暂时显示{{}}内容
    解决: 如果vue没有加载完，则元素不显示！
    如何: 2步:

11. 为vue监视的元素指定v-cloak属性

12. 手动在css中为v-cloak指定隐藏样式:
    [v-cloak]{ display:none }
    原理: 当vue加载完成后，会自动移除v-cloak属性！
    总结: 今后被vue监视的父元素都要用v-cloak默认隐藏，等vue加载好后，才显示出来。

13. v-pre: 保留当前元素中的{{}}，不进行绑定渲染
    何时: 如果正文中有{{}}，不想被vue渲染，可用v-pre保护

Vue使用{{模型变量}}语法绑定元素的内容

10. v-once: 设置一个{{}}，仅在首次加载时渲染一次，之后不再被监视。 何时: 如果希望一个元素，只在首次加载时绑定一次 原理: 其实在Vue中有一个巨大的数组，保存着所有绑定的元素 每次模型数据有修改时，都通过遍历数组找到绑定的元素，修改元素。 v-once可在第一次加载后，将元素从监视数组中移除！之后遍历，无法遍历到该元素，则值不会被改变！

开始时间: {{now}}

data:{ now:new Date().toLocaleString()},

4. 创建自定义指令:
   Vue.directive(“自定义指令名”,{
   inserted(el){ //当元素被加载到DOM树时触发
   //el: 写有当前指令的当前DOM元素
   //对el执行DOM操作
   }
   })

强调: 定义指令名时, "自定义指令名"不加v-前缀
在HTML中使用时，要加v-前缀！
2. 在HTML元素上使用自定义指令:
强调: 必须加v-

5. Vue.js实例/组件生命周期 鄙视题
   生命周期: 从创建到销毁的过程
   Vue.js实例/组件生命周期:
   四个阶段:
6. 创建(create)阶段:
   new Vue实例或组件对象创建完成
   但尚未挂载DOM树
   $el: undefined 没有虚拟DOM树
   data: { … }
7. 挂载(mount)阶段:
   组件加载DOM树完成
   $el: DOM元素
   data: { … }
8. 更新(update)阶段: 组件所绑定的model数据发生变化
9. 销毁(destroy)阶段: 调用$destroy()方法，组件被销毁。
   为了在每个阶段，触发执行一项任务，Vue为每个阶段定义了生命周期钩子函数
   8个钩子函数:
10. beforeCreate(){}
11. created(){} ——可ajax请求获取数据，不可DOM操作
12. beforeMount(){}
13. mounted(){} ——可ajax请求，又可DOM操作
14. beforeUpdate(){}
15. updated(){}
16. beforeDestroy(){}
17. destroyed(){}