1.1 vue指令
- 什么是 Vue 指令呢？
指令就是带有 v- 前缀的特殊标签属性，不同属性对应不同的功能
学习不同指令 → 解决不同业务场景需求
1.2 如果需要动态解析标签，可以用哪个指令？语法？
v-html:
作用：设置元素的 innerHTML
语法：v-html = "表达式 "
<body>
<div id="app">
<p >{{str}}</p>
<p v-html="str">这里的内容会被覆盖</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data: {
str:'xxxx<strong>xxxxx</strong>xxxxxxxxxx'
}
})
</script>
</body>
1.3 条件渲染指令
- v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
- v-if
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
- 原理： 基于条件判断，是否创建 或 移除元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
1.4 条件渲染指令 v-else v-else-if
- 作用：辅助v-if进行判断渲染
- 语法：v-else v-else-if="表达式"
- 需要紧接着v-if使用
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<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/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
1.5 Vue 指令 v-on
- 作用： 注册事件 = 添加监听 + 提供处理逻辑
- 语法：
① v-on:事件名 = "内联语句"
② v-on:事件名 = "methods中的函数名" - 简写：@事件名
1.5.1 内联语句
<div id="app">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
</script>
1.5.2 methods中的函数名
注意：methods函数内的 this 指向 Vue 实例
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">xxxxxxxxx</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn () {
// 让提供的所有methods中的函数，this都指向当前实例app
// this永远表示Vue实例对象
this.isShow = !this.isShow
}
}
})
</script>
给事件处理函数传参：
如果不传递任何参数，则方法无需加小括号；
<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/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy (price) {
this.money -= price
}
}
})
</script>
1.6 指令-事件对象
<body>
<div id="app">
<h2>需求：输入框输入内容，将内容显示在p标签中</h2>
<!-- ① 如果在模板中（div页面中）使用事件対象，可以使用$event（固定写法） -->
<!-- <input type="text" @input="result = $event.target.value"> -->
<!-- <input type="text" @input="fn"> -->
<!-- ③ 如果JS中，既用e，又有其他参数。原则一个实参对应形参 -->
<input type="text" @input="fn($event, 100, 200)">
<p>{{ result }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data: {
result:''
},
methods: {
// <!-- ② 如果在JS中使用事件对象，还是事件处理函数的形参 e -->
fn(e,a,b) {
this.result = e.target.value
}
}
})
</script>
</body>