【Vue】常用指令
2021/6/16 10:51:17
本文主要是介绍【Vue】常用指令,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
常用指令
Mustache双大括号语法
如果我们希望把数据显示到模板(template)中,使用最多的语法是“Mustache”语法(双大括号) 的文本插值。
- 并且我们前端提到过,data返回的对象是有添加到Vue的响应式系统中
- 当data中的数据发生改变时,对应的内容也会发生更新
- 当然,Mustache中不仅仅可以是data中的属性,也可以是一个JavaScript的表达式
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"></div> <template id="my-app"> <!-- 1.mustache的基本使用 --> <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> </template> <script src="../js/vue.js"></script> <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> </body> </html>
另外这种用法是错误的:
<!-- 错误用法 --> <!-- var name = "abc" -> 赋值语句 --> <!-- <h2>{{var name = "abc"}}</h2> <h2>{{ if(isShow) { return "哈哈哈" } }}</h2> -->
v-once指令
- 当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并且跳过
- 该指令可以用于性能优化
<div id="app"></div> <template id="my-app"> <h2>{{counter}}</h2> <div v-once> <h2>{{counter}}</h2> <h2>{{message}}</h2> </div> <button @click="increment">+1</button> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { counter: 100, message: "abc" } }, methods: { increment() { this.counter++; } } } Vue.createApp(App).mount('#app'); </script>
如果是子节点,也是只会渲染一次
v-text指令
<template id="my-app"> <h2 v-text="message"></h2> <h2>{{message}}</h2> </template>
v-html
默认情况下,如果我们展示的内容本身是html 的,那么vue并不会对其进行特殊的解析
如果我们希望这个内容被Vue可以解析出来,那么可以使用v-html 来展示
<template id="my-app"> <div>{{msg}}</div> <div v-html="msg"></div> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { msg: '<span style="color:red; background: blue;">哈哈哈</span>' } } } Vue.createApp(App).mount('#app'); </script>
v-pre
v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签
跳过不需要编译的节点,加快编译的速度
<template id="my-app"> <h2 v-pre>{{message}}</h2> </template>
v-cloak
这个指令保持在元素上直到关联组件实例结束编译。
和CSS 规则如[v-cloak]{ display: none }一起用时,这个指令可以隐藏未编译的Mustache 标签直到组件实例准备完毕。
<template id="my-app"> <h2 v-cloak>{{message}}</h2> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { message: "Hello World" } } }
不会显示,直到编译结束。v-cloak
这篇关于【Vue】常用指令的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist