示例1：如何使用Vue的資料繫結、指令（如v-text和v-html）以及如何透過v-pre指令來跳過元素的編譯過程。此外，它還演示瞭如何在Vue元件中定義和使用資料物件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 設定文件的字元編碼為UTF-8 -->
<title></title> <!-- 標題標籤，當前未設定標題內容 -->
</head>
<!-- 引入Vue 3的global版本，用於在瀏覽器中直接透過<script>標籤使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue應用的掛載點，Vue例項將控制這個DOM元素及其內部的內容 -->
<div id="app">
<!-- 使用雙花括號語法繫結name變數的值到h1標籤的內容中 -->
<h1>{{name}}</h1>
<!-- 繫結stu物件的name屬性的值到h1標籤的內容中 -->
<h1>{{stu.name}}</h1>
<!-- 繫結stu物件的age屬性的值到h1標籤的內容中 -->
<h1>{{stu.age}}</h1>
<!-- v-text指令與雙花括號語法功能相同，但v-text指令會替換元素的整個內容 -->
<h1 v-text="stu.age" ></h1>
<!-- 嘗試使用v-text指令繫結stu.desc，但desc包含HTML標籤，因此這裡v-text會將其轉義為純文字 -->
<h1 v-text="stu.desc" ></h1>
<!-- v-html指令會輸出原始的HTML內容，不會進行轉義，因此可以正確渲染stu.desc中的<i>標籤 -->
<h1 v-html="stu.desc" ></h1>
<!-- 雙花括號語法，正常顯示繫結的變數內容 -->
<h1>顯示兩個花括號和name：{{name}}</h1>
<!-- v-pre指令會跳過元素的編譯過程，因此{{name}}會被原樣顯示，不會被替換為變數的值 -->
<h1 v-pre>顯示兩個花括號和name：{{name}}</h1>
</div>
<script>
// 建立一個Vue應用例項
var app = Vue.createApp({
// 定義應用的資料物件
data(){
return{
name :"python", // 一個簡單的字串變數
stu:{ // 一個物件，包含學生的資訊
name:"張三", // 學生姓名
age:20, // 學生年齡
desc:"<i>是一名python愛好者</i>" // 學生描述，包含HTML標籤
}
}
},
methods:{
// 方法物件，當前為空，可以定義一些供模板使用的方法
}
})
// 將Vue應用掛載到#app元素上，Vue將開始編譯並控制這個元素及其內部的內容
app.mount('#app')
</script>
</body>
</html>
示例2：如何在Vue模板中使用v-bind指令（包括其簡寫形式:）來繫結HTML元素的屬性（在這個例子中是a標籤的href屬性）到Vue例項的資料物件上。同時，它也展示瞭如何在模板中透過雙花括號{{ }}語法來顯示資料物件中的屬性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 設定文件的字元編碼為UTF-8，確保正確顯示各種字元 -->
<title></title> <!-- 頁面標題標籤，當前未設定具體標題 -->
</head>
<!-- 引入Vue 3的global版本，允許在瀏覽器中直接使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue應用的掛載點，Vue例項將控制這個DOM元素及其內部的內容 -->
<div id="app">
<!-- 使用v-bind指令繫結href屬性到url1物件的url屬性上，同時顯示url1物件的name屬性 -->
<a v-bind:href="url1.url">{{url1.name}}</a>
<!-- 一個空的div元素，當前沒有實際用途 -->
<div></div>
<!-- 簡寫形式的v-bind指令，直接繫結href屬性到url1物件的url屬性上，同時顯示url1物件的name屬性 -->
<a :href="url1.url">{{url1.name}}</a>
</div>
<script>
// 建立一個Vue應用例項
var app = Vue.createApp({
// 定義應用的資料物件
data(){
return{
// 定義一個物件url1，包含name和url兩個屬性
url1:{
name:"百度", // 連結的文字內容
// 注意：這裡的URL可能是一個示例，實際指向的是Vue.js官方文件的某個頁面
url:"https://cn.vuejs.org/guide/essentials/template-syntax.html"
}
}
},
// 方法物件，當前為空，可以定義一些供模板使用的方法
methods:{
}
})
// 將Vue應用掛載到#app元素上，Vue將開始編譯並控制這個元素及其內部的內容
app.mount('#app')
</script>
</body>
</html>
Vue模板中使用v-on:click指令（或其簡寫形式@click）來繫結按鈕的點選事件到Vue例項的方法上。同時，它也展示瞭如何在Vue例項的資料物件中定義和修改資料屬性，並在模板中透過雙花括號{{ }}語法來顯示這些資料屬性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 設定文件的字元編碼為UTF-8，以正確顯示各種字元 -->
<title></title> <!-- 頁面標題標籤，當前未設定具體標題 -->
</head>
<!-- 引入Vue 3的global版本，允許在瀏覽器中直接使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue應用的掛載點，Vue例項將控制這個DOM元素及其內部的內容 -->
<div id="app">
<!-- 一個按鈕，當點選時，會觸發Vue例項中的add方法，使number值增加 -->
<button type="button" v-on:click="add">+</button>
<!-- 顯示Vue例項中number資料的值 -->
<h1>{{number}}</h1>
<!-- 另一個按鈕，當點選時，會觸發Vue例項中的sub方法，使number值減少 -->
<button type="button" @click="sub">-</button>
</div>
<script>
// 建立一個Vue應用例項
var app = Vue.createApp({
// 定義應用的資料物件
data(){
return{
// 定義一個名為number的資料屬性，初始值為0
number:0
}
},
// 定義應用的方法物件
methods:{
// add方法，用於增加number的值
add(){
this.number++ // 使用this關鍵字訪問Vue例項中的number屬性，並將其值增加1
},
// sub方法，用於減少number的值
sub(){
this.number-- // 使用this關鍵字訪問Vue例項中的number屬性，並將其值減少1
}
}
})
// 將Vue應用掛載到#app元素上，Vue將開始編譯並控制這個元素及其內部的內容
app.mount('#app')
</script>
</body>
</html>