乐趣区

关于javascript:VUE02

jiezi

(3). v-if 和 v -else:

a. 什么是: 专门依据一个条件管制两个元素二选一显示
b. 何时: 今后只有两个元素二选一显示时，都用 v -if 和 v -else
c. 如何: 
< 元素 1 v-if="bool 变量或 js 条件表达式"></ 元素 1 >
< 元素 2 v-else></ 元素 2 >
d. 强调: v-if 和 v -else 两个元素必须紧挨着写！两头不能插入任何其它内容！e. 原理: new Vue()扫描到 v -if 和 v -else 这里时，会主动计算变量值或条件表达式的后果。1). 如果 v -if 中的条件表达式计算结果为 true，则保留 v -if 所在的元素，删除 v -else 所在的元素
    2). 如果 v -if 中的条件表达式计算结果为 false，则删除 v -if 所在元素，保留 v -else 所在元素
f. 高频口试题: v-show 和 v -if 都能管制元素显示暗藏，差异: 
    1). v-show 是通过 display:none 来管制显示暗藏
    2). v-if 是通过删除元素来管制显示暗藏
g. 示例: 依据用户的登录状态，显示不同的内容

4_v-if_v-else.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">

 <!-- 如果已登录，显示 Welcome，用户名

 否则如果未登录，显示登录和注册按钮

 所以, 须要一个自定义变量 isLogin 来记录以后用户的登录状态 -->

 <h3 v-if="isLogin">

 <!-- 点登记按钮，将以后用户设置为未登录状态 -->

 Welcome dingding | <a href="javascript:;" @click="logout"> 登记 </a>

 </h3>

 <h3 v-else>

 <!-- 点登录按钮，将以后用户设置为已登录状态 -->

 <a href="javascript:;" @click="login"> 登录 </a> | <a href="javascript:;"> 注册 </a>

 </h3>

 </div>

 <script>

 //2. 创立 new Vue()对象，监控 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型变量保留界面上所需的所有变量

 data:{isLogin:false, // 开局用户默认处于未登录状态},

 // 因为界面上须要两个事件处理函数，所以

 methods:{login(){this.isLogin=true;},

 logout(){this.isLogin=false;}

 }

 })

 </script>

</body>

</html>

运行后果：

(4). v-else-if

a. 什么是: 专门和 v -if 和 v -else 配合来管制多个元素多选一显示

b. 何时: 只有多个元素多选一显示时

c. 如何:

< 元素 1 v-if=” 条件 1 ″>

< 元素 2 v-else-if=” 条件 2 ″>

… …

< 元素 n v-else>

d. 强调: v-if  v-else-if  v-else 的几个元素必须紧挨着写，两头不能插入其余内容。

e. 原理:

1). 当 new Vue()扫描到 v -if 时，先计算 v -if 后的变量或条件表达式，如果 v -if 后的条件为 true，则保留 v -if 删除其它 v -else-if 和 v -else

2). 如果 v -if 的条件为 false，则持续向后扫描每个 v -else-if。只有任意一个 v -else-if 后的条件为 true，则删除除该 v -else-if 之外的其余兄弟元素，只显示以后 v -else-if 的元素.

3). 如果所有 v -if 和 v -else-if 的条件都为 false，则删除所有 v -if 和 v -else-if 的元素，仅保留 v -else 所在元素显示。

f. 示例: 依据 pm25 数值抉择一张图片显示

5_v-else-if.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 的数值在四张图片当选其一显示 -->
    <!-- 如果 pm25<100，显示第一张图片 -->
    <!-- 否则如果 pm25<200，显示第二张图片 -->
    <!-- 否则如果 pm25<300, 显示第三张图片 -->
    <!-- 否则如果以上条件都不满足，才显示第四张图片 -->
    <img v-if="pm25<100" src="img/1.png" alt="">
    <img v-else-if="pm25<200" src="img/2.png" alt="">
    <img v-else-if="pm25<300" src="img/3.png" alt="">
    <img v-else src="img/4.png" alt="">
  </div>
  <script>
    //2. 创立 new Vue()对象，监督 id 为 app 的区域
    new Vue({
      el:"#app",
      //3. 创立模型对象，保留界面中所需的所有变量
      data:{pm25:350}
    })
  </script>
