Hello,我是渔戈!今天我们来学习一下关于 Vue3 的基本指令.
1.Mustache 双大括号语法(插值表达式)
说明:双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值.
<!-- 1.mustache的基本使用 --> <template id="my-app"> <h2>{{message}} - {{message}}</h2> <!-- 2.是一个表达式 --> <h2>{{counter*10}}</h2> <h2>{{message.split(" ").reverse().join(" ")}}</h2> <!-- 3.也可以调用函数 --> <!-- 可以使用computed(计算属性) --> <h2>{{getReverseMessage()}}</h2> <!-- 4.三元运算符 --> <h2>{{isShow?"哈哈哈":""}}</h2> <button @click="toggle">切换</button>
<!-- 错误用法 --> <!-- var name ="abc"-> 赋值语句 --> <!-- <h2>{{var name ="abc"}}</h2> <h2>{{if(isShow) {return "hhh"}}}</h2> -->
</template>
复制代码
<script> const App = { template: "#my-app", data() { return { message: "hello world!", counter: 100, isShow: true } }, methods: { getReverseMessage() { return this.message.split(" ").reverse().join(" "); }, toggle() { this.isShow = !this.isShow } } } Vue.createApp(App).mount("#app"); </script>
复制代码
2.v-once 指令
说明:v-once 用于指定元素或者组件只渲染一次;当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；该指令可以用于性能优化；
<template id="my-app"> <h2 v-once>{{counter}}</h2> <!-- v-once用于指定元素或组件只渲染一次: 当数据发生变化时,元素或者组件以及其所有的子元素都将视为静态内容并且跳过; 该指令可以用于性能优化; --> <div v-once> <h2>{{counter}}</h2> <h2>{{message}}</h2> </div> <button @click="increment">+1</button></template>
复制代码
<script> const App = { template: "#my-app", data() { return { counter: 100, message: "abc" } }, methods: { increment() { this.counter++ } } } Vue.createApp(App).mount("#app");</script>
复制代码
3.v-text 指令
说明:用于更新元素的文本内容。
<span v-text="msg"></span><!-- 等同于 --><span>{{msg}}</span>
复制代码
4.v-html 指令
说明:更新元素的 innerHTML.
默认情况下，如果我们展示的内容本身是 html 的，那么 vue 并不会对其进行特殊的解析。
如果我们希望这个内容被 Vue 可以解析出来，那么可以使用 v-html 来展示；
<template id="my-app"> <h2>{{message}}</h2> <!-- v-text指令:用于更新元素的textContent: --> <h2 v-text="message"></h2></template>
<script src="../js/vue.js"></script> <script> const App = { template: "#my-app", data() { return { message: "hello world!" } } } Vue.createApp(App).mount("#app"); </script>
复制代码
5.v-pre 指令
说明:v-pre 用于跳过元素和它的子元素的编译过程，显示原始的 Mustache 标签：
<template id="my-app"> <!-- v-pre:用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签: 跳过不需要编译的节点,加快编译的速度; --> <h2 v-pre>{{message}}</h2></template><script src="../js/vue.js"></script><script> const App = { template: "#my-app", data() { return { message: "hello world!" } } } Vue.createApp(App).mount("#app");</script>
复制代码
6.v-cloak
说明:用于隐藏尚未完成编译的 DOM 模板。
该指令只在没有构建步骤的环境下需要使用。
<template id="my-app"> <!-- v-pre:用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签: 跳过不需要编译的节点,加快编译的速度; --> <h2 v-pre>{{message}}</h2> </template> <script src="../js/vue.js"></script> <script> const App = { template: "#my-app", data() { return { message: "hello world!" } } } Vue.createApp(App).mount("#app"); </script>
复制代码
7.v-bind 指令
动态的绑定一个或多个 attribute，也可以是组件的 prop。
缩写： : 或者 . (当使用 .prop 修饰符)
期望： any (带参数) | Object (不带参数)
参数： attrOrProp (可选的)
修饰符：
.camel ——将短横线命名的 attribute 转变为驼峰式命名。
.prop ——强制绑定为 DOM property。3.2+
.attr ——强制绑定为 DOM attribute。3.2+
用途：
当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。
在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。
当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。
当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
<!-- 绑定 attribute --><img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 --><button v-bind:[key]="value"></button>
<!-- 缩写 --><img :src="imageSrc" />
<!-- 缩写形式的动态 attribute 名 --><button :[key]="value"></button>
<!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fileName" />
<!-- class 绑定 --><div :class="{ red: isRed }"></div><div :class="[classA, classB]"></div><div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 --><div :style="{ fontSize: size + 'px' }"></div><div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定对象形式的 attribute --><div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop” 必须在子组件中已声明。 --><MyComponent :prop="someThing" />
<!-- 传递子父组件共有的 prop --><MyComponent v-bind="$props" />
<!-- XLink --><svg><a :xlink:special="foo"></a></svg>
复制代码
8.v-on 指令
说明:给元素绑定事件监听器。
缩写： @
期望的绑定值类型： Function | Inline Statement | Object (不带参数)
参数： event (使用对象语法则为可选项)
修饰符：
.stop ——调用 event.stopPropagation()。
.prevent ——调用 event.preventDefault()。
.capture ——在捕获模式添加事件监听器。
.self ——只有事件从元素本身发出才触发处理函数。
.{keyAlias} ——只在某些按键下触发处理函数。
.once ——最多触发一次处理函数。
.left ——只在鼠标左键事件触发处理函数。
.right ——只在鼠标右键事件触发处理函数。
.middle ——只在鼠标中键事件触发处理函数。
.passive ——通过 { passive: true } 附加一个 DOM 事件。
详细信息
事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。
当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。
<!-- 方法处理函数 --><button v-on:click="doThis"></button>
<!-- 动态事件 --><button v-on:[event]="doThis"></button>
<!-- 内联声明 --><button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 --><button @click="doThis"></button>
<!-- 使用缩写的动态事件 --><button @[event]="doThis"></button>
<!-- 停止传播 --><button @click.stop="doThis"></button>
<!-- 阻止默认事件 --><button @click.prevent="doThis"></button>
<!-- 不带表达式地阻止默认事件 --><form @submit.prevent></form>
<!-- 链式调用修饰符 --><button @click.stop.prevent="doThis"></button>
<!-- 按键用于 keyAlias 修饰符--><input @keyup.enter="onEnter" />
<!-- 点击事件将最多触发一次 --><button v-on:click.once="doThis"></button>
<!-- 对象语法 --><button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
复制代码
9.v-if、v-else、v-else-if 指令
<template id="my-app"> <input type="text" v-model="score"> <h2 v-if="score > 90">优秀</h2> <h2 v-else-if="score > 80">良好</h2> <h2 v-else-if="score > 60">普通</h2> <h2 v-else>不及格</h2></template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { score: 95 } } }
Vue.createApp(App).mount('#app'); </script>
复制代码
v-if 的渲染原理：
template 元素因为 v-if 是一个指令，所以必须将其添加到一个元素上：
但是如果我们希望切换的是多个元素呢？
此时我们渲染 div，但是我们并不希望 div 这种元素被渲染；
这个时候，我们可以选择使用 template；
template 元素可以当做不可见的包裹元素，并且在 v-if 上使用，但是最终 template 不会被渲染出来：
<template id="my-app"> <template v-if="isShowHa"> <h2>哈哈哈哈</h2> <h2>哈哈哈哈</h2> <h2>哈哈哈哈</h2> </template>
<template v-else> <h2>呵呵呵呵</h2> <h2>呵呵呵呵</h2> <h2>呵呵呵呵</h2> </template></template>
复制代码
10.v-show 指令
说明:基于表达式值的真假性，来改变元素的可见性。
v-show 和 v-if 的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件：
<template id="my-app"> <h2 v-show="isShow">哈哈哈哈</h2> </template>
<script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { isShow: true } } } Vue.createApp(App).mount('#app'); </script>
复制代码
11.v-show 和 v-if 的区别
首先，在用法上的区别：
v-show 是不支持 template；
v-show 不可以和 v-else 一起使用；
其次，本质的区别：
v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有渲染的，只是通过 CSS 的 display 属性来进行切换；
v-if 当条件为 false 时，其对应的原生压根不会被渲染到 DOM 中；
开发中如何进行选择呢？
如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用 v-show；
如果不会频繁的发生切换，那么使用 v-if；
<template id="my-app"> <h2 v-if="isShow">哈哈哈哈</h2> <h2 v-show="isShow">呵呵呵呵</h2> </template>
<script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { isShow: true } } } Vue.createApp(App).mount('#app'); </script>
复制代码
评论