【vue】vue概述及vue的绑定原理

目录

一. 什么是VUE

1. 什么是vue

2. 为什么要用vue

3. 何时用vue

二. 如何使用vue

1. 下载: 2种

2. 我的第一个vue程序

三. MVVM

💥 扩展：this判断—8种指向

⬛ 总结：知识点提炼

---

一. 什么是VUE 1. 什么是vue

         (1). 第三方开发的: 必须要下载才能使用

         (2). 基于MVVM设计模式的: (待续...)

         (3). 渐进式的: 可以逐步在项目中使用vue的技术。比较容易和其他技术(DOM、jQuery)混搭。但是，强烈不建议！

         (4). 纯前端js框架: 与nodejs无关，只需要浏览器就可以运行！

vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手。

2. 为什么要用vue

传统DOM和jQuery都存在着大量重复的编码！只有vue以及同类框架技术，才能几乎彻底的避免大量重复编码！提高开发效率

3. 何时用vue

今后，只要以数据 *** 作为主的项目，都可用vue开发：

         比如: 淘宝, 京东, 美团, 饿了么, 头条, 微博, ...
 

二. 如何使用vue 1. 下载: 2种

         (1). 下载vue.js文件到项目本地，然后引入.html页面中使用(前三天)

         a. 官网: cn.vuejs.org

         b. 版本: 2.6

                  1). 开发版: 未压缩版本。有完备的注释，代码格式，见名知意的变量名，友好的错误提示。

                  i. 优点: 可读性好，便于学习和开发之用

                  ii. 缺点: 体积大，不便于快速下载，不适合于生产环境

                  2). 生产版: 压缩版。去掉了完备的注释，代码格式。极简化了变量名。去掉了几乎所有的友好的错误提示！

                  i. 优点: 体积小，便于快速下载，适合于生产环境

                  ii. 缺点: 可读性差，不适合学习和开发之用

         c. 引入:

运行结果：

1_vue.html

  
  
  
  


  
  {变量名}}
    //本例中: span元素的内容将来会发生变化，所以不要写死内容。应该替换为{{n}}
    1.3 找到界面中触发事件的元素，用专门的语法标记出来: @事件名="事件处理函数名"
    //本例中: 两个按钮会触发单击事件
  -->
  
    -
    {{n}}
    +
  
  

运行结果： 

三. MVVM

1. 旧的前端代码划分为: 3部分:

         (1). HTML: 专门负责定义网页的内容和结构

         (2). CSS: 专门为网页添加样式

         (3). JS: 专门为网页添加交互行为

2. 问题: HTML和CSS太弱了！生活不能自理！一切哪怕是细微的改变，都要js来反复 *** 作。结果，DOM和jQuery都存在着大量重复的劳动！

3. 新的前端代码划分为: 3部分 MVVM设计模式   

         (1). 界面(View): HTML+CSS      View视图对象/界面 / view视图层      小区👈

         a. 增强版的: HTML支持变量、分支、循环等程序的要素。

         b. 好处: 大大减少了js代码中重复的劳动

         c. 比如: ...

         (2). 模型对象(Model):                Model模型对象/model模型数据层     仓库👈

         a. 专门替界面保存所有所需的变量和方法的特殊对象

         b. 界面需要几个变量，模型对象中就要有几个变量

         c. 界面中需要几个函数，模型对象中就要有几个函数

         d. 比如: data:{ ... }, methods:{ ... }

         (3). 视图模型对象(ViewModel):  VM视图模型对象/viewModel控制器层     快递员👈

         a. 什么是: 专门将界面和模型对象绑定起来的一种特殊的对象

         b. 绑定: 只要模型对象中数据发生变化，视图模型可以自动保证界面上自动同步更新内容。

         c. 比如: new Vue({ el:"#app", data:{ ... }, methods:{ ... } })

