什么是VUE

  1. 什么是: 第三方开发的基于MVVM设计模式的渐进式的纯前端js框架

(1). 第三方: 下载

(2). 基于MVVM: 稍后重点讲

(3). 渐进式: 非常容易和其它技术交融，可逐渐在我的项目中应用vue，而不要求必须整体替换！

(4). 纯前端js: 不须要任何后端技术，就可独立开发和运行

(5). 框架:

a. 什么是: 曾经蕴含局部外围性能的半成品代码，短少个性化定制。

b. 为什么: 防止反复编码

c. 原生DOM  vs  jQuery  vs  Vue

![]

  1. 何时: 今后绝大多数以数据操作（增删改查）为主的PC端或挪动端我的项目都可用vue开发

比方: 美团，饿了么，淘宝，知乎，公众点评，微博...

二. 如何应用VUE

  1. 下载: 2种:

(1). 简略: 去官网下载vue.js文件，引入网页中——适宜于初学者入门(3天)

cn.vuejs.org

(2). 简单: 通过脚手架代码应用——综合，标准化，适宜公司开发之用(2天)

  1. 第一个vue程序: 3步:

(0). 也须要先引入vue.js

<script src="js/vue.js">

(1). 先定义增强版界面: (HTML+CSS)

a. 要求1: 整个界面要用一个惟一的父元素包裹起来,习惯上都用<div id="app">

b. 要求2: 找到界面中未来可能发生变化的地位，用{{自定义变量名}}非凡语法标记进去

c. 要求3: 找到界面中能够点击的地位绑定事件处理函数: @事件名="自定义处理函数名"

(2). 创立一个Vue类型的对象来监督页面中的内容

(3). 在Vue中定义好页面所需的所有资源: 变量+事件处理函数

a. 页面所需的所有变量，都必须保留在data属性中，且以对象属性模式保留

b. 页面所需的所有事件处理函数，都必须保留在methods属性中，且以对象办法模式保留

  1. 示例: 应用vue实现点击+/-按钮，批改数量:

1_first_jq.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-1.11.3.js"></script></head><body> <button>-</button><span>0</span><button>+</button> <script> //点+ 数量+1 //DOM 4步 //1. 查找触发事件的元素 //查找内容中蕴含+的button元素 $("button:contains(+)") //2. 绑定事件处理函数 .click(function(){ //3. 查找要批改的元素 //本例中: 查找以后按钮的前一个元素span var $span=$(this).prev(); //4. 批改元素 //4.1 取出元素的旧内容，并转为整数 var n=parseInt($span.html()); //4.2 计算新值: 将n+1 n++; //4.3 将新值再放回去 $span.html(n); }); //点- 数量-1 //DOM 4步 //1. 查找触发事件的元素 //查找内容中蕴含-的button元素 $("button:contains(-)") //2. 绑定事件处理函数 .click(function(){ //3. 查找要批改的元素 //本例中: 查找以后按钮的后一个元素span var $span=$(this).next(); //4. 批改元素 //4.1 取出元素的旧内容，并转为整数 var n=parseInt($span.html()); //4.2 计算新值:  //如果n>0，能力-1 if(n>0){ n--; } //否则什么也不干 //4.3 将新值再放回去 $span.html(n); }); </script></body></html>

运行后果:

