1 模板插值語法
- 在script 宣告一個變數可以直接在template 使用用法為{{變數名稱}}
- 模板語法是可以撰寫條件運算的
- 運算也是支持的
- 操作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- 開頭都是vue 的指令
- v-text 用來顯示文本
- v-html 用來展示富文本
- v-if 用來控制元素的顯示隱藏（切換真偽DOM）
- v-else-if 表示 v-if 的“else if 塊”，可以鏈式呼叫
- v-else v-if條件收尾陳述句
- v-show 用來控制元素的顯示隱藏（display none block Css切換）
- v-on 簡寫@ 用來給元素添加事件
- v-bind 簡寫: 用來系結元素的屬性Attr
- v-model 雙向系結
- v-for 用來遍歷元素
v-on修飾符 冒泡案例：
<template>
<div @click="parent">parent
<div @click.stop="child">child</div>
</div>
</template>
<script setup lang="ts">
const child = () => {
console.log('child');
// 點擊后不會答應parent，因為被阻止了
}
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 :>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 :>{{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="style">系結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' // 實時監聽
const message = ref("message")
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501009.html
標籤：其他
上一篇：Vue+ElementUI 封裝簡易PaginationSelect組件
下一篇：JS兼容問題總結