</body>
</html>

运行后果:


(5). v-for

对应小程序视频列表: 小程序 -> 在线 ->VUE->day01 4. v-for 遍历数组 …

a. 什么是: 专门依据数组中的元素内容，主动重复生成多个雷同构造的然而内容不同的页面元素列表 的指令

b. 何时: 只有在页面中重复生成多个雷同构造的元素组成的列表

c. 如何: < 要重复生成的元素 v-for=”(元素值, 下标) of 数组 ” :key=” 下标 ”>

d. 原理:

1). 当 new Vue()扫描到 v -for 时，会主动遍历 of 后的数组

2). 每遍历数组中的一个元素值，

i. 就主动将以后元素值和以后下标地位保留到 of 前的两个变量中（程序不能变）。

ii. 还会主动创立以后 v -for 所在的元素正本，并用 of 前的两个变量内容，填充新生成的雷同构造的元素正本。

e. 示例: 应用 v -for 遍历人名数组，并在页面显示人名列表

6_v-for.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">

 <!-- 想显示一个人名的列表, 所以在程序中应该有一个数组 arr 来保留所有的人名, 并 HTML 中应该用 v -for 来遍历数组中每个人名，每遍历一个人名就创立一个 li 元素的正本，每个 li 元素中都显示以后人名的下标和人名 -->

 <ul>

 <li v-for="(ename,i) of arr">{{i+1}} - {{ename}}</li>

 </ul>

 </div>

 <script>

 //2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留页面所需的所有变量

 data:{arr:["亮亮","然然","东东"]

 }

 })

 </script>

</body>

</html>

运行后果:

f. 问题: v-for 生成的多个雷同构造的元素正本除了内容不同之外，元素自身毫无差异！所以，万一数组中某个地位的元素被删除一个，v-for 无奈晓得该准确的删除哪一个页面元素正本，v-for 只能采纳一个很笨的方法，删除所有正本，重建整个列表！——效率极低！

g. 解决: 今后只有应用 v -for 重复生成多个雷同构造的元素正本时，都要为每个元素正本额定绑定一个专门的属性: :key=” 不反复的值 ”，key 绑定的值要求必须是惟一的值不能反复

h. 长处: 从此每个元素正本都有一个惟一的标识，当数组中某个地位的元素被删除时，v-for 只有依据下标找到对应 key 值的一个元素对象，删掉即可，其余元素不受影响——效率高！

i: 高频口试题: v-for 为什么必须绑定

答: 如果不绑定:key，则每删除数组中一个元素，v-for 都会删除所有元素正本，重建整个列表——批改效率低。绑定:key 是给每个元素正本增加一个惟一的标识，在删除数组元素时，可依据惟一标识找到对应的一个元素对象，删除即可，其它元素不受影响——批改效率高！

j: 其实 v -for 岂但能够遍历数字下标的数组，还可遍历自定义下标名称的对象或关联数组。

k. 示例: 遍历对象中每属性，在页面创立属性列表

7_v-for_obj.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">

 <!-- 想显示一个学生对象的个人信息

 用 v -for 去遍历 lilei 对象中每属性

 自定义的 key 变量，接住正在遍历的属性的属性名

 自定义的 value 变量，接住正在遍历的属性的属性值

 因为对象中，属性名肯定是不反复的！所以:key 应该绑定不反复的属性名 -->

 <ul>

 <li v-for="(value,key) of lilei" :key="key">{{key}} : {{value}}</li>

 </ul>

 </div>

 <script>

 //2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留页面所需的所有变量

 data:{

 lilei:{

 sname:"Li Lei",

 sage:11,

 className:"初一 2 班"

 }

 }

 })

 </script>

</body>

</html>

运行后果:

