02-VUE
- 一. Vue中常用的指令
- 1. Vue指令概述
- 2 Vue中指令的分类
- 3 Vue中指令
- 3.1 内容渲染指令
- 3.2 条件渲染指令
- 3.2.1 v-show
- 3.2.2 v-if
- 3.2.3 v-else 和 v-else-if
- 3.3 事件绑定指令 v-on--重要
- 3.3.1 内联语句
- 3.3.2 methods中的函数名
一. Vue中常用的指令
1. Vue指令概述
概念: 指令(Derictives)是Vue提供带有
v-前缀的特殊标签属性
作用: 简化DOM操作, 提升开发效率
<div id="app"><!-- Vue指令: v- 前缀的标签属性v-html:作用:设置元素的innerHTML语法:v-html="表达式"--><div v-html="msg"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>new Vue({el: '#app',data: {msg: '<h1>Hello Vue</h1>',},});</script>
2 Vue中指令的分类
- 内容渲染指令 (v-html,v-text)
- 条件渲染指令 (v-show, v-if, v-else, v-if-else-if)
- 事件绑定指令 (v-on)
- 属性绑定指令 (v-bind)
- 双向绑定指令 (v-model)
- 列表渲染指令 (v-for)
3 Vue中指令
3.1 内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容,常用的内容渲染指令有两个
v-html,v-text
v-text: 类似于innerText
v-html: 类似于 innerHTML
<div id="app"><h2>个人信息</h2><!-- v-text: 将uname渲染到p标签中,会覆盖p标签中原有的内容 --><p v-text="uname">姓名:</p><!-- v-html将intro中的内容渲染到p标签中, 会覆盖p标签中原有的内容能够将html标签样式呈现出来--><p v-html="intro">简介</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>new Vue({el: '#app',data: {uname: '张三',intro: '<h2>这是一个<strong>非常优秀</strong>的boy</h2>',},});</script>
3.2 条件渲染指令
概述: 用来辅助开发者按照需要控制DOM元素的显示和隐藏
3.2.1 v-show
作用: 控制元素的显示和隐藏
语法: v-show=“表达式” ; 表达式值为true 显示, false 隐藏
原理: 切换 display:none 控制显示隐藏
场景: 频繁切换显示隐藏的场景
3.2.2 v-if
作用: 控制元素的显示隐藏(条件渲染)
语法: v-if=“表达式” ;表达式值为true 显示, false 隐藏
原理: 基于条件判断, 是否创建节点 或者 移除节点
场景: 要么显示,要么隐藏不频繁切换的场景
3.2.3 v-else 和 v-else-if
作用: 辅助v-if进行渲染
语法: v-else v-else-if=“表达式”
注意: 需要紧接着v-if使用
<div id="app"><!-- v-show: 切换css的display:none;控制元素的显示和隐藏 --><div class="box1" v-show="flag">我是v-show控制的盒子</div><!-- v-if: 根据判断条件,控制元素节点的创建和移除(条件渲染) --><div class="box2" v-if="flag">我是v-if控制的盒子</div><hr /><!-- v-else : 只显示其一--><p v-if="gender==1">性别:♂ 男</p><p v-else>性别:♀ 女</p><hr /><!-- v-else-if --><h3>成绩判断:{{score}}</h3><p v-if="score>=90">成绩评定为A:奖励电脑一台</p><p v-else-if="score>=70">成绩评定为B:奖励周末郊游</p><p v-else-if="score>=60">成绩评定为C:奖励零食大礼包</p><p v-else>成绩评定为D:惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>new Vue({el: '#app',data: {flag: true,gender: 2, //存储用户性别 1--男 2--女score: 55,},});</script>
3.3 事件绑定指令 v-on–重要
- 作用: 注册事件 = 添加监听 + 提供处理函数
- 语法:
- v-on:事件名=“内联语句”
- v-on:事件名=“methods中的函数名”
- 简写: @事件名
3.3.1 内联语句
<div id="app"><!-- 内联语句绑定事件:事件绑定的简写: @事件名="事件处理函数" 事件列表: https://blog.csdn.net/mzdxxcdh/article/details/135270672--><button @click="count--">-</button><span>{{count}}</span><button v-on:mouseover="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {count: 1,},});</script>
3.3.2 methods中的函数名
注意:
事件处理函数应该写到跟data同级的配置项中(methods)- methods中的函数内部的this都指向Vue实例
<div id="app"><!--注意:事件处理函数应该写到跟data同级的配置项中(methods)methods中的函数内部的this都指向Vue实例--><button @click="fn()">购物车</button><div class="box" v-show="isShow"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>let app1 = new Vue({el: '#app',data: {isShow: true,},// 事件处理函数:提供vue所有的方法methods: {fn() {// 直接获取data中的数据是获取不到的// 需要指定当前对象console.log('执行了fn', app.isShow); // undefined// this: 让提供的所有methods中的函数, this都指向当前实例console.log(app1 === this); //truethis.isShow = !this.isShow;},},});</script>
给事件处理函数传参–重要
- 如果不传递任何参数, 则方法无需加小括号; methods方法中可以直接使用e作为事件对象
- 如果传递了参数, 实参 $event 表示事件对象, 固定用法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件传参</title></head><body><div id="app"><div class="box"><h3>小美自动售货机</h3><!-- 调用函数时,通过()传递参数 --><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额:{{money}} 元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {money: 1000,},methods: {// 接收参数buy(price) {this.money -= price;},},});</script></body>
</html>
