> 文档中心 > 【vue】vue的常用指令及用法总结(续)_03

【vue】vue的常用指令及用法总结(续)_03

目录

一. vue插值语法

二. vue指令

1. v-bind

2. v-show

3. v-if 和 v-else

4. v-else-if

5. v-for

6. v-on

7. v-html

8. v-cloak和v-text

9. v-once:

10. v-pre

11. v-model

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

⬛ 总结:知识点提炼


【前文回顾】👉 vue的插值语法及常用指令的应用_02


一. vue插值语法

二. vue指令

1. v-bind

2. v-show

3. v-if 和 v-else

4. v-else-if

5. v-for

6. v-on

         (1). 什么是: 专门绑定事件的指令

         (2). 何时: 今后只要一个元素可能触发事件,都用v-on来绑定事件.

         (3). 如何:

         a. 标准:

         b. 简写:

         c. 更简写: 如果事件处理函数不需要传参,则可以省略()

        

         (4). 只要界面中定义了几个事件绑定,new Vue()中methods里,就要定义几个同名的方法支持:

         new Vue({
                  el:"#app",

                  data:{ ... },

                  methods:{

                          处理函数(形参列表){

                                   ... this.变量名 ...

                          }

                  }
         })

         (5). 示例: 绑定事件处理函数,并传参

         1_v-on.html

      Document        #d1,#d2{      width:200px; height:100px;    }    #d1{      background-color:#afa    }    #d2{      background-color:#aaf    }    
d1
d2
new Vue({ el:"#app", methods:{ //因为界面上需要一个事件处理函数 say(dname){ console.log(`${dname} - 疼!`) } } })

 运行结果:

         (6). 获得事件对象:

         a. 和DOM中完全一样:

                  1). DOM中: 给事件处理函数添加第一个形参。事件发生时,浏览器就会自动将事件对象传递给事件处理函数的第一个形参:

                                                   event对象
                                                         ↓

                  元素.on事件名=function( e ){ ... e ...}

                  或

                  元素.addEventListener("事件名", function(e){ ... e ... })

                  2). vue中:

                  i. 界面中: 绑定时千万不要加()

                 

                  因为加上空的(),表示什么参数都不传!浏览器一旦看到空的(),就不会自动传事件对象了!

                  ii. methods: {

                          处理函数(e){

                                   ... e和DOM中的e,完全一样!...

                          }

                  3). 示例: 获得鼠标位置,实现点哪儿,喊哪儿疼!

                  1_v-on2.html

      Document        #d1,#d2{      width:200px; height:100px;    }    #d1{      background-color:#afa    }    #d2{      background-color:#aaf    }    
d1
d2
new Vue({ el:"#app", methods:{ //因为界面上需要一个事件处理函数 say(e){ console.log(`x:${e.offsetX},y:${e.offsetY} - 疼!`) } } })

运行结果: 

                  4). 问题: 矛盾:

                  a. 本来vue的事件处理函数,是可以传实参值的

                  b. 但是,要想获得事件对象e,又必须不能加()

         b. 即获得事件对象,又可传实参值:

                  1). 界面中: 绑定事件处理函数时,要用$event代替事件对象。

                  a. 凡是$开头的都是vue中的关键字,有特殊功能!不能改变!

                  b. 什么是$event: 提前获得浏览器自动创建的事件对象!

                  c. 如何:

                                          提前接住浏览器的event对象

                          <元素 @事件名="处理函数($event, 其它实参值)"

                  2). new Vue()中:

                          methods:{

                                   处理函数(e, 其它形参){

                                   }

                          }
                  🕵️ Tips$event和其它实参值的放置顺序可以调换

                  3). 示例: 即获得事件对象,又传入其它实参值:

                  1_v-on3.html

      Document        #d1,#d2{      width:200px; height:100px;    }    #d1{      background-color:#afa    }    #d2{      background-color:#aaf    }    