l: 其实: v-for 还会数数，v-for 可依据给定的一个数字，从 1 开始顺次生成指定数量的元素正本。

    < 元素 v-for="i of 整数">
    ![image.png](/img/bVcKCzI)

m: 示例: 应用 v -for 懂啊提生成一组分页按钮

8_v-for_n.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>

 ul{list-style:none;}

 ul>li{

 float:left;

 padding: 5px 10px;

 border:1px solid #aaa

 }

 ul>li~li{border-left:0;}

 </style>

</head>

<body>

 <!--1. 做界面 -->

 <div id="app">

 <!-- 想生成一组分页按钮，依据程序中总页数 (pageCount) 变量值动静生成指定数量的分页按钮 -->

 <ul>

 <li v-for="i of pageCount" :key="i">{{i}}</li>

 </ul>

 </div>

 <script>

 //2. 创立 new Vue()对象监控 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留界面所需的所有变量

 data:{pageCount:5}

 })

 </script>

</body>

</html>

运行后果:

(6). v-on:

对应小程序视频: 小程序 -> 在线 ->VUE->day02 1. 事件绑定 v-on @…

a. 什么是: 专门为元素绑定事件处理函数的指令

b. 何时: 今后只有为元素绑定事件处理函数都用 v -on

c. 如何: 规范:

1). HTML 中: < 元素 v-on: 事件名 =” 处理函数(实参值,…)”>

2). new Vue()中 methods 中: 处理函数(形参变量,…){…}

d. 简写: < 元素 @事件名 =” 处理函数 ”>

1). v-on: 可用 @代替

2). 如果事件处理函数不须要传入实参值，则 () 可省略！

e. 需要 1: 心愿触发事件处理函数时能够传入实参值

1). < 元素 @事件名 =” 处理函数(实参值, …)”>

methods:{

处理函数(形参变量, …){…}

}

2). 示例: 点哪个 div，就喊哪个 div 疼！

9_v-on.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>

 #d1,#d2{

 width:400px;

 height:300px;

 }

 #d1{background-color:#afa}

 #d2{background-color:#aaf}

 </style>

</head>

<body>

 <!--1. 做界面 -->

 <div id="app">

 <!-- 需要 1: 两个 div，点哪个 div，就让哪个 div 喊疼!

 所以在绑定事件处理函数时，将每个 div 的名字字符串，提前放入事件处理函数的实参中！-->

 <div id="d1" @click="say(' 亮亮 ')"> 成亮 </div>

 <div id="d2" @click="say(' 然然 ')"> 李然 </div>

 </div>

 <script>

 //2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留页面所需的变量和事件处理函数

 // 没有变量，所以不必写 data

 // 然而有事件处理函数

 methods:{

 // 因为事件绑定时会传入一个实参值，所以定义事件处理函数时，须要定义一个形参变量，筹备接未来传入的实参值。say(ename){console.log(`${ename} 疼!`);

 }

 }

 })

 </script>

</body>

</html>

运行后果:

f. 需要 2: 心愿事件产生时，取得事件对象——同 DOM

    1). < 元素 @事件名 ="事件处理函数"> // 强调: 只取得事件对象 e 时，不要加()
        // 一旦 HTML 中加了()，就不再主动传事件对象 e 了
        methods:{
            //          event
            //           ↓
            事件处理函数(e){...}
        }
    2). 示例: 点 div 哪个地位，就喊哪个地位疼

10_v-on_e.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>

 #d1,#d2{

 width:400px;

 height:300px;

 }

 #d1{background-color:#afa}

 #d2{background-color:#aaf}

 </style>

</head>

