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>