Vue3中的模板語(yǔ)法和vue指令怎么使用

本文小編為大家詳細(xì)介紹“Vue3中的模板語(yǔ)法和vue指令怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue3中的模板語(yǔ)法和vue指令怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1 模板插值語(yǔ)法

• 在script 聲明一個(gè)變量可以直接在template 使用用法為{{變量名稱}}

• 模板語(yǔ)法是可以編寫(xiě)條件運(yùn)算的

• 運(yùn)算也是支持的

• 操作API 也是支持的

<template>
  {{ message }}
    {{ message2==0 ? '我是老大' : '我笑的' }}
    {{ message2 + 1 }}
    {{ message.split('').map(v => `4546$v`) }}
</template>

<script setup lang="ts">
const message = "我是唐少"
const message2:number = 1
</script>
<style>
</style>

2 指令

• v- 開(kāi)頭都是vue 的指令

• v-text 用來(lái)顯示文本

• v-html 用來(lái)展示富文本

• v-if 用來(lái)控制元素的顯示隱藏（切換真假DOM）

• v-else-if 表示 v-if 的“else if 塊”?？梢枣?zhǔn)秸{(diào)用

• v-else v-if條件收尾語(yǔ)句

• v-show 用來(lái)控制元素的顯示隱藏（display none block Css切換）

• v-on 簡(jiǎn)寫(xiě)@ 用來(lái)給元素添加事件

• v-bind 簡(jiǎn)寫(xiě): 用來(lái)綁定元素的屬性Attr

• v-model 雙向綁定

• v-for 用來(lái)遍歷元素

v-on修飾符

冒泡案例：

<template>
  <div @click="parent">parent
    <div @click.stop="child">child</div>
  </div>
</template>
  
<script setup lang="ts">
const child = () => {
  console.log('child');
 // 點(diǎn)擊后不會(huì)答應(yīng)parent，因?yàn)楸蛔柚沽?
}
const parent = () => {
  console.log('parent');
}
  
</script>

阻止表單提交案例：

<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
<script setup lang="ts">
const submit = () => {
  console.log('child');
  
}
</script>
<style>
</style>

v-bind 綁定class 案例 1：

<template>
  <div :class="[flag ? 'active' : 'other', 'h']">456789</div>
</template>
<script setup lang="ts">
const flag: boolean = false;// 改成true后切換不同的效果
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定class 案例 2：

<template>
  <div :class="flag">{{flag}}</div>
</template>
 // 直接綁定cls
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定style案例：

<template>
  <div :>綁定style</div>
</template>
<script setup lang="ts">
type Style = {
  height: string,
  color: string
}
const style: Style = {
  height: "300px",
  color: "blue"
}
</script>
<style>
</style>

v-model 案例：

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue' // 實(shí)時(shí)監(jiān)聽(tīng)
const message = ref("message")
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

讀到這里，這篇“Vue3中的模板語(yǔ)法和vue指令怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。