<body>

 <!--1. 做界面 -->

 <div id="app">

 <!-- 需要 1: 点在 div 的某个地位，喊某个地位疼！所以在绑定事件处理函数时什么都不传入

 而是在定义事件处理函数中增加形参 e，主动取得事件对象，从而进一步主动取得事件对象中的鼠标地位 -->

 <div id="d1" @click="say"> 成亮 </div>

 <div id="d2" @click="say"> 李然 </div>

 </div>

 <script>

 //2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留页面所需的变量和事件处理函数

 // 没有变量，所以不必写 data

 // 然而有事件处理函数

 methods:{

 // 心愿在事件产生时主动取得事件对象 e

 //event 主动创立

 //  ↓ 主动传入

 say(e){console.log(`x:${e.offsetX},y:${e.offsetY}地位疼!`);

 }

 }

 })

 </script>

</body>

</html>

运行后果:

g. 需要 3: 口试题: 如何既传入自定义实参值，又取得事件对象

1). 错误做法:

< 元素 @事件名 =” 处理函数(实参值,…)” // 只有 HTML 中写()

methods:{

event

↓

处理函数(e) // 事件产生时就不会主动传入 event 了

}

2). 正确做法:

DOM event

↓

< 元素 @事件名 =” 处理函数(实参值, $event,…)”>

methods:{

处理函数(形参变量, e, …){…}

}

其中: $event 是 vue 框架内置的一个关键字(不能改名)，先于事件处理函数取得 event 对象，包装起来备用。在 HTML 中传入 $event 时，和其它实参值没有必然的程序要求！

3). 示例: 点哪个 div 的哪个地位，就喊哪个 div 的哪个地位疼

11_v-on_$event.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>

 #d1,#d2{

 width:400px;

 height:300px;

 }

 #d1{background-color:#afa}

 #d2{background-color:#aaf}

 </style>

</head>

<body>

 <!--1. 做界面 -->

 <div id="app">

 <!-- 需要 3: 点在哪个 div 的某个地位，喊谁的某个地位疼！既要传入人名，又要传入事件对象 -->

 <!--                  写死字符串 关键字 -->

 <div id="d1" @click="say(' 亮亮 ',$event)"> 成亮 </div>

 <div id="d2" @click="say(' 然然 ',$event)"> 李然 </div>

 </div>

 <script>

 //2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留页面所需的变量和事件处理函数

 // 没有变量，所以不必写 data

 // 然而有事件处理函数

 methods:{

 // 心愿在事件产生时同时取得自定义实参值和事件对象

 say(ename, e){console.log(`${ename}的 x:${e.offsetX},y:${e.offsetY}地位疼!`);

 }

 }

 })

 </script>

</body>

</html>

运行后果:

(7). 避免用户短暂看到{{}}

对应小程序视频: 小程序 -> 在线 ->VUE->day02  2. 其它指令 绑定 HTML 内容 避免用户短暂看到{{}}

a. 问题: 当网速慢的时候，new Vue()所在的 js 文件，可能下载提早，就会让用户短暂看到 HTML 中的 {{}} 语法.

b. 解决: 2 种:

1). v-cloak 指令: // 幕布、隐身斗篷

i. 什么是: 专门在 new Vue()下载实现前临时用于暗藏元素的非凡指令

ii. 何时: 今后所有用 {{}} 绑定的地位，为了避免用户短暂看到 {{}} 语法，都应该用 v -cloak 临时暗藏

iii. 如何: 2 步:

①先在网页的 style 中用属性选择器为所有 v -cloak 的元素增加 display:none 属性

<style>

/抉择所有带有 v -cloak 属性的元素/

[v-cloak]{// 隐身斗篷

display:none;

}

</style>

②再为要长期暗藏的元素增加 v -cloak 属性

iv. 原理:

①在 new Vue()加载进去之前，[v-cloak]{display:none}发挥作用，找到所有带有 v -cloak 指令的元素，让他们临时暗藏

②在 new Vue()加载进去之后，new Vue()会主动找到所有 v -cloak 属性，并删除他们。后果: 原来因为 v -cloak 属性而暗藏的元素，才显示进去！

v. 问题: 被迫岂但要写 HTML 和 js，还要记得去写 css，繁琐

2). v-text:

i. 什么是: 专门代替 {{}} 语法来绑定元素内容的非凡指令

