关于javascript:VUE01

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

(1). 第三方: 下载

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

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

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

(5). 框架:

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

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

c. 原生 DOM vs jQuery vs Vue

![]

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

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

二. 如何应用 VUE

下载: 2 种:

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

cn.vuejs.org

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

第一个 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 属性中，且以对象办法模式保留

示例: 应用 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>

运行后果:

什么是: 对前端代码的从新划分
为什么:
(1). 旧的前端代码分为三局部:
a. HTML: 仅蕴含网页内容的动态代码
b. CSS: 仅蕴含网页款式的动态代码
c. JS: 负责所有网页内容、属性和款式的变动
(2). 问题：
a. HTML 和 CSS 短少程序必要的因素: 没有变量，没有分支，没有循环，HTML 和 CSS 简直生存不能自理！任何一点变动，都要靠 js 来实现
b. js 要负责 HTML 和 CSS 中简直所有变动，导致大量反复的代码和繁琐的步骤！
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)

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

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

总结:

MVVM: 界面 View+ 模型 Model+ 视图模型 ViewModel
Vue 绑定原理: 拜访器属性 + 虚构 DOM 树

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

虚构 DOM 树长处:

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

Vue 性能 3 步:

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

学名 Interpolation 插值语法、填空

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

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

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

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

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>

运行后果:

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

(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>

运行后果:

关于javascript:VUE01

什么是 VUE

MVVM 设计模式:

5. 总结:

总结:

一. 绑定语法:

二. 指令: 13 种