Vue常见指令
1.v-bind 用于绑定属性，通过v-bind:绑定过的属性，属性值可以写表达式
注：v-bind:可以用 ：简写
2.v-on 用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法
注：1.v-on:可以用@简写
2.如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this,$event是事件对象
3.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="updateName">{{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: {
updateName(e){
//获取文本框里面的内容，更新数据
this.name = e.target.value
}
},
})
</script>
条件渲染和列表渲染
1.v-if&v-show
v-if和v-show如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块时，再渲染指定的模块。
2.v-for指令
用于列表渲染：类型渲染时，通常都要绑定key,key的作用是用来提高渲染性能
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用
<style>
img{
width: 500px;
}
</style>
<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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428174908_sgsyj.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144539&t=de45197a8aa3bf884b08b791723e7ed0">
</div>
<hr>
<!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
<div v-show="isShow">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic40.nipic.com%2F20140428%2F9081536_114914525167_2.jpg&refer=http%3A%2F%2Fpic40.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144712&t=1261090ac684bf8e3c83f61ed012a2a7">
</div>
<!-- v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
-->
<hr>
<ul>
<!-- v-for指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。 -->
<li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
//定义数据
data:{
score:55,
isShow:false,
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'饼干',
price:3.9
},
{
id:3,
name:'面包',
price:9.9
},
{
id:4,
name:'蛋糕',
price:16.9
}
]
}
})
</script>
面试相关考点：
1.Vue 循环的 key 作用
Key 值的存在保证了唯一性，Vue 在执行时，会对节点进行检查，如果
没有 key 值，那么 vue 检查到这里有 dom 节点，就会对内容清空并赋
新值，如果有 key 值存在，那么会对新老节点进行对比，比较两者 key
是否相同，进行调换位置或删除操作
2.v-if和v-show如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块时，再渲染指定的模块。