2_first_vue.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body> <!--1. 先定义增强版界面（HTML+CSS） 要求1: 整个界面要用一个惟一的父元素包裹起来,习惯上都用<div id="app"> 要求2: 找到界面中未来可能发生变化的地位，用{{变量名}}非凡语法标记进去 本例中: 点+/-号，span元素的内容会发生变化 要求3: 找到界面中能够点击的地位绑定事件处理函数 //本例中: 点button +，执行+1(add)操作, 点button -, 执行-1(minus)操作 --> <div id="app"> <button @click="minus">-</button> <span>{{n}}</span> <button @click="add">+</button> </div> <script> //2. 创立一个Vue类型的对象来监督页面中的内容 //问题: 监督哪儿？ //解决: 用el属性:"选择器"，为new Vue指明要监督的范畴。el是element的缩写，指要监督的元素 new Vue({ el:"#app", //new Vue只负责id为app的div内的元素 //3. 在Vue中定义好页面所需的所有资源: 变量+事件处理函数 //3.1 页面所需的所有变量，都必须保留在data属性中，且以对象属性模式保留 data:{ //因为界面上须要一个变量n，所以这里须要些一个n反对页面 n:0 //起始值为0 }, //3.2 页面所需的所有事件处理函数，都必须保留在methods属性中，且以对象办法模式保留 methods:{ //因为界面上须要两个事件处理函数add和minus //所以这里须要定义两个办法 add(){//add:function(){ //vue中的事件处理函数不须要做任何DOM操作，只须要分心操作data中的变量即可 //强调: vue中methods中的办法要应用data中的变量，必须加this. this.n++ //后果: new Vue会主动将n变量的新值放到页面上 }, minus(){//minus:function(){ //如果以后n>0，才n-- if(this.n>0){ this.n-- } } } }) </script></body></html>

运行后果:

MVVM设计模式:

  1. 什么是: 对前端代码的从新划分
  2. 为什么:
    (1). 旧的前端代码分为三局部:
    a. HTML: 仅蕴含网页内容的动态代码
    b. CSS: 仅蕴含网页款式的动态代码
    c. JS: 负责所有网页内容、属性和款式的变动
    (2). 问题：
    a. HTML和CSS短少程序必要的因素: 没有变量，没有分支，没有循环，HTML和CSS简直生存不能自理！任何一点变动，都要靠js来实现
    b. js要负责HTML和CSS中简直所有变动，导致大量反复的代码和繁琐的步骤！
  3. MVVM如何从新划分前端代码: 仍然3局部:
    (1). 界面(View): 增强版的HTML+CSS
    a. HTML中能够应用变量了
    b. HTML中能够应用分支和循环了
    (2). 模型对象(Model): 专门保留界面所需的所有变量和事件处理函数的对象
    a. 专门保留界面所需的所有变量的对象，称为data
    b. 专门保留界面所属的所有事件处理函数的对象，称为methods
    (3). 视图模型(ViewModel): 一种专门主动将模型对象中的数据和函数与界面中放弃同步 的非凡的程序

Vue框架如何实现MVVM设计模式的: Vue的绑定原理

(1). 引入vue.js时，其实是引入了一种类型Vue(2). 如果向应用vue框架做开发，必须都要创立new Vue()对象(3). new Vue()刚创立时，先把模型对象的data和methods中的数据引入到new Vue()对象中。a. 先将data中的原变量隐姓埋名，半暗藏，再主动给data中每个变量请拜访器属性(保镖)冒名顶替。后果: 今后，在任何地位只有应用变量，其实应用的都是拜访器属性，曾经不可能间接应用原变量了！b. 在每个变量的拜访器属性中的set函数中，都内置了一个告诉函数。c. 后果: 未来只有试图批改拜访器属性示意的变量时，都会触发set中的告诉，来告诉整个框架，哪个变量被批改了！d. 而后，new Vue()会将methods中的事件处理函数，全副打散。导致methods中的所有事件处理函数，变成间接隶属于new Vue()对面的办法！e. 后果:     1). methods中的函数要想应用new Vue()中拜访器属性示意的变量，必须加this.    2). methods中的函数中的this，默认都指向以后new Vue()对象(4). 当new Vue()的data，methods和拜访器属性都创立结束后，new Vue()开始扫描el属性所指向的页面区域a. 扫描过程中，只会将可能发生变化的元素保留在一个汇合中。这个仅保留可能变动的大量的元素的汇合，称为虚构DOM树b. 首次扫描时，new Vue()会将data中的变量值首次自动更新到对应的元素上c. 今后new Vue()中任何一个变量一旦别批改，都会主动触发set函数中的告诉函数，告诉函数就会向虚构DOM树发送告诉.d. 一旦虚构DOM树接到某个变量发生变化的告诉之后，就会从新扫描"虚构DOM树"，疾速找到受本次变量变动影响的元素。并用变量的新值，自动更新元素的内容。![image.png](/img/bVcKCw4)

