Vue 指令

矫情吗；* 2023-06-06 08:22 140阅读 0赞

基本指令

（1）v-bind指令
语法格式1：单个语法格式
v-bind:attributeName=variable

  1. 以下是HTML代码：
  2. <div class="app">
  3.             <a
  4.                 v-bind:class="classFn"
  5.                 v-bind:title="titleFn"
  6.                 v-bind:href="hrefFn"
  7.                 v-bind:target="targetFn"
  8.             >    
  9.             {
  10.    {text}}
  11.             </a>
  12.         </div>
  13.         以下是javaScript代码：
  14.         <script type="text/javascript">
  15.         var app = new Vue({
  16.             el:'.app',
  17.             data:{
  18.                 classFn:'aName',
  19.                 titleFn:'百度',
  20.                 hrefFn:'http://www.baidu.com',
  21.                 targetFn:'_blank',
  22.                 text:'百度一下'
  23.             }
  24.         })
  25.     </script>

语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例：在页面中利用Vue实例的变量制作一个超级链接

  1. 以下是HTML代码：
  2. <div class="app">
  3.             <a v-bind="{class:link.class,title:link.title,href:link.href,target:link.target}">    
  4.             {
  5.    {link.info}}
  6.             </a>
  7.         </div> 
  8. 以下是javaScript代码：
  9. <script type="text/javascript">
  10.         var app = new Vue({
  11.             el:'.app',
  12.             data:{
  13.                 link:{
  14.                     class:'aaa',
  15.                     title:'百度',
  16.                     href:'http://www.baidu.com',
  17.                     target:'_blank',
  18.                     info:'百度'
  19.                 }
  20.             }
  21.         })
  22.     </script>

语法格式3：数组语法格式”绑定类名”v-bind:attributeName=“[variable1,variable2,……]”
案例（绑定类名）：

  1. 以下是HTML代码：
  2. <div class="app">
  3.             <a v-bind:class='[class1,class2,class3]' :href="hrefFn">{
  4.    {info}}</a>
  5.         </div>
  6.         以下是javaScript代码：
  7.         <script type="text/javascript">
  8.         var app = new Vue({
  9.             el: '.app',
  10.             data: {
  11.                 info: '百度一下',
  12.                 class1: 'a1',
  13.                 class2: 'a2',
  14.                 class3: 'a3',
  15.                 hrefFn: 'http://www.baodu.com'
  16.             }
  17.         })
  18.     </script>

（2）基本指令v-if和基本指令v-show
v-if指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：

  1. 以下是HTML代码：
  2. <div id="app">
  3.            <p v-if="show">这是段文字</p >
  4. </div>
  5.     以下是javaScript代码：
  6. <script type="text/javascript">
  7.     var app = new Vue({
  8.            el:'#app',
  9.            data:{
  10.             show:false   // 为false直接销毁这段文字
  11.             // show:true    为true时渲染DOM，否则不进行渲染
  12.             // 当数据show为true时，p元素会被插入，为false时则会被移除。
  13.            }
  14.           }) 
  15.  <script type="text/javascript">

数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。

v-show也是指条件性渲染，用法与v-if类似：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

  1. 以下是HTML代码：
  2.  <div id="app">
  3.              <p v-show="show">这是段文字</p >
  4.  </div>
  5.  以下是javaScript代码：
  6. <script type="text/javascript">
  7.  var app = new Vue({
  8.              el:'#app',
  9.              data:{
  10.               show:false  //为false时p标签会切换css属性display为none
  11.               // show:true //为true时p标签会去除css的display属性
  12.              }
  13.             }) 
  14.     </script>

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

（3）基本指令v-on
v-on表达式
语法：v-on:事件类型=”内联语句”
表达式除了方法名，也可以是内联语句：

  1. <button @click="dianji">点击隐藏</button>

建议将事件处理放到methods里声明一个方法，提高可读性与维护性。

v-on修饰符（重点）

