Vue 会根据不同的指令，正对标签实现不同的功能
指令：带有v-前缀的特殊标签
例：v-html 动态设置元素HTML
<div v-html="str"></div>v-html
<div id="app">
<div v-html="msg"></div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="http://www.itcast.cn">学it, 来黑马</a>
`
}
})
</script>v-show 和 v-if
v-show
1、作用：控制元素显示隐藏
2、语法：v-show = "表达式" 表达式值true显示，false隐藏
3、原理：切换 display:none 控制显示隐藏
4、场景： 频繁切换显示隐藏的场景
v-if
1、作用：控制元素显示隐藏（条件渲染）
2、语法：v-if = "表达式" 表达式值true显示，false隐藏
3、原理：基于条件判断，是否创建和移除元素节点
4、场景：要么显示，要么隐藏，不频繁切换的场景
例：
<!-- v-show 控制的是css display:none 来显示隐藏-->
<!-- v-if 根据判断条件 控制的是元素 创建和移除（条件渲染）-->
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>v-else 和 v-else-if
1、作用：辅助 v-if 进行判断渲染
2、语法：v-else v-else-if="表达式"
3、注意：需要紧挨着 v-if 一起使用
v-else 和 v-else-if 不能单独使用
例：
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score === 100">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >=80">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 1,
score: 82
}
})
</script>v-on
1、作用：注册时间 = 添加监听 + 提供处理逻辑
2、语法：
v-on:事件名 = "内联语句"
<button v-on:click=”count++“>按钮</button>v-on:事件名 = "methods中的函数名"
<button @click"fn">按钮</button>3、简写：v-on:事件名 = @事件名
例：v-on添加内联语句 加减案例
<div id="app">
<button v-on:click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 1
}
})
</script>例：v-on添加methods函数 显示隐藏切换案例
<div id="app">
<button @click="showfn">切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
showfn() {
// methods中的函数，默认会绑定this到当前实例上
// 所以，在methods中的函数，就可以直接访问data中的数据
app.isShow = !app.isShow
}
}
})
</script>v-on 调用传参
1、作用：注册时间 = 添加监听 + 提供处理逻辑（带参数函数）
2、语法：
<button @click="fn(参数1,参数2)">
按钮
</button>const app = new Vue({
el:#app
methods:{
fn(a,b){
console:log('这是一个fn函数')
}
}
})例：v-on添加函数参数 简易贩卖机
<div id="app">
<div class="box">
<h3 v-if="money > 0 ">欢迎您购买</h3>
<h3 v-if="money <= 0 ">没钱快走开</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 10
},
methods: {
buy(Money) {
this.money -= Money
this.money < 0 ? alert('没钱快走开') : ''
}
}
})
</script>v-bind
1、作用：动态设置html的标签属性 > src url title ...
2、语法：v-bind:属性名="表达式"
3、简写：v-bind:属性名 = ：src
例：渲染图片 给img设置src
<div id="app">
<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" alt="">
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-01.png'
}
})
</script>v-for
1、作用：基于数据循环，多次渲染整个元素
2、语法：v-for="(item,index) in 数组"
- item 每一项 index 下标
例：循环list中的每个水果 建议水果店
<div id="app">
<h3>小黑水果店</h3>
<ul>
<li v-for="(item, index) in list">{{ item }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨', '香蕉', '火龙果', '葡萄', '草莓']
}
})
</script>v-for 中的 key
语法：key属性 = "唯一标识"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for="(item, index) in List" :key="item.id"例：删除对应id（唯一标识）
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{{ item.name }}</span>
<button @click="del(item.id)">删除</span>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del(id) {
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
</script>v-model
1、作用：给表单元素使用，双向数据绑定 > 快速 获取或设置 表单内容
- 数据变化 > 视图自动更新
- 视图变化 > 数据自动更新
2、语法：
例：双向数据绑定 登录表单应用
<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 src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
alert('欢迎用户：' + this.username + ' 您的密码长度是：' + this.password.length
)
},
Reset() {
this.username = ''
this.password = ''
}
}
})
</script>