vue的常用指令和事件修饰符

最新推荐文章于 2024-09-16 19:05:20 发布

一只大海

最新推荐文章于 2024-09-16 19:05:20 发布

阅读量829

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44392418/article/details/88983594

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue.js中常用的指令，包括数据绑定、条件渲染、列表渲染、事件处理等内容，并解释了每个指令的具体用法及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、常用指令
1.v-text
解释：更新元素的 textContent

<div id="app">
    <h2 v-text="text"></h2>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{text:"<span>html标签</span>"}
    })
</script>

2.v-html
解释：更新元素的 innerHTML

<div id="app">
    <h2 v-html="text"></h2>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{text:"<span>html标签</span>"}
    })
</script>

3.v-cloak
解释：
①这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
②防止刷新页面，网速慢的情况下出现{{ message }}等数据格式

<div id="app">
    <h1 v-cloak>{{text}}</h1>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{text:"<span>html标签</span>"}
    })

4.v-if 和 v-show
条件渲染

v-if：根据表达式的值的真假条件，销毁或重建元素

v-show：根据表达式之真假值，切换元素的 display CSS 属性

<div id="app">
    <h1 v-show="false">v-show的显示和隐藏</h1>
    <h1 v-if="isIf">v-if的显示和隐藏</h1>
</div>


<script>
    let vm = new Vue({
        el:"#app",
        data:{
            isIf:true,
            msg:"请输入用户名"
        }
    })

</script>

v-model双向绑定数据

<input type="text" v-model="msg"/>   {{msg}} <!--取数据-->

6.v-for循环

v-for语法 : item in arr
参数： arr: 要遍历的数组
	  item : 数组里的每一个元素
      in: 特殊的语法

<div id="app">
    <ul>
        <li v-for="(item,i) in arr">
            <span>{{i+1}}</span>
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
            <span>{{item.sex}}</span>
        </li>
    </ul>
</div>


<script>
    let vm = new Vue({
        el:'#app',
        data:{
            arr:[
                {name:'xiaoming', age :18, sex: "男"},
                {name:'xiaoming', age :18, sex: "男"},
                {name:'xiaoming', age :18, sex: "男"}
            ]
        }
    })
</script>

7.v-bind绑定属性

<div id="app">
    <!--绑定属性-->
    <img v-bind:src="imgSrc" alt="">
    <!--简写-->
    <img :src="imgSrc" alt="">

    <!--class绑定 : 绑定的是字符串的类名-->
    <h2 :class="'red'">class绑定</h2>
    <h2 :class="['red', 'pink']">class绑定</h2>
    <h2 :class="red">不写引号class绑定,去vm实例中找</h2>

    <h2 :class="{red : flag, pink:true}">以对象的方式去写,通过布尔值判定,key是style里面的类名</h2>

    <!--三元表达式: 当flag为true,就有red样式, 否则有pink样式-->
    <h2 :class="[flag?red:pink]">三元表达式</h2>

</div>


<script>
    let vm = new Vue({
        el:'#app',
        data:{
            imgSrc:'1.png',
            red:'red',
            flag:true
        }
    })
</script>

8.v-on添加事件

<div id="app">
    <button v-on:click="num++">点击+1</button>
    <h1>{{num}}</h1>

    <!--简写  小括号没有参数, 可以省略-->
    <button @click="fn('hello')">点我弹框</button>
    <h1>{{fn()}}</h1>

    <!--点击切换颜色-->
    <button @click="change" :class="{red: flag}">点击切换颜色</button>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            num:0,
            flag: true
        },
        //在methods定义方法
        methods:{
            fn:function (sayHi) {
                //console.log(sayHi)
                return 11;
            },
            change: function () {
                 //此时的this是实例对象
                 console.log(this.flag)
                this.flag = !this.flag;
            }
        }
    })
</script>

9.v-class 类名
v-style 与v-class用法大致一样这个我就不写了

  <style>
          .red {
 
              background: red;
          }

          .blue {
              width: 100px;
              height: 100px;
             background: blue;
         }
 
     </style>
 
 
 <div id="box">
     <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
     <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
     <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
 
 </div>
 
 <script>
     new Vue({
        el: "#box",
         data(){
             return {
                 isred:false
             }
         }
     })
 </script>

10.v-pre 把标签内部的元素原位输出

<div id="box">
    <div v-pre>欢迎--{{msg}}</div>
</div>
 
 
 
<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

二、事件修饰符
7. .stop 阻止自身的冒泡事件

<div id="app">
    <!--   .stop     阻止自身的冒泡事件-->
	    <div @click="divClick">
	        <button @click.stop="btnClick">点击</button>
	    </div>
  </div>


<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            divClick :function () {console.log("触发了div的点击事件")},
            btnClick :function () {console.log("触发了btn的点击事件")}      
        }
    })
</script>

.prevent 阻止默认事件

<div id="app">
  <!--.prevent    阻止默认事件-->
    <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            linkClick :function () {console.log("触发了a的点击事件")}
        }
    })
</script>

.capture 添加事件侦听器时使用事件捕获模式 : 用捕获的模式来触发

<div id="app">
  <!--.capture    添加事件侦听器时使用事件捕获模式 : 用捕获的模式来触发-->
    <div @click.capture="divClick">
        <button @click="btnClick">点击
            <span @click="linkClick">里面的事件</span>
        </button>
    </div>
 </div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            divClick :function () {console.log("触发了div的点击事件")},
            btnClick :function () {console.log("触发了btn的点击事件")},
            linkClick :function () {console.log("触发了a的点击事件")}
        }
    })
</script>

.self : 阻止自己身上的冒泡行为

<div id="app">
  <!--.self : 阻止自己身上的冒泡行为-->
    <div @click.self="divClick">
        <button @click="btnClick">点击
            <span @click="linkClick">里面的事件</span>
        </button>
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            divClick :function () {console.log("触发了div的点击事件")},
            btnClick :function () {console.log("触发了btn的点击事件")},
            linkClick :function () {console.log("触发了a的点击事件")}
        }
    })
</script>

.once 事件只触发一次

<div id="app">
<!--.once       事件只触发一次-->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{      
            linkClick :function () {console.log("触发了a的点击事件")}
        }
    })
</script>