二. Vue指令

前端开发 作者: 2024-08-26 09:25:01
1. Vue指令理解 Vue指令指的是以 v- 开头的一组特殊语法 2. 内容绑定 2.1 v-text指令 与 {{}} 插值表达式 注:{{}} 插值表达式也被称作 Mustache语法 作用 设

1. Vue指令理解

2. 内容绑定

2.1 v-text指令 与 {{}} 插值表达式
<div id="app">
    <h2 v-text="message"></h2>
    <!-- 另一种写法:插值表达式 -->
    <h2>瞅啥!{{message}}</h2> 
    <!-- 支持写表达式如字符串的拼接 -->
    <h2 v-text="message + '_' + person.name"></h2>
    <h2>瞅啥!{{message + "GG" + person.name}}</h2> 
</div>
2.2 v-html指令
<div id="app">
    <p v-html="message"></p>
    <p v-html="content"></p>
</div>
<script>
    var app = new Vue({
        el: '#app',data: {
            message: 'Hello Vue!',content:"<a href='#'>Hello Vue!</a>",},})
</script>
2.3 v-once指令
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',data: {
            message: '你好啊'
        }
    })
</script>
2.4 v-pre指令
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',data: {
            message: '你好啊'
        }
    })
</script>
2.5 v-cloak指令
<!--  当有v-cloak属性时就执行该样式 --> 
<style>
    [v-cloak] {
        display:none;
    }
</style>
<div id="app" v-cloak>
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script>
    //在vue解析之前,div中有一个属性v-cloak
    //在vue解析之后,div中的该v-cloak属性会被删除
    const app = new Vue({
        el: '#app',data: {
            message: '你好啊'
        }
    })
</script>

3. 事件绑定

3.1 v-on指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            var app = new Vue({
                el: '#app',data: {
                    food:"西红柿操蛋"
                },methods:{
                    doIt:function(){
                        alert("我被点击了!!");
                    },//changeFood:function(){
                    //        this.food += "还行吧!";
                    //}
                    //注意:函数也可以写简化形式
                    changeFood(){
                        this.food += "还行吧!";
                    }
                }      
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <!-- <button v-on:click="doIt">点击事件</button> -->
        <button @click="doIt">点击事件</button>
        <button @dblclick="doIt">双击事件</button>
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
</body>
</html>
3.2 事件参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,data: {
                    
                },methods:{
                    //添加自定义参数
                    doIt:function(p1,p2){
                        alert(p2 + "双击" + p1);
                    },sayHi:function(){
                        alert("Hello!")
                    }
                }      
            })
        }
    </script>   
</head>
<body>
    <div id="app" >
        <button @click="doIt(666,'老铁')">点击</button>
        <!-- 事件修饰符:如点击enter键才触发-->
        <input type="text" @keyup.enter="sayHi">
    </div>
</body>
</html>
3.3 事件修饰符
  • .stop 阻止事件冒泡
<div id="app" >
   <div class="box" @click="divClick">
       <!-- 阻止事件冒泡-->
       <input type="button" value="按钮" @click.stop="btnClick">
   </div>
</div>
  • .prevent 阻止标签的默认行为
<div id="app" >
    <!-- 阻止事件的默认行为,如此例点击后不会跳转到百度-->
    <a href="http://www.baidu.com" @click.prevent="aClick">百度</a>
     <!-- 注意:事件修饰符是可以连点的-->
     <a href="http://www.baidu.com" @click.prevent.stop="aClick">百度</a>
</div>
  • .capture
  • .self 针对于当前标签的事件触发,即只触发自己标签上特定动作的事件
<div id="app" >
    <!-- self:只触发自己标签上特定动作的事件,如此例忽略子元素的事件冒泡-->
    <div @click.self="divClick">
        <input type="button" value="按钮" @click="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
        <input type="button" value="按钮2" @click="btnClick2">
    </div>
</div>
  • .once 让指定的事件只触发一次
  • .passive