亮哥
然哥
new Vue({ el:"#app", methods:{ //因为界面上需要一个事件处理函数 say(e,dname){ console.log(`${dname}的x:${e.offsetX},y:${e.offsetY}位置 - 疼!`) } } })

运行结果: 

7. v-html

         (1). 问题: 使用{{}}绑定一段HTML内容时,显示在页面上的结果是未解析的原始的HTML内容。

         (2). 解决: 今后只要绑定的是一段HTML内容,都要用v-html代替{{}}

         (3). 如何:     

         (4). 示例: 使用v-html绑定HTML内容:

         2_v-html.html

      Document    

{{msg}}

new Vue({ el:"#app", data:{ msg:`来自<<新华社>>的消息` } })

运行结果: 
 

来自<<新华社>>的消息

来自<>的消息

8. v-cloak和v-text

         (1). 问题: 当网速慢时,new Vue()下载和运行有些延迟,对界面的解析也有些延迟。导致用户短暂看到{{}}语法!

         (2). 解决:

         a. v-cloak:

                  斗篷

                  1). 什么是: 专门在new Vue()加载之前,临时隐藏元素的特殊指令

                  2). 何时: 今后只要希望即使new Vue()加载之前,也不希望用户看到{{}}时,都用v-cloak隐藏

                  3). 如何: 2步

                  a. 因为v-cloak本身不带任何样式!所以,必须靠我们自己定义v-cloak属性选择器,添加隐藏的样式!

                          css中:  [v-cloak]{ display:none }

                  b.

                  4). 原理:

                  i. 开局: v-cloak在元素上,发挥作用,元素隐藏

                  ii. 当new Vue()加载完之后,会自动扫描页面中所有v-cloak属性,并自动删除所有v-cloak属性。v-cloak不再发挥作用。元素就显示出来了。

         b. v-text:

                  1). 什么是: 专门代替{{}}绑定元素内容的特殊指令

                  2). 为什么: 因为{{}}出现在元素的内容中,一旦解析延迟,用户就会短暂看到{{}}。而v-text是写在元素的开始标签中的属性,即使new Vue()加载延迟,用户也不可能看到元素的属性!

                  3). 何时: 今后只要想避免用户短暂看到{{}},都可以用v-text代替{{}}绑定元素的内容.

                  4). 如何:     

                 🕵️ Tips标签之间的内容不用写,因为v-text=后的"变量或表达式"会代替元素内容

                  5). v-text vs v-html

                  i. v-text和{{}}性质是一样的,如果绑定的内容是一段HTML片段,则也不会解析,而是原样显示在界面上。所以,不能用v-text来绑定html片段内容.

                  ii. v-html可以将原始的HTML片段先解析后,再显示给人看。所以,今后,只要绑定的内容是HTML片段内容,都用v-html。

         c. 示例: 防止用户短暂看到{{}}

         3_v-cloak_v-text.html

      Document        /*复习属性选择器*/    [v-cloak]{display:none     }    

用户名:{{uname}}

setTimeout(function(){ new Vue({ el:"#app", data:{ uname:"dingding", score:3000 } }) },3000)

运行结果: 

  

🕵️Tips:v-cloak与v-text解决的问题都是:new Vue()延迟加载时,用户短暂看到{{}}的问题,至于使用哪个更好,没有定论,看个人习惯

9. v-once:

         (1). 什么是: 专门控制一个元素只在首次加载时,动态绑定一次内容。今后,即使变量发生变化,该元素也不更新。

         (2). 何时: 今后只要一个元素的内容,只需要在首次加载时,动态绑定一次,今后,不再改变,都用v-once来修饰。

         (3). 如何:

         (4). 原理: 凡是带有v-once的元素,只在首次加载时更新内容。并不会被保存到虚拟DOM树。所以,即使将来变量变化,也无法通知到该元素。自然,内容不会再改变。

         (5). 优化: 凡是只在首次加载时更新,今后不更新的元素,如果用v-once标记,就不会被加入到虚拟DOM树中。减小了虚拟DOM树的大小,跟提高了遍历和查找的效率。

         (6). 示例: 页面显示上线时间和当前系统时间

         4_v-once.html

      Document    

