指令
1. 指令介绍：
指令 (Directives) 是写在模板上的特殊属性 可以操作DOM变成想要的样子
在Vue中，常见的指令有以下这些：
┌───────► 内容渲染指令
│
├───────► 条件渲染指令
│
├───────► 列表渲染指令
│
directive ────┼───────► 属性绑定指令
│
├───────► 事件绑定指令
│
├───────► 双向绑定指令
│
└───────► 自定义指令
2. 内容渲染指令 v-text
v-text指令，用来渲染DOM元素的文本内容，类似于JavaScript中的innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-html 能翻译标签 覆盖原有内容 相当于 DOM中的 innerHTML -->
<h1 v-html='message'>我叫张三，我家住北京</h1>
<p>{
{
name}}在今年9月份中了500万{
{
message}}</p>
<!-- v-text 相当于 DOM中的 innerText 不能翻译标签 覆盖原有内容 -->
<h2 v-text='message'>JavaScript</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '张三',
message: '<em>我今天起床有点儿晚</em>',
}
})
// 注意: 插值表达式 不能用在属性中 (React)
</script>
</body>
</html>
特点：
v-text指令会覆盖元素默认的内容v-text指令不能解析标签
3. 内容渲染指令 v-html
如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素， 需要用到 v-html 这个指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-html 能翻译标签 覆盖原有内容 相当于 DOM中的 innerHTML -->
<h1 v-html='message'>我叫张三，我家住北京</h1>
<p>{
{
name}}在今年9月份中了500万{
{
message}}</p>
<!-- v-text 相当于 DOM中的 innerText 不能翻译标签 覆盖原有内容 -->
<h2 v-text='message'>JavaScript</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '张三',
message: '<em>我今天起床有点儿晚</em>',
}
})
// 注意: 插值表达式 不能用在属性中 (React)
</script>
</body>
</html>
4. 条件渲染指令
4.1 v-if/v-else-if/v-else/v-show
v-if/v-else-if/v-else/条件渲染指令用来辅助开发者按需控制 虚拟DOM 是否被编译为真实DOM。
v-show指令用来辅助开发者按需控制DOM的样式display:none或者display:block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染指令: 根据条件的真假 判断 内容是否展示 -->
<!-- 1. v-if... 根据判断条件 判断 内容是否编译成真实的DOM元素 -->
<!-- 2. v-show 根据判断条件 判断 内容是否显示在页面上(控制的是display属性) -->
<p v-if="score == 'A'">优秀</p>
<p v-else-if="score == 'B'">良好</p>
<p v-else-if="score == 'C'">中等</p>
<p v-else="score == 'D'">一般</p>
<p v-show="score == 'A'">优秀</p>
<p v-show="score == 'B'">良好</p>
<p v-show="score == 'C'">中等</p>
<p v-show="score == 'D'">一般</p>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: "张三",
message: "<em>我今天起床有点儿晚</em>",
score: "D"
}
})
</script>
</body>
</html>
4.2 v-if和v-show的区别：
- 共同点：
v-if和v-show都能实现元素的显示隐藏 - 不同点：
v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件 为假，元素会被销毁）；
v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；
v-if 有更高的切换开销，v-show 切换开销小；
v-if 有配套的 v-else-if 和 v-else，而 v-show 没有；
v-if 可以搭配 template 使用，而 v-show 不行。
注意：
v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别
v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别
5. 列表渲染指令
我们可以用v-for指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items是源数据数组，而 item则是被迭代的数组元素的别名。
5.1 用 v-for 渲染一组元素 展示索引及元素 给 v-for 添加 key v-for 与 v-if 一同使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入 Vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 2.在创建一个div id为app id为app的意思是 等下 vue会通过我们的ID来管理 appz这个div中的所有元素 子元素 以及内容 -->
<!-- {
{
}} 叫做插值表达式 用来渲染页面的 -->
<div id="app">
<!-- 列表渲染指令 -->
<!-- <ul>
<li v-for="元素变量 in 数组名">{
{
元素变量}}</li>
</ul> -->
<h1>{
{
name}}</h1>
<!-- <ul>
<li v-for="item in hobby">{
{
item.a}}</li>
</ul> -->
<!-- 如何展示索引 及 遍历项 -->
<!-- 1.在项目的脚手架中，可能会有 警告 -->
<!-- 2.key为了保证 让 Vue认识 哪些元素 变化了 哪些元素没有变化 如果没有key意味着该元素没有唯一标识 vue就不知道谁是谁 就按照位置进行更新 -->
<!-- key属性 必须在 v-for中写 而且 key的值不能重复且唯一 一般这个值 只能是 数字或者字符串 -->
<ul>
<!-- 如果 flag为true 进行渲染 如果不为true 不渲染 -->
<!-- template 会不会渲染到 页面中呢? 不会 它是一个临时元素 -->
<template v-for="(item, index) in hobby" >
<li v-if="item.flag === true" :key="item.id">{
{
index}}---{
{
item.a}}</li>
</template>
<!-- 在 单文件组件中，要求 组件必须有一个根元素，有些时候 又不想多一层嵌套 因此 就需要用一个template这个临时元素包裹一下 -->
<!-- 在 Vue-CLI中 演示 -->
</ul>
</div>
<!-- 3.创建一个 script标签 创建vue实例 -->
<script>
// 作用:
new Vue({
el: "#app",
data: {
name: "张三",
message: "<em>我今天起床有点儿晚</em>",
score: "D",
hobby: [{
id: 1, a: "打篮球", flag: true }, {
id: 2, a: "踢足球", flag: false }, {
id: 3, a: "画素描", flag: true }, {
id: 4, a: "听歌剧", flag: true }, {
id: 5, a: "练武术", flag: true }]
}
})
// 注意: 插值表达式 不能用在属性中 (React)
</script>
</body>
</html>
我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items是源数据数组，而 item则是被迭代的数组元素的别名。
当 Vue正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。 为了给 Vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下， 提升渲染的性能。此时，需要为每项提供一个唯一的 key属性