很高兴在我的分享里与你认识，想持续跟着江哥学习Vue系列一键三连走起！
什么是指令？
指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能，只要使用这些指令就可以使用Vue中实现的这些功能。通过这些指令可以让 Vue 对一个 DOM元素进行各种骚操作，如 v-once、 v-model 等指令。
- 常见的
Vue指令
v-model
v-once
v- if
v-else
v-text
v-html
v-show
v-for
v-bind
v-model
v-model主要是用来做数据绑定的，数据绑定又可以归为单向绑定与双向绑定。
- 单向绑定：将 Model 中的数据渲染到 View 上，Vue 中默认就是单向绑定
- 双向绑定：将 Model 中的数据渲染到 View 上，再将 View 上更新的数据重新保存到 Model 中
v-once
只渲染元素和组件一次，让界面不要跟着数据变化
<div id="app">
<p v-once>原始数据: {{ name }}</p>
<p>当前数据: {{ name }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "it666",
}
});
</script>
打开控制台，修改 data 中的数据为 李南江 ，我们可以观察到界面上通过v-once渲染的数据未发生变化。
image.png
v-if
什么是v-if指令
条件渲染: 如果 v-if 取值是 true 就渲染元素, 如果不是就不渲染元素v-if 特点:
如果条件不满足根本就不会创建这个元素(重点)v-if注意点
v-if 可以从模型中获取数据
v-if 也可以直接赋值一个表达式
<div id="app">
<p v-if="age > 33">显示数据</p> //会显示在界面上
<p v-if=" age < 33">不显示数据</p>//不会显示在界面上
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
age:26
}
})
</script>
v-else
- v-else 指令不能单独出现，必须配合 v-if 使用。
- v-else-if 可以和 v-if 指令配合使用, 当 v-if 不满足条件时就依次执行后续 v-else-if, 哪个满足就显示哪个。
<div id="app">
<p v-if="score >=90">优秀</p> //会显示在界面上
<p v-else-if="score > 60">及格</p>
<p v-else>不及格</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
score:88
}
})
</script>
