vue3 学习笔记11 – 模板语法和指令

模板语法

文本插值：使用双大括号 {{ }} 插入文本。

<script setup>const message = ref("Hello Vue3!!")
</script>
<template><p>{{message}}</p>
</template>

指令

以 v- 开头的特殊属性，如 v-if, v-for, v-bind, v-on

• 循环渲染列表：v-for

<template><div><ul><li v-for="item in items">{{ item }}</li></ul></div>
</template><script setup>
import { ref } from 'vue'
const items = ref(['Vue', 'Vite', 'JavaScript'])
</script>

• 事件处理：v-on:click 或简写为 @click。

<template><button @click="increment">+1</button>
</template><script setup>
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}
</script>
```vue
* 双向绑定：v-model。

* 条件渲染：v-if, v-else-if, v-else, v-show
```vue
<template><div v-if="type === 'A'">Type A</div><div v-else-if="type === 'B'">Type B</div><div v-else>Other type</div><div v-show="type=='A'">使用 CSS 的 display 属性实现</div>
</template><script setup>
import { ref } from 'vue'const type = ref('A')
</script>

• 类绑定：v-bind:class 或简写为 :class。

<template><div :class="{ active: isActive, 'text-success': hasSuccess }">Class binding</div>
</template><script setup>
import { ref } from 'vue'const isActive = ref(true)
const hasSuccess = ref(false)
</script>

• 样式绑定：v-bind:style 或简写为 :style。

<template><div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style binding</div>
</template><script setup>
import { ref } from 'vue'const activeColor = ref('red')
const fontSize = ref(20)
</script>

• 更新元素的文本内容：v-text

<template><span v-text="msg"></span><!-- 等同于 --><span>{{msg}}</span>
</template><script setup>
import { ref } from 'vue'const msg = ref('hello')
</script>

• 更新元素的 innerHTML：v-html

<template><span v-html="msg"></span>
</template><script setup>
import { ref } from 'vue'let msg = '<font color="red">msg</font>'
</script>

• 用于具名插槽分发内容：v-slot

// A文件
<template><div class="container"><header><!-- 标题内容放这里 --><slot name="header"></slot></header><main><!-- 主要内容放这里 --><slot></slot></main><footer><!-- 底部内容放这里 --><slot name="footer"></slot></footer></div>
</template>

// B组件
<template><commonSlot><template #footer><div class="box">底部内容放这里</div></template><template v-slot:header><div class="box">标题内容放这里</div></template><template #default><div class="box">主要内容放这里</div></template></commonSlot>
</template>
<script setup lang=ts>
import commonSlot from './a.vue;
</script>

• 一次性插值，性能优化：v-once

下述代码中，message的内容将在页面上显示一次，5秒钟后改变，但页面上的内容不会更新，仍然显示为"Hello, once!"。这是因为v-once已经在第一次渲染时将内容"Hello, once!"和数据绑定一起存储起来，后续即使数据变化，也不会更新DOM。

<template><div><!-- 使用v-once绑定的内容不会更新，即便message的值改变 --><p v-once>This will never change: {{ message }}</p></div>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref('Hello, once!');// 在某个时刻改变message的值，页面上的内容不会更新setTimeout(() => {message.value = 'Hello, still once!';}, 5000);return { message };}
};
</script>

• 跳过该元素和其子元素的编译过程：v-pre

{{ this will not be compiled }} 会被当作静态文本显示在页面上，而不是由 Vue 进行处理。

<template><span v-pre>{{ this will not be compiled }}</span>
</template>