【vue】vue的常用指令及用法总结（续）_03

儒雅的烤地瓜

已于 2022-06-07 11:02:56 修改

阅读量442

点赞数 2

分类专栏： # ⭐ Vue.js入门基础文章标签： vue.js javascript vue指令前端框架前端

于 2022-06-05 09:45:19 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/124957470

版权

⭐ Vue.js入门基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

【前文回顾】👉 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. 标准: <元素 v-on:事件名="处理函数名(实参值列表)">

b. 简写: <元素 @事件名="处理函数名(实参值列表)">

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

<元素 @事件名="处理函数名">

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

new Vue({
el:"#app",

data:{ ... },

methods:{

处理函数(形参列表){

... this.变量名 ...

}

}
})

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

1_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:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点哪个div，哪个div就可以喊自己疼！-->
    <div id="d1" @click="say('d1')">d1</div>
    <div id="d2" @click="say('d2')">d2</div>
    <!--补：vue中凡是有绑定语法的地方，引号里面必须是一个合法的js语句，
    什么意思呢，就是引号里面的内容复制出来，粘贴到控制台(f12)当中能够运行,
    这里我们传的d1，d2是一个字符串、一个名字，不是变量，所以要加引号，又因为外面是双引号，
    里面如果再用双引号，不知道谁跟谁配对，所以为了避免歧义，外双内单或是外单内双。
    另，只有模板字符串里什么都可以用
    -->
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因为界面上需要一个事件处理函数
        say(dname){
          console.log(`${dname} - 疼！`)
        }
      }
    })
  </script>
</body>
</html>

运行结果：

(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

<!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:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点在div的哪个位置，就喊哪个位置疼！-->
    <div id="d1" @click="say">d1</div>
    <div id="d2" @click="say">d2</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因为界面上需要一个事件处理函数
        say(e){
          console.log(`x:${e.offsetX},y:${e.offsetY} - 疼！`)
        }
      }
    })
  </script>
</body>
</html>

运行结果：

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

<!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:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点在div的哪个位置，就喊哪个位置疼！-->
    <div id="d1" @click="say($event, '亮哥')">亮哥</div>
    <div id="d2" @click="say($event, '然哥')">然哥</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因为界面上需要一个事件处理函数
        say(e,dname){
          console.log(`${dname}的x:${e.offsetX},y:${e.offsetY}位置 - 疼！`)
        }
      }
    })
  </script>
</body>
</html>

运行结果：

7. v-html

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

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

(3). 如何: <元素 v-html="变量或js表达式"> </元素>

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

2_v-html.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>
  <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:`来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a>的消息`
      }
    })
  </script>
</body>
</html>

运行结果：

来自<a href="javascript:;"><<新华社>></a>的消息

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

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. <元素 v-cloak>

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). 如何: <元素 v-text="变量或表达式"> </元素>

🕵️ 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

<!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]{ 
      display:none 
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 v-cloak>用户名:{{uname}}</h3>
            <!--js程序的底盘    -->
    <h3 v-text="`积分:${score}`"></h3>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:3000
        }
      })
    },3000)
  </script>
</body>
</html>

运行结果：

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

9. v-once:

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

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

(3). 如何: <元素 v-once>

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

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

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

4_v-once.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>
  <div id="app">
    <h3 v-once>上线时间: {{time}}</h3>
    <h3>当前系统时间: {{time}}</h3>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        time:new Date().toLocaleString()
      }
    });
    //每隔1秒，重新获得系统时间，显示在网页上
    setInterval(function(){
      vm.time=new Date().toLocaleString();
    },1000)
  </script>
</body>
</html>

运行结果：

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

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

10. v-pre

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

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

(3). 如何: <元素 v-pre>

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

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

5_v-pre.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>
  <div id="app">
    <h3 v-pre>Vue中都是用{{变量名}}语法来标记页面中可能发生变化的位置</h3>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

运行结果：

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事件

所以上述代码等价于

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    /*简写: <input type="text" :value="message" @input="message=$event.target.value" placeholder="请输入"> */   
    <input type="text" v-bind:value="message" v-on:input="message = $event.target.value" placeholder="请输入">
    <p>输入的内容是:{{ message }}</p>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       message: ''
     }
   })
 </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" :value="message" @input="handleInput" placeholder="请输入">
    <p>输入的内容是:{{ message }}</p>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       message: ''
     },
     methods: {
    //对象方法简写
      // handleInput(e){
      //   this.messsge = e.target.value;
      // }
      handleInput: function (e) {
         this.messsge = e.target.value;
       }
     }
   })
 </script>
</body>
</html>

💥 扩展：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. 整个界面必须包含在一个唯一的父元素下:

通常是<div id="app">
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双向数据绑定的原理解析及代码实现_04

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

儒雅的烤地瓜

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【vue】vue的常用指令及用法总结（续）_03

Vue中的指令本质上是一些特定的功能代码，Vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等
复制链接

扫一扫