Vue 指令
文章目录
- 1. 介绍
- 2. v-show 和 v-if
- 3. v-else 和 v-else-if
- 4. v-on
- 5. v-bind
- 6. v-for
- 7. v-model
- 8. 指令修饰符
1. 介绍
指令：带有 v- 前缀的特殊标签属性。
<div v-html = "str"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="#">
栈老师不回家
</a>
`
}
})
</script>
</body>
</html>
要注意单引号不要丢掉：
2. v-show 和 v-if
① v-show
作用：控制元素的显示和隐藏（简单的显示隐藏）。
语法：v-show = “表达式”，true 为显示，false 为隐藏。
底层原理：通过切换 CSS 的 display 为 none 来控制显示隐藏。
适用场景：需要频繁切换显示隐藏的场景。
① v-if
作用：控制元素的显示和隐藏（条件渲染）。
语法：v-if = “表达式”，true 为显示，false 为隐藏。
底层原理：根据判断条件控制元素的创建和销毁。
适用场景：不需要频繁切换显示隐藏的场景。
3. v-else 和 v-else-if
作用：辅助 v-if 进行判断渲染。
语法：v-else，v-else-if = “表达式” 。
注意：需要紧挨着 v-if 一起使用。
4. v-on
作用：注册事件，即添加监听 + 提供处理逻辑。
语法：v-on: 事件名= “事件之后要执行的事情” 。
注意：需要紧挨着 v-if 一起使用。
事件之后要执行的事情包括，内联语句或 methods 中的函数名。
① 内联语句
<button @click="count++">+</button>
为了方便，我们可以直接用 @ 来替换 v-on: ！
② methods 中的函数名
所有的方法都写在 methods 里面，在方法内想使用 data 里的数据，必须要通过当前实例来调用，而 this 库直接指向当前实例（this.flag）。
也可以给方法传参：
5. v-bind
作用：动态的设置 html 的标签属性（src、url、title 等）。
语法：v-bind: 属性名= “表达式” 。
注意：
① 插值表达式不能写在标签里面；
② 要想动态地设置标签属性，就必须给属性带上 v-bind: 前缀，属性值为表达式；
③ 为了方便书写，我们也可以用冒号来代替 v-bind:。
6. v-for
作用：基于数据循环，多次渲染整个元素（数组、对象、数字等）。
语法：< p v-for=“…”>我是一个内容< /p>。
<p v-for="(item, index) in 数组"></p>
<p v-for="item in 数组"></p>
item是每一项，index是下标，内部引入直接使用双花括号，如果不需要 index，那么括号也可以省略！
案例：
filter：根据条件，保留满足条件的对应项，得到一个新数组。
Key 的作用：给元素添加唯一标识，便于 Vue 进行列表项的正确排序复用。
注意点：key 的值只能是字符串或数字类型，key 的值必须具有唯一性，推荐使用 id 作为 key，不推荐使用索引 index，因为索引会随时变化，导致列表和数据不对应。
7. v-model
作用：给表单元素使用，通过双向数据绑定（数据和视图），快速获取或设置表单元素内容。
注意点：key 的值只能是字符串或数字类型，key 的值必须具有唯一性，推荐使用 id 作为 key，不推荐使用索引 index，因为索引会随时变化，导致列表和数据不对应。
8. 指令修饰符
通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理方法（可以简化代码）。
① 按键修饰符，@keyup.enter 键盘回车监听；
② v-model 修饰符，v-model.trim 去除首尾空格，v-model.number 转数字；
③ 事件修饰符，@事件名.stop 阻止冒泡（子元素的事件会蔓延到父元素），@事件名.prevent 阻止默认行为。
//按回车键即可执行add方法
<input @keyup.enter="add" v-model="todoName" placehoder="请输入">