4. vue是如何实现MVVM设计模式的：vue的绑定原理:

         (1). 通过访问器属性来监控模型对象中每个变量的变化:

         a. 创建new Vue()之后，立刻创建data:{...}对象。

         b. new Vue()会自动为data对象中每个变量请保镖——访问器属性

         c. 结果: 从此我们用的data中的变量，早就不是原版的变量了。其实都是同名的访问器属性。

         d. 然后new Vue()会继续引入methods对象，并打散methods对象。

         e. 结果: 从此methods中的方法都直接隶属于new Vue()。所以，methods中的方法中想访问new Vue()下的其它变量，必须加this.

         f. 当在new Vue()任何位置修改变量值时，其实修改的都是访问器属性，就会自动触发访问器属性的set()。new Vue()在set()函数中悄悄添加了一个"通知函数"。只要修改任何变量，都会自动调用set()中的通知函数。告知外部，哪个变量被修改了！

         (2). 虚拟DOM树:

         a. 什么是虚拟DOM树: 内存中专门保存所有可能发生变化的元素的简化版DOM树——本质是一个巨大的对象，其中包含很多可能发生变化的DOM元素

         b. 何时创建:

                  1). 当new Vue()中data:{}和methods:{}对象都创建完之后，new Vue()会根据el属性的指引，去扫描对应的界面内容

                  2). 只找出可能发生变化的元素，保存到“虚拟DOM树”中

         c. 今后当某个变量值更新时:

                  1). 该变量的访问器属性set()一定会发出通知，给虚拟DOM树。

                  2). 虚拟DOM树收到通知，会遍历虚拟DOM树中所有可能发生变化的元素。只找到受本次变量修改影响的个别元素。

                  3). (虚拟DOM树)用提前封装好的原生DOM *** 作，来只修改受影响的个别元素！

5. 为什么很多框架都选择虚拟DOM树？虚拟DOM树的优点

         (1). 小: 只保存可能变化的元素！

         (2). 遍历快: 因为小，所以遍历快

         (3). 更新效率高: 只修改受影响的个别元素

         (4). 避免重复编码: 已经提前封装了原生的DOM增删改查 *** 作！

💥 扩展：this判断—8种指向

this  8种指向: 判断this，一定不要看定义在哪儿！只看调用时！

➡️ 1. obj.fun()   this->obj

➡️ 2. fun() 或 (function(){ ... })() 或 多数回调函数 或 定时器函数   this->window

➡️ 3. new Fun()   this->new正在创建的新对象

➡️ 4. 类型名.prototype.共有方法=function(){ ... }   this->将来谁调用指谁，同第一种情况

➡️ 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

                               如果需要使用简化版函数，必须$(this)

➡️ 6. 箭头函数中的this->箭头函数外部作用域中的this

➡️ 7. jQuery.fn.自定义函数=function(){ ... }   this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)

➡️ 8. new Vue()中methods中的函数中的this->当前new Vue()对象 

⬛ 总结：知识点提炼

1. MVVM: 界面View+模型Model+视图模型ViewModel

2. Vue绑定原理: 访问器属性+虚拟DOM树

         变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

3. 虚拟DOM树优点:

(1). 小: 只包含可能变化的元素。

(2). 遍历查找快

(3). 修改效率高: 只修改受影响的元素。

(4). 避免重复编码: 已封装DOM增删改查代码

4. Vue功能3步:

(1). 先创建增强版的界面:

  a. 整个界面必须包含在一个唯一的父元素下:

    通常是
  b. 可能变化的元素内容用{{自定义变量名}}标记

  c. 触发事件的元素用@click="自定义处理函数名"标记

(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域

(3). 在new Vue()对象内定义模型对象data和methods

  a.界面所需的所有变量都放在data中

  b.界面所需的所有事件处理函数都放在methods中

---

  【后文传送门】👉 ​​​​​​​vue的插值语法及常用指令的应用_02 ​​​​​​​

​​

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！