目录
（一）初识指令和内容渲染指令v-html
1.v-html
案例：
官网的API文档
（二）条件渲染指令v-show和v-if
1. v-show
2. v-if
（三）条件渲染指令v-else和v-else-if
案例
（四）事件绑定指令 v-on
1.内联语句
简写
2.事件处理函数
3.给事件处理函数传参
（五）属性绑定指令v-bind
（六）列表渲染指令v-for
1.v-for中的key
区别：加key-不加key
（七）双向绑定指令v-model
（一）初识指令和内容渲染指令v-html
Vue 会根据不同的 【指令】 ，针对标签实现不同的 【功能】指令：带有 v- 前缀 的 特殊 标签属性
1.v-html
作用：设置元素的 innerHTML语法：v-html = " 表达式 "
案例：
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="https://www.baidu.com">
baidu
</a>
`
}
})
</script>
</body>
官网的API文档
（二）条件渲染指令v-show和v-if
1. v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景： 频繁切换显示隐藏的场景
2. v-if
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
- 原理： 基于条件判断，是否 创建 或 移除 元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
示例代码：
<html>
<head>
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
</style>
</head>
<body>
<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.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag:true,
}
})
</script>
</body>
</html>
演示截图：
当flag为true时：
当flag为false时：
1.v-show的底层原理：
切换css的diaplay: none来控制显示还是隐藏
2.v-if的底层原理：
根据判断条件来控制元素的创建和移除（当结果为true时当前元素就创建出来，为false时元素就销毁）
（三）条件渲染指令v-else和v-else-if
1. 作用： 辅助 v-if 进行判断 渲染2. 语法： v-else v-else-if = "表达式"3. 注意： 需要紧挨着 v-if 一起使用
案例
示例代码：
<html>
<head>
<title>
案例
</title>
</head>
<body>
<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.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender:1,
score:80
}
})
</script>
</body>
</html>
演示截图：
（四）事件绑定指令 v-on
作用：注册时间=添加时间+提供处理逻辑
语法：
<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>
v-on:简写为 @
1.内联语句
<body> <div id="app"> <button v-on:click="count--">-</button> <span>{{count}}</span> <button v-on:click="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data: { count:111 } }) </script> </body>页面实现：
事件名也不是非要写click，可以换成别的，比如mouseenter：
<body> <div id="app"> <button v-on:mouseenter="count--">-</button> <span>{{count}}</span> <button v-on:mouseenter="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data: { count:111 } }) </script> </body>将鼠标移到“-”和“+”按钮，不用点击，就可实现加减
简写
将v-on:这一整块换成@，也就是换成@click，同样可以实现
2.事件处理函数
内联语句只适用逻辑简单的语句，当逻辑代码多了的时候，就需要更换了
语法：
v-on:事件名 = "methods中的函数名"
注意：
事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例
案例：
在页面设置一个按钮，能够多次切换隐藏文字
<body> <div id="app"> <button @click="fun()">切换显示隐藏</button> <h2 v-show="isShow">嘿嘿嘿</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data: { isShow:true }, methods:{ fun(){ app.isShow = !app.isShow } } }) </script> </body>运行结果：
把app换成this也是可以的，这样的可读性更高
3.给事件处理函数传参
如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参
$event表示事件对象，固定用法。语法格式：
@click="fn(参数1,参数2)"
案例：
设置一个box，提供几个按钮，模拟买果汁，设置不同的饮料不同的价格，将每个饮料的价格参数传到事件处理函数中，更改剩余的钱的余额
<head> <title> v-on指令案例 </title> <style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> </head> <body> <div id="app"> <div class="box"> <h2>小蔡自动售货机</h2> <button @click="buy(2)">可口可乐3元</button> <button @click="buy(4)">橙汁4元</button> <button @click="buy(5)">咖啡5元</button> </div> <p>银行卡余额：{{money}}元</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data: { money:100000 }, methods:{ buy(price){ this.money-=price } } }) </script> </body>
运行效果;
（五）属性绑定指令v-bind
作用：动态设置html的标签属性 比如：src、url、title
语法：v-bind:属性名=“表达式”
v-bind:可以简写成 => :
案例：
动态绑定图片和一段文字
<div id="app"> <img v-bind:src="url" v-bind:title="msg" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ url:'./img/1.png', msg:'金木' } }) </script>运行结果：
简写
运行结果：
（六）列表渲染指令v-for
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用
(item, index) in arr形式的特殊语法，其中：
item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组
此语法也可以遍历对象和数
- 作用：多次渲染整个元素（数组，数字，对象），基于数据循环
- 遍历数组语法：v-for="(item,index) in 数组"
案例：
遍历一个数组并在页面上输出
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <div id="app"> <div v-for="(item,index) in list"> {{item}} - {{index}} </div> </div> <script> const app=new Vue({ el:'#app', data:{ list:['菠萝','苹果','橘子','榴莲'] } }) </script> </body>运行结果：
在渲染的时候我们只用到了item，那么我们是否可以省略index呢？
可以
运行结果：
1.v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
实例代码：
<ul> <li v-for="(item, index) in booksList" :key="item.id"> <span>{{ item.name }}</span> <span>{{ item.author }}</span> <button @click="del(item.id)">删除</button> </li> </ul>注意：
key 的值只能是字符串 或 数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
区别：加key-不加key
key的作用：给元素添加唯一标识
v-for 的默认行为会尝试 原地修改元素 （ 就地复用 ）当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。
（七）双向绑定指令v-model
所谓双向绑定就是：
数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变
可以快速获取或设置表单元素的内容
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"
需求：使用双向绑定实现以下需求
点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容
代码示例：
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <div id="app"> 用户名：<input type="text" v-model="username"> <br><br> 密码：<input type="password" v-model="password"> <br><br> <button @click="login">登录</button> <button @click="reset">重置</button> </div> <script> const app=new Vue({ el:'#app', data:{ username:'', password:'' }, methods:{ login(){ console.log(this.username,this.password) }, reset(){ this.username='', this.password='' } } }) </script> </body>运行结果：
点击重置
点击登录
