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>