3.4 按键修饰符
3.5 案例:计数器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,data: {
                    num:1
                },methods:{
                    //递增
                    add:function(){
                        if(this.num >= 10) {
                            alert("数量不能大于10");
                        } else{
                            this.num++;
                        }
                    },//递减
                    sub:function(){
                        if(this.num <= 0) {
                            alert("数量不能小于0");
                        } else {
                            this.num--;
                        }
                    }
                }      
            })
        }
    </script>
</head>
<body>
    <div id="app" >
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
</body>
</html>

4. 显示切换

4.1 v-show指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,data: {
                    isShow:false
                },methods:{
                   changeIsShow:function(){
                       this.isShow = !this.isShow;
                   }
                }      
            })
        }
    </script>
</head>
<body>
    <div id="app" >
        <button  @click="changeIsShow">切换</button>
        <img src="image/草莓.png" v-show="isShow">
    </div>
</body>
</html>
4.2 v-if指令
<div id="app" >
   <button  @click="changeIsShow">切换</button>
   <img src="image/草莓.png" v-if="isShow">
</div>
4.3 v-else-if,v-else 指令
<div id="app">
    <h2 v-if="score >= 90">优秀</h2>
    <h2 v-else-if="score >= 60">良好</h2>
    <h2 v-else>不及格</h2>
</div>

<script>
    const app = new Vue({
        el: '#app',data: {
            score:40
        }
    })  
</script>
4.4 案例 - 点击切换
<div id="app">
    <span v-if="isUser">
        用户账号: <input type="text" placeholder="用户账号">
    </span>
    <span v-else>
        用户邮箱: <input type="text" placeholder="用户密码">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
</div>

<script>
    const app = new Vue({
        el: '#app',data: {
            isUser: true
        }
    })  
</script>

5. 属性绑定

5.1 v-bind指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,data: {
                    imgSrc:"image/冷饮.jpg",imgTitle:"冷饮",isActive:false
                },methods:{
                   toggleActive:function(){
                       this.isActive = !this.isActive;
                   }
                }      
            })
        }
    </script>
    <style>
        .active{
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div id="app" >
        <!-- <img v-bind:src="imgSrc"> -->
        <img :src="imgSrc" :title="imgTitle + '!'" 
            :class="isActive?'active':''" @click="toggleActive">
            
        <!-- :class中使用对象的形式:active这个类名是否生效取决于isActive的值-->
        <img :src="imgSrc" :title="imgTitle + '!'" 
            :class="{active:isActive}" @click="toggleActive">
            
         <!-- 和普通的类选择器同时存在并不冲突。
             可以传入多个值,可以同时生效 -->
        <img class="gg" :class="{active:isActive,line:isLine}" 
            @click="toggleActive">  
            
        <!-- 可以放数组的形式 -->
        <img :class="['active','line']"> 
        <img :class="[active,line]"> 
       
        <!-- 如果过于复杂,可以放在一个methods或computed中 -->
        <img :class="classes">
        
        <!-- 注意:50px必须加单引号,否则会被当成对象,之后解析后会去掉的
                   font-size和fontSize都可以被识别 -->
        <h2 :style="{fontSize: '50px'}">{{message}}</h2>
    </div>
</body>
</html>
5.2 案例:图片切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,data: {
                    imgArr:["image/bar1.jpg","image/bar2.jpg","image/bar3.jpg","image/bar4.jpg"],index:0
                },methods:{
                    prev:function(){
                        this.index--;
                    },next:function(){
                        this.index++;
                    }
                }      
            })
        }
    </script>
    <style>
        .bar{
            margin-top: 80px;
            margin-left: 150px;
            position: relative;
            width: 1200px;
            height: 600px;
            border:4px solid gray;
        }
        a{
            cursor: pointer;
            position:absolute;  
            top:270px;
            display: block;
            width:65px;
            height: 40px;
            line-height: 30px;
            border: 1px solid white;
            text-align: center;
            font-size: 30px;
            
        }
        .leftA{left: 0px;}
        .rightA{right: 0px;}
        img{
            width: 1200px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="app" >
        <div class="bar">
            <a class="leftA" @click="prev" v-show="index!=0">
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68895.html
二. Vue指令