一、Vue指令
Vue指令就是带有 v-前缀 的特殊 属性，不同属性 对应 不同的功能
学习不同指令 -> 解决不同业务场景需求
vue指令包括以下：
v-html、v-if(else-if、else)、v-show、v-on(@)、v-bind(:)、v-for、v-model
- 下面我们通过代码学习每个指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
v-html指令
作用：设置元素的innerHTML属性(将变量解析为dom标签)
语法：v-html=" 表达式 " 注意，是表达式
-->
<div v-html="msg1"></div>
<div v-html="msg2"></div>
<!--
v-show = "值" 和 v-if
用 boolean 值控制
v-show：
切换 css 的 diplay：none 控制dom元素是否显示
适合频繁切换的场景
v-if：
根据 判断条件 控制元素的 创建 和移除（条件渲染）
适合不频繁切换的场景
-->
<p v-if="ifShow"> v-if={{ifShow}} </p>
<p v-show="showIf"> i-show={{showIf}} </p>
<!--
v-else & v-else-if
1、作用：辅助 v-if 进行判断渲染
2、语法：v-else v-else-if = " 表达式 "
3、注意：都需要紧挨着 v-if 一起使用
-->
<p v-if="score >=90 ">优秀</p>
<p v-else-if="score >= 60 ">良好</p>
<p v-else>丢人</p>
</p>
<!--
v-on
1、作用：注册事件 = 添加监听 + 提供处理逻辑
2、语法：
- v-on:事件名 = "内联语句 "
适用于逻辑简单
例如：<button v-on:click='count++'></button>
- v-on:事件名 = "methods中的函数名"
适用于逻辑复杂
-->
<!-- 点击事件：click -->
<button v-on:click="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count++">+</button>
<!--
v-on简写：v-on 换成 @
后面跟方法名是 methods 里的方法
-->
<button @click="fun1">方法调用</button>
<!-- v-on调用传参 -->
<div>
<h3>Elias自动售货机</h3>
<button @click="buy(3)">可口可乐3元</button>
<button @click="buy(5)">咖啡5元</button>
</div>
<p>银行卡余额：{{balance}} 元</p>
<!--
v-bind
1、作用：动态设置html的标签属性 -> src url title
2、语法：v-bind:属性名 = "表达式"
3、简写：:属性名 = "表达式"
-->
<img v-bind:src="img1" v-bind:title="title" width="400px" height="100px">
<br>
<button v-if="index>0" @click="index--">上一张</button>
<img :src="list[index]" :title="title" width="400px" height="100px">
<button v-if="index<1" @click="index++">下一张</button></button>
<!-- v-for指令
1、作用：基于数据循环、多次渲染整个元素 -> 数组 对象 数字
2、遍历数组语法：v-for ="(item,index) in 数组"
index也可以省略：v-for = item in 数组
item：每一项，index：下标
3、v-for中的key
语法：key属性 = "唯一标识"
作用：给列表项添加 唯一标识。便于vue进行列表项的排序复用
-->
<h3>Elias水果店</h3>
<ul>
<li v-for="(item,index) in fruit" :key="item.id">
{{index}} - {{item}}</li>
</ul>
<!--
v-model：
1、作用：给 表单元素 使用，双向数据 绑定 -> 可以快速 获取 或 设置 表单元素内容
数据变化 -> 视图自动更新
视图变化 -> 数据自动更新
2、语法：v-model = "变量"
-->
<input type="text" v-bind="username" name="username"></input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg1: `<a href="http://www.elias.love">
aa
</a>`,
msg2: `<p>
123
</p>`,
ifShow: false,
showIf: true,
score: 10,
count:10,
balance:100,
img1:'img/1.png',
title:'abc',
index:0,
list:[
'img/1.png',
'img/2.png'
],
fruit:[
'西瓜',
'banana',
'pear',
'apple'
]
},
methods:{
fun1(){
//在methods里的方法中的this，都指向当前Vue实例
//在方法里要拿到data里的数据，用this.属性 即可
this.count--
},
buy(cost){
this.balance=this.balance-cost
}
}
})
</script>
</body>
</html>
