插值表示式
VUE中最基本的資料繫結形式。
語法格式如下：
{{ 資料來源 }}
插值表示式的特點：
-
不依靠標籤。
-
可以呼叫函式。
-
支援運算子。
栗子
App.vue
<script setup>
let msg = "字串";
let num = 10;
function f1() {
return "有返回值的方法"
}
let f2 = () => {
return "甚至是箭頭函式"
};
let data = {
name: "張三",
age: 19,
info: {message: "物件也可以"}
}
</script>
<template>
{{ num }}
<h3>{{ msg }}</h3>
<h3>{{ f1() }}</h3>
<h3>{{ f2() }}</h3>
<h3> data:{{ data }}</h3>
<hr>
可以呼叫函式，String自帶的函式
<h3> {{ msg.split("") }}</h3>
<hr>
支援運算子，包括三目運算子
<h3>{{ num > 1 ? "大於1" : "小於1" }}</h3>
<h3>{{ ++num }}</h3>
<h3>{{ num+=2 }}</h3>
</template>
<style scoped>
</style>
效果展示
什麼是渲染
首先解釋什麼是渲染：
內容正確更新到DOM樹，這就叫渲染。
文字渲染就是，把文字正確更新到DOM樹中的文字節點中。
儘管編碼中使用了VUE提供的便利，但最終的DOM樹並不會有這些內容。
就檢視上述插值表示式栗子的原始碼，F12
可以看到並沒有{{}}在原始碼之中。
v-***就是VUE中的命令。
文字渲染
文字渲染專門負責雙標籤中的文字節點。
提供了兩種文字渲染命令：v-text和v-html
語法格式如下：
<雙標籤 v-text="資料來源"></雙標籤>
<雙標籤 v-html="資料來源"></雙標籤>
文字渲染的特點：
-
依靠雙標籤，且必須在開始標籤中。
-
可以呼叫函式。
-
支援運算子。
-
支援模板字串。
-
v-text不會解析HTML結構的文字。
-
v-html會解析HTML結構的文字。
栗子
App.vue
<script setup>
let msg = "字串";
let msgg = `hello ${msg}`
let f1 = () => {
return "懶得寫了，僅展示箭頭函式"
};
let f2 = " <h3>v-text不會解析HTML結構的文字，類似於InnerText</h3> "
let f3 = " <h3>v-html會解析HTML結構的文字，類似於InnerHTML</h3> "
</script>
<template>
支援模板字串
<h3 v-text="msgg"></h3>
<h3 v-text="f1()"></h3>
<hr>
<p v-text="f2"></p>
<p v-html="f3"></p>
</template>
<style scoped>
</style>
效果展示
屬性渲染
屬性渲染專門負責標籤中的屬性節點。
提供了一種屬性渲染命令：v-bind，可以簡寫為冒號：
語法格式如下：
<標籤 v-bind:屬性名1="資料來源1" v-bind:屬性名2="資料來源2"></標籤>
<標籤 :屬性名1="資料來源1" :屬性名2="資料來源2"></標籤>
屬性渲染的特點：
-
依靠標籤，但不僅依靠雙標籤。
-
多個屬性就要寫多個多個命令。
-
對HTML原生的屬性不做限制。
栗子
App.vue
<script setup>
let biliUrl = "https://www.bilibili.com/"
let data = {
title: "B站",
url: "https://www.bilibili.com/",
logo: "不給圖片地址，顯示alt內容"
}
</script>
<template>
<a v-bind:href="biliUrl">點選訪問B站</a>
<a :href="data.url" target="_self">
<img :src="data.logo" :alt="data.title">
</a>
</template>
<style scoped>
</style>
效果展示
個人建議不使用簡寫，排錯太難找了= =。
事件繫結
事件繫結專門負責監聽標籤中的事件。
提供了一種屬性渲染命令：v-on，可以簡寫為at@
語法格式如下：
<標籤 v-on:事件="事件觸發執行的方法"></標籤>
vue中的事件是原生事件名去掉on，例如：onclick👉click
事件觸發執行的方法，也統稱為處理器，handler。
文字渲染的特點：
-
依靠標籤，但不僅依靠雙標籤。
-
事件名可以加修飾符。常用修飾符如下：
-
.once：處理器只觸發一次。
-
.prevent：阻止預設事件發生。
-
預設事件指對DOM的操作會引起自動執行的動作：
比如點選超連結的時候會進行頁面的跳轉。
點選表單提交按鈕時會重新載入頁面等。
使用".prevent"修飾符可以阻止這些事件的發生。
更多修飾符
栗子
App.vue
<script setup>
let fun=function () {
alert("點選事件觸發")
}
let biliUrl = "https://www.bilibili.com/"
</script>
<template>
<button v-on:click="fun">1號按鈕</button>
<hr>
<button @click.once="fun">2號按鈕</button>
<a v-bind:href="biliUrl" @click.prevent="fun">3號連線</a>
</template>
<style scoped>
</style>
效果展示
