mustache双大括号语法
把数据显示到template模板中,使用最多的就是mustache语法的文本插值。
可以是表达式,可以调用函数,可以使用computed计算属性,可以使用三元运算符;不可以是赋值语句和if语句等。
v-once指令
用于指定元素或者组件只能渲染一次:
- 当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并跳过。
- 该指令可用于性能优化。
<body>
<div id="app"></div>
<template id="my-app">
<h3>{
{counter}}</h3>
<h3 v-once>{
{counter}}</h3>
<button @click ="add">+</button>
</template>
<script>
const App = {
template: '#my-app',
data() {
return {
counter : 0
}
},
methods: {
add() {
this.counter++
}
},
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
v-text指令
用于更新元素的textContent:
<h3 v-text="message"></h3>
<!-- 等价于,常用第二种方式 -->
<h3>{
{message}}</h3>
v-html指令
如果我们展示的内容本身时html的