写在前面
? ? ? ? 又见面啦朋友们，日更也太难了。今天讲一讲vue最基础的指令吧，希望可以帮助到小白们。
? ? ? ? （编辑格式也太麻烦了，写在这儿吧）
? ? ? ? 今天是摸鱼小王- -
1. 内容渲染指令
-
v-text 指令的缺点：会覆盖元素内部原有的内容！
-
{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
-
v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
2. 属性绑定指令
????????注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！????????
-
在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值； -
简写是英文的 : -
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如： <div :title="'box' + index">这是一个 div</div>
3. 事件绑定
-
v-on: 简写是 @
-
语法格式为： <button @click="add"></button>
?
methods: {
? add() {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
? }
}
-
$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
<button @click="add(3, $event)"></button>
methods: {
add(n, e) {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
}
}
-
事件修饰符：
.prevent
<a @click.prevent="xxx">链接</a>
.stop
<button @click.stop="xxx">按钮</button>
4. v-model 指令
-
input 输入框
-
type="radio" -
type="checkbox" -
type="xxxx"
-
textarea -
select
5. 条件渲染指令
-
v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态，用 v-show 性能会更好 -
v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
????????v-if 指令在使用的时候，有两种方式：
-
直接给定一个布尔值 true 或 false
<p v-if="true">被 v-if 控制的元素</p>
-
给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
<p v-if="type === 'A'">良好</p>
|