ii. 为什么: {{}}有可能导致用户短暂看到 {{}} 语法。如果不应用{{}}，而改为应用元素开始标签中的 v -text 属性。则就算属性值没有加载进去，用户也不可能看到元素开始标签中的属性。

iii. 何时: 其实为了防止用户短暂看到 {{}} 语法，也能够用 v -text 来解决

iv. 如何: < 元素 v-text=” 变量或 js 表达式 ”>  </ 元素 >

v. 原理: 当 new Vue()扫描到 v -text 时，会先计算 ”” 中的变量值或表达式后果，而后用变量值或表达式的后果，笼罩元素开始标签到完结标签之间的内容

vi. 问题: 如果元素的内容须要写死的局部字符串和动静生成的局部字符串拼接而成！

解决: 那么，就不得不用模板字符串！而不能用{{}}

< 元素 v-text=”xxxxxx${变量或 js 表达式}xxxxx“>

vii. 问题: “” 里再套反引号，写法太繁琐！

解决: 其实有简写: 外围的 ”” 可省略，只写反引号 “ 即可

< 元素 v-text=xxxxxx${变量或 js 表达式}xxxxx>

viii. 问题: 在元素的属性中应用模板字符串拼接，可读性差

c. 以上两种状况都有问题: 依据集体爱好用哪个都行！

d. 示例: 别离应用 v -cloak 和 v -text 避免用户短暂看到{{}}

12_v-cloak_v-text.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>

 /* 抉择所有带有 v -cloak 属性的元素 */

 [v-cloak]{display:none;}

 </style>

</head>

<body>

 <!--1. 先做界面 -->

 <div id="app">

 <h3 v-cloak> 用户名: {{uname}}</h3>

 <h3 v-text=` 积分:${score}`></h3>

 </div>

 <script>

 // 假如网络提早，new Vue()所在的 js 文件提早 2s 下载

 setTimeout(function(){//2. 创立 new Vue()对象，监督 id 为 app 的区域

 new Vue({

 el:"#app",

 //3. 创立模型对象，保留界面所需的变量

 data:{

 uname:"dingding",

 score:3000

 }

 })

 },2000);

 </script>

</body>

</html>

运行后果:

总结

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

1. obj.fun()   this->obj

  1. fun() 或 (function(){…})() 或 少数回调函数 或 定时器函数 this->window
  2. new Fun()   this->new 正在创立的新对象

4. 类型名.prototype. 共有办法 =function(){ …} this-> 未来谁调用指谁，同第一种状况

  1. 箭头函数中的 this-> 箭头函数内部作用域中的 this
  2. DOM 或 jq 中事件处理函数中的 this-> 以后正在触发事件的 DOM 元素对象

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

  3. jQuery.fn. 自定义函数 =function(){ …} this-> 未来调用这个自定义函数的. 前的 jQuery 子对象，不必再 $(this)
  4. new Vue()中 methods 中的函数中的 this-> 以后 new Vue()对象

总结:

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

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

  1. 虚构 DOM 树长处:

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

  1. Vue 性能 3 步:

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

总结:

绑定语法 +13 种指令

  1. 如果元素的内容须要随变量主动变动: {{}}
  2. 如果元素的属性值须要随变量主动变动: :
  3. 管制一个元素显示暗藏: v-show
  4. 管制两个元素二选一显示: v-if v-else
  5. 多个元素多选一显示: v-if v-else-if v-else
  6. 只有重复生成多个雷同构造的元素组成列表时: v-for :key=” 惟一标识 ”
  7. 只有绑定事件: @ $event
  8. 避免用户短暂看到{{}}: v-cloak 和 v -text

今日对应小程序视频列表:

小程序 -> 在线 ->VUE->day01  3. 绑定语法 {{}} v-bind ...v-show...v-if...
                         4. v-for 遍历数组 ...
小程序 -> 在线 ->VUE->day02  1. 事件绑定 v-on @...
                          2. 其它指令 绑定 HTML 内容 避免用户短暂看到{{}}
退出移动版