一、vue的常用指令
v-bind：用于绑定属性，通过v-bind：绑定过的属性，可以直接在属性值写表达式。可以简写为：
v-on：用于绑定事件，通过v-on：绑定过的事件，可以指定vue实例定义的方法。可以简写为@
v-model：指令用于实现对数据的双向绑定，所谓双向绑定指的是：数据发生变化重新渲染页面，页面数据发生变化重新更新数据。v-model指令是v-bind：value和v-on：input的简写
<div id="app">
<div>
<span>姓名：</span>
<!-- v-bind: 用于绑定属性，通过v-bind： 绑定过的属性，可以直接在属性值写表达式 -->
<!-- v-on: 用于绑定事件，通过v-on: 可以指定vue实例定义的方法 -->
<input type="text" v-bind:value="name" v-on:input='updataName'>{{name}}
</div>
<div>
<span>年龄：</span>
<!-- v-bind: 可以简写为 : -->
<!-- v-on: 可以简写为 @ -->
<!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>职业：</span>
<!-- 通过v-model指令，可以实现对数据的双向绑定，v-model指令是v-bind：value和v-on:input 的简写-->
<input type="text" v-model="job">{{job}}
</div>
</div>
<script>
// 关闭生产提示
Vue.config.productionTip = false
let vm = new Vue({
el:'#app',
data:{
name:'张三',
age:20,
job:'前端工程师'
},
methods: {
updataName(e){
// 获取文本框里面的内容，更新数据
this.name = e.target.value
}
},
})
</script>
二、条件渲染和列表渲染
1、条件渲染
使用v-if或v-show实现条件渲染
v-if 和v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，只渲染指定的模块
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
<hr/>
<button @click='isShow=!isShow'>显示/隐藏</button>
<!-- 每次要根据isShow的值，确定是否渲染页面 -->
<div v-if="isShow">
<img src="https://img0.baidu.com/it/u=479969830,229530485&fm=26&fmt=auto" alt="">
</div>
<!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
<div v-show="isShow">
<img src="https://img0.baidu.com/it/u=82951725,1946796873&fm=26&fmt=auto" alt="">
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
score:95,
isShow:false,
}
})
</script>
2、列表渲染
v-for 指令，用于列表渲染：类型渲染时，通常都要绑定key，key的作用是提高渲染性能
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用
<div id="app">
<ul>
<li v-for="(item,index) in foods" :key="index">{{index}}-{{item.name}}-{{item.price}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
foods:[
{
id:1,
name:'饼干',
price:4.2
},
{
id:2,
name:'面包',
price:9.9
},
{
id:3,
name:'蛋糕',
price:20
},
{
id:3,
name:'牛奶',
price:3.7
},
]
}
})
</script>
三、练习：轮播图
<div id="app" @mouseenter="mouseenter" @mouseleave="mouseover">
<img :src="imgs[showActive]" class="img">
<div id="left" @click="prev">←</div>
<div id="right" @click="next">→</div>
<button @click="destroy">停止播放</button>
</div>
<script>
new Vue({
el: '#app',
data: {
//定义定时器
timer: null,
// 显示的下标
showActive: 0,
// 图片数组
imgs: ["https://y.qq.com/music/common/upload/MUSIC_FOCUS/4140669.jpg?max_age=2592000",
"https://y.qq.com/music/common/upload/MUSIC_FOCUS/4138242.gif?max_age=2592000",
"https://y.qq.com/music/common/upload/MUSIC_FOCUS/4141402.jpg?max_age=2592000",
"https://y.qq.com/music/common/upload/MUSIC_FOCUS/4140957.jpg?max_age=2592000",
"https://y.qq.com/music/common/upload/MUSIC_FOCUS/4140452.jpg?max_age=2592000"]
},
methods: {
// 上一张图片的点击事件
prev() {
this.showActive--
if (this.showActive < 0) {
this.showActive = 4
}
},
// 下一张图片的点击事件
next() {
this.showActive++
if (this.showActive >= 5) {
this.showActive = 0
}
},
// 鼠标经过
mouseenter() {
clearInterval(this.timer)
},
// 鼠标离开
mouseover() {
this.run()
},
// 定时器
run() {
this.timer = setInterval(() => {
this.showActive++
// 如果下标越界，重新从0开始
if (this.showActive >= 5) {
this.showActive = 0
}
}, 1000)
},
// 销毁完成
destroy() {
this.$destroy()
}
},
// 生命周期函数（表示页面挂载完成）
mounted() {
this.run()
},
// 生命周期函数（表示销毁之前要实现的事）
beforeDestroy() {
// 清除定时器
clearInyerval(this.timer)
},
})
</script>