①.stop：阻止事件的传递，即阻止事件向上冒泡。
例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>v-on修饰符stop</title>
  6.         <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
  7.         <style type="text/css">
  8.             .app{
  9.                 width: 400px;
  10.                 height: 400px;
  11.                 background: red;
  12.             }
  13.             .app1{
  14.                 width: 200px;
  15.                 height: 200px;
  16.                 background: yellowgreen;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class="demo">
  22.             <div class="app" :title="title1" @click="dianji1">
  23.                 <div class="app1" :title="title2" @click.stop="dianji2">
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </body>
  28.     <script type="text/javascript">
  29.         var demo = new Vue({
  30.             el:'.demo',
  31.             data:{
  32.                 title1:'父',
  33.                 title2:'儿'
  34.             },
  35.             methods:{
  36.                 dianji1:function(){
  37.                     console.log('父亲')
  38.                 },
  39.                 dianji2:function(){
  40.                     console.log('儿子')
  41.                 }
  42.             }
  43.         })
  44.     </script>
  45. </html>

②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。
例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>v-on修饰符prevent</title>
  6.         <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
  7.     </head>
  8.     <body>
  9.         ②.prevent：阻止对象的默认行为。
  10.         .prevent会调用 event.preventDefault() 即取消事件的默认动作。
  11.         <div class="demo">
  12.             <a @click.prevent href="http://www.baidu.com">百度一下</a>
  13.             <a @click.prevent href="javascript:;">百度一下</a>
  14.             <a href="javascript:viod(0)">百度一下</a>
  15.             <button type="button">提交</button> <!-- type="button"阻止提交，如果不写，type默认是submit -->
  16.             <!-- 语法格式：v-on:event事件Type类型Name名字=“functionName” -->
  17.         </div>
  18.     </body>
  19.     <script type="text/javascript">
  20.         /* 1.创建根实例 */
  21.         var demo = new Vue({
  22.             /* 2.挂载根实例到元素上 */
  23.             el: '.demo',
  24.         })
  25.     </script>
  26. </html>

③.capture：使用事件捕获机制
例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>3b.v-on修饰符capture</title>
  6.         <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
  7.         <style type="text/css">
  8.             .app {
  9.                 width: 400px;
  10.                 height: 400px;
  11.                 background: red;
  12.             }
  14.             .app1 {
  15.                 width: 200px;
  16.                 height: 200px;
  17.                 background: yellowgreen;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <!-- capture有次属性时子级父级一起触发 没有时只触发自身 -->
  23.         .capture：使用事件捕获机制
  24.         <div class="demo">
  25.             <div class="app" :title="title1" @click.capture="dianji1">
  26.                 <div class="app1" :title="title2" @click.stop="dianji2">
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </body>
  31.     <script type="text/javascript">
  32.         var demo = new Vue({
  33.             el: '.demo',
  34.             data: {
  35.                 title1: '父',
  36.                 title2: '儿'
  37.             },
  38.             methods: {
  39.                 dianji1: function() {
  40.                     console.log('父亲')
  41.                 },
  42.                 dianji2: function() {
  43.                     console.log('儿子')
  44.                 }
  45.             }
  46.         })
  47.     </script>
  48. </html>

④.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>3b.v-on修饰符self</title>
  6.         <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
  7.         <style type="text/css">
  8.             .app{
  9.                 width: 400px;
  10.                 height: 400px;
  11.                 background: red;
  12.             }
  13.             .app1{
  14.                 width: 200px;
  15.                 height: 200px;
  16.                 background: yellowgreen;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         用处：点击遮罩层的时候，关闭遮罩层和里面的图片。注意：点击图片不管用
  22.         .self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
  23.         <div class="demo">
  24.             <div class="app" :title="title1" @click.self="dianji1">
  25.                 <div class="app1" :title="title2">
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </body>
  30.     <script type="text/javascript">
  31.             var demo = new Vue({
  32.                 el:'.demo',
  33.                 data:{
  34.                     title1:'父',
  35.                     title2:'儿'
  36.                 },
  37.                 methods:{
  38.                     dianji1:function(){
  39.                         console.log('父亲')
  40.                     },
  41.                     dianji2:function(){
  42.                         console.log('儿子')
  43.                     }
  44.                 }
  45.             })
  46.     </script>
  47. </html>

⑤v-on修饰符
.once：绑定的事件只能触发一次。
在这里插入图片描述

⑥keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）
例 图1如下：
在这里插入图片描述
例 图2如下：
在这里插入图片描述
例 图3如下：
在这里插入图片描述

v-on修饰符小结
（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
**（6）**keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）
在这里插入图片描述

拓展：动态参数

2.6版本新增：
从 2.6.0 开始，可以用方括号括起来的 JS表达式作为一个指令的参数，如下所示动态绑定title属性， 实例有一个 data 属性 attributeName，其值为 “title”，那么这个绑定将等价于 v-bind:title：
动态参数例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>动态参数</title>
  6.         <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
  7.         <style type="text/css">
  8.             #demo {
  9.                 width: 500px;
  10.                 height: 500px;
  11.                 background: teal;
  12.             }
  14.             #demo>div {
  15.                 width: 200px;
  16.                 height: 200px;
  17.                 background: yellow;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div id="demo">
  23.             <div v-bind:[pei]='title'></div>
  24.         </div>
  25.     </body>
  26.     <script type="text/javascript">
  27.         var demo = new Vue({
  28.             el: '#demo',
  29.             data: {
  30.                 pei: 'title',
  31.                 title: '你好'
  32.             }
  33.         })
  34.     </script>
  35. </html>

methods选项-代理方法
代理方法调用：
Vue.js将methods里的方法也代理了， 所以可以像访问Vue数据一样来调用方法。
在hide方法里，直接通过this.hide_p()调用了hide_p()函数。这样只是一种写法，具体应用场景后续结合生命周期讲解。
在这里插入图片描述
在这里插入图片描述

Vue 指令的小知识，有问题留言小编。

谢谢，嘿嘿！！！

发表评论

表情：
评论列表 （有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue指令

    一、Vue指令的规定 1. 所有的Vue指令必须以v-开头，后面带命令动词。 2. 指令的参数：v-指令动词.参数 3. 指令的修饰符：v-指令动词:修饰符 二

    阳光穿透心脏的1/2处阳光穿透心脏的1/2处/ 0 赞/ 146 阅读

    相关 Vue指令

    v-text v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

    男娘i男娘i/ 0 赞/ 137 阅读

    相关 vue指令

    总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染

    电玩女神电玩女神/ 0 赞/ 140 阅读

    相关 vue指令

    vue指令 一个正在努力爱好运动的前端 座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

    朱雀朱雀/ 0 赞/ 252 阅读

    相关 Vue指令

    Vue指令 1. watch监听 在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 665 阅读