5. 总结:

vue的绑定原理: 拜访器属性+虚构DOM树

  1. 虚构DOM树的长处:
    (1). 小: 只蕴含可能变动的元素。
    (2). 遍历查找快
    (3). 批改效率高: 只批改受影响的元素。不受影响的元素，一点儿也不改！
    (4). 防止反复编码: 曾经封装了增删改查操作！程序员无需手动编写增删改查代码。
  2. 总结: vue性能的开发步骤: 3步
    (1). 先创立增强版的界面
    (2). 再创立new Vue()对象,其中el:指向new Vue()要监控的区域
    (3). 在new Vue()对象内定义模型对象data和methods
    a. 所有界面所需的变量都放在data中
    b. 所有界面所需的事件处理函数都放在methods中
总结:
  1. MVVM: 界面View+模型Model+视图模型ViewModel
  2. Vue绑定原理: 拜访器属性+虚构DOM树

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

  1. 虚构DOM树长处:

(1). 小: 只蕴含可能变动的元素。
(2). 遍历查找快
(3). 批改效率高: 只批改受影响的元素。
(4). 防止反复编码: 已封装DOM增删改查代码

  1. Vue性能3步:

(1). 先创立增强版的界面:
a. 可能变动的元素内容用{{自定义变量名}}标记
b. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创立new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

一. 绑定语法:  

学名 Interpolation 插值语法、填空

  1. 问题: 旧DOM和jq中，程序中的变量尽管产生了变动，然而界面不会自动更新，必须依附js手工将变量的新值更新到页面，导致大量反复的增删改查操作！
  2. 解决: VUE中让HTML中也反对变量了！做到程序中的变量变动，HTML界面中的显示主动变动！
  3. 什么是绑定语法: 让HTML中也反对变量的一种专门的语法格局
  4. 何时: 只有HTML中有的元素内容须要随变量主动变动时，都要用绑定语法
  5. 如何: <元素>xxxx{{自定义变量名}}xxxx</元素>
  6. 原理: 当new Vue()扫描页面时，只有扫描到{{}}这种语法，就会将{{}}中的js变量或表达式的值计算出来，再替换{{}}的地位最终显示给用户。
  7. {{}}中能够放什么，不能放什么？和ES6的模板字符串${}规定是齐全一样的！

(1). 能够放: 变量，运算，三目，有返回值的函数调用，创建对象，拜访数组元素

(2). 不能放: 程序结构(分支和循环)，也不能放没有返回值的函数调用！

  1. 示例: 应用{{}}将程序中的变量值加工后，显示到界面上

1_{{}}.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body> <!--1. 先做界面--> <div id="app"> <h3>用户名:{{uname}}</h3> <!--如果 性别==1，就显示"男",否则 就显示"女"--> <h3>性别:{{sex==1  ?   "男"   :       "女"}}</h3> <!--        单价 x 数量 按2位小数四舍五入--> <h3>小计:¥{{(price*count).toFixed(2)}}</h3> <!--新建日期对象，保留毫秒数，并转为当地工夫的字符串格局--> <h3>下单工夫: {{ new Date(orderTime).toLocaleString() }}</h3> <h3>明天星期{{week[new Date().getDay()]}}</h3> </div> <script> //2. 创立new Vue()对象监控id为app的区域 new Vue({ el:"#app", //3. 创立模型对象保留页面所需的所有变量 data:{ uname:"dingding", sex:1,//性别 price:12.5,//单价 count:5,//数量 orderTime:1595296375921,//下单工夫 week:["日","一","二","三","四","五","六"] //     0    1    2    3    4    5   6 //               ↑ //               2 //new Date().getDay() //创立日期对象 //并主动取得以后零碎工夫 //           取得星期对应的数字 } }) </script></body></html>

运行后果:

二. 指令: 13种

  1. 问题: {{}}可让元素的内容随变量主动变动，然而页面中可能发生变化的不止是内容！元素的属性和款式也可能发生变化！然而{{}}只反对内容变动，不反对属性值和款式变动！
  2. 解决: 指令
  3. 什么是: 指令就是为HTML元素增加更多新性能的非凡属性！
  4. 何时: 今后只有心愿给HTML增加更多新性能，比方分支，循环等等，都要用指令来实现
  5. 包含:

(1). v-bind:

a. 什么是: 专门让属性值也能依据变量值主动变动

b. 何时: 今后只有心愿属性值也能依据变量值主动变动时，都用v-bind

c. 如何: <元素 v-bind:属性名="变量或js表达式">

d. 强调: 一旦应用了v-bind，""中就不要再加{{}}了！""就承当了{{}}的作用！

e. 简写: 其实今后v-bind: ，只须要写:即可！v-bind可省略 ！

<元素 :属性名="变量或js表达式">

f. 原理: 当new Vue()扫描到v-bind: 或 : 时会主动计算""中的变量值或js表达式的值，将计算后的新值，作为该属性的属性值！

g. 示例: 依据pm25的数值显示不同的图片

2_v-bind.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body> <!--1. 做界面--> <div id="app"> <!--想实现依据空气质量pm25的数值，批改页面中img元素显示的人物表情--> <!-- //如果pm25<100，则应用img/1.png pm25<100  ?'img/1.png': //否则如果pm25<200，则应用img/2.png pm25<200?'img/2.png': //否则如果pm25<300，则应用img/3.png pm25<300?'img/3.png': //否则，其它状况，都应用img/4.png 'img/4.png' --> <h3>空气质量: {{ pm25<100?'img/1.png': pm25<200?'img/2.png': pm25<300?'img/3.png': 'img/4.png' }}</h3> <!--<img v-bind:src="--> <img :src=" pm25<100?'img/1.png': pm25<200?'img/2.png': pm25<300?'img/3.png': 'img/4.png' " alt=""> </div> <script> //2. 创立new Vue()对象监控id为app的区域 new Vue({ el:"#app", //3. 创立模型对象保留界面所需的变量 data:{ pm25:350 } }) </script></body></html>

运行后果:

(2). v-show:

a. 什么是: 专门依据一个条件管制一个元素的显示暗藏的指令

b. 何时: 今后只有管制一个元素显示暗藏，都用v-show

c. 如何: <元素 v-show="bool变量或js条件表达式">

d. 原理: 当new Vue()扫描到v-show时，会主动计算""中变量或表达式的bool值。 1). 如果计算结果为true，则什么也不做，以后元素默认显示。

2). 如果计算结果为false，则主动给以后元素加display:none，则以后元素暗藏。

e. 示例: 应用vue管制对话框显示暗藏
3_v-show.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> <style> .alert{ position:fixed; width:400px; height:200px; background-color:#afa; top:50%; left:50%; margin-left:-200px; margin-top:-100px; } .alert>a{ position:absolute; right:10px; top:10px; padding: 5px 10px; border:1px solid blue; } </style></head><body> <!--1. 做界面--> <div id="app"> <!--点击按钮能够让对话框显示--> <button @click="show">click me</button> <!--本例中: 心愿点按钮对话框div才显示，点x对话框div就暗藏，所以须要管制对话框div的显示和暗藏状态， 所以须要一个自定义变量isShow： isShow为true时，对话框才显示 isShow为false时，对话框就暗藏 --> <div v-show="isShow" class="alert"> <!--点×能够暗藏对话框--> <a href="javascript:;" @click="hide">×</a> </div> </div> <script> //2. 创立new Vue()对象,监控id为app的区域 new Vue({ el:"#app", //3. 创立模型对象，保留界面所需的所有变量 data:{ isShow:false //开局，对话框默认不显示 }, //因为页面中须要两个事件处理函数，所以 methods:{ show(){ this.isShow=true; }, hide(){ this.isShow=false; } } }) </script></body></html>

运行后果: