关于javascript:VUE01

45次阅读

共计 8413 个字符，预计需要花费 22 分钟才能阅读完成。

什么是 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>

运行后果:


正文完
javascript
发表至： javascript
2020-11-20
 0
四种方法实现──三栏布局（圣杯布局、双飞翼布局）
精读《React PowerPlug 源码》
「每日一瞥 」0218 ~ 0308
每日 30 秒 ⏱ 优雅初始化数组