上线时间: {{time}}

当前系统时间: {{time}}

var vm=new Vue({ el:"#app", data:{ time:new Date().toLocaleString() } }); //每隔1秒,重新获得系统时间,显示在网页上 setInterval(function(){ vm.time=new Date().toLocaleString(); },1000)

运行结果: 

上线时间: 2020/10/26 下午2:16:42

当前系统时间: 2020/10/26 下午2:16:58

10. v-pre

         (1). 什么是: 专门保护元素内容中的{{}}不被vue编译!

         (2). 何时: 如果内容正文中,刚好有{{}},又不想被vue编译时,就可用v-pre来保护.

         (3). 如何:

         (4). 结果: 内容中的{{}}会原样显示在网页中。

         (5). 示例: 使用v-pre保护内容中的{{}}不被new Vue()编译

         5_v-pre.html

      Document    

Vue中都是用{{变量名}}语法来标记页面中可能发生变化的位置

new Vue({ el:"#app" })

运行结果:

Vue中都是用{{变量名}}语法来标记页面中可能发生变化的位置

11. v-model

         (1). 什么: v-model 指令,能轻松实现表单输入和应用状态之间的双向绑定。

         (2). 何时: 获取到用户表单提交的数据,我们通常会使用v-model指令来完成。

◼️ v-model的作用

👉 vue中使用v-model指令来实现表单元素和数据的双向绑定。

👉 将表单中用户提交的信息和程序员设定的变量进行绑定。

❓ 区别于v-bind:动态更新HTML元素上的属性的值

v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化

◼️ v-mode的原理

官方文档:『v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。』

因为官方文档里有说到,v-model其实是一个语法糖,他背后的原理本质上是包含两个操作

  • v-bind绑定元素的value属性
  • v-on指令给当前元素绑定input事件

所以上述代码等价于

        Document  
/*简写: */

输入的内容是:{{ message }}

var app = new Vue({ el: '#app', data: {message: '' } })

当然,我们也可以把input事件定义为一个方法去调用——v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;

        Document  

输入的内容是:{{ message }}

var app = new Vue({ el: '#app', data: {message: '' }, methods: { //对象方法简写 // handleInput(e){ // this.messsge = e.target.value; // } handleInput: function (e) { this.messsge = e.target.value;} } })

💥 扩展: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中

5. 总结: 绑定语法+13种指令

(1). 如果元素的内容需要随变量自动变化:  {{}}

(2). 如果元素的属性值需要随变量自动变化:  :

(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素

(4). 控制两个元素二选一显示:  v-if  v-else //使用删除元素方式隐藏元素

(5). 多个元素多选一显示: v-if  v-else-if   v-else

(6). 只要反复生成多个相同结构的元素组成列表时: v-for  :key="唯一标识"

强调: 为什么必须加:key="i"?给每个元素副本添加唯一标识。修改数组中某个元素值时,避免重建整个列表,只需要修改一个DOM元素副本即可!提高修改效率。

(7). 只要绑定事件: @  $event

(8). 防止用户短暂看到{{}}: v-cloak和v-text

(9). 只要绑定原始HTML代码片段内容: v-html

(10). 如果元素的内容只在首次加载时绑定一次,之后都不会改变: v-once

         优化: 减少虚拟DOM树中元素个数。

(11). 保护内容中的{{}}不被编译: v-pre

(12). 今后只要想获得表单元素的值或状态: v-model

更多v-model指令详解,待续...👇

​​​

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

开发者涨薪指南 【vue】vue的常用指令及用法总结(续)_03 48位大咖的思考法则、工作方式、逻辑体系驱动天空下载