Vue.js 提供了模板語法的方式來定義應用程序的界面，用於渲染組件的內容。透過模板語法能夠將 HTML 和 JavaScript 整合在一起，使我們能夠動態生成 HTML 內容。
Vue 的模板語法分成插值和指令兩類，今天就要來和大家介紹 Vue 模板語法的一些基本概念和常見用法！
是最簡單也最常見的 Vue 模板語法。就是我們先前已經看過的雙大括號{{ }}， 將變數的值插入到 HTML 模板中，讓我們可以動態渲染數據，並實現單向繫結。
<!DOCTYPE html>
<html>
<head>
<title>插值語法範例</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
});
</script>
</body>
</html>
以上為插值語法的用法，message 的內容會隨著值的變化而更新。
若只想渲染一次，使內容不隨著數據更改而重新渲染，則可以使用 v-once 指令來實現。
<span v-once>{{ message }}</span>
以上示例中，v-once 指令被應用於 <span> 元素，這意味著 message 的內容將只在初次渲染時插入，之後即使 message 的值發生變化，這個 <span> 元素也不會重新渲染。
Vue.js 的過濾器（Filters）是一種用於在模板中格式化顯示數據的方式。可以用於在插值語法 {{ }} 或 v-bind 指令中對數據進行處理，並將處理後的數據呈現在頁面上。過濾器通常用於格式化文本、日期、數字等數據，以便更好地滿足頁面的需求。
以下為過濾器的基本用法：
<!-- 差值語法中 -->
{{ data | filterName }}
<!-- v-bind中 -->
<div v-bind:attribute="data | filterName"/>
data 為要格式化的數據filterName 為過濾器的名稱，用於指定要應用的過濾器函數以下示範自定義過濾器的方式：
Vue.filter('uppercase', function(value) {
if (!value) return '';
return value.toString().toUpperCase();
});
我們建立了一個叫 uppercase 的過濾器，其能將字串轉為大寫。
接著我們就能使用此過濾器：
<p>{{ message | uppercase }}</p>
也可以一次插入多個過濾器：
Vue.filter('uppercase', function(value) {
if (!value) return '';
return value.toString().toUpperCase();
});
Vue.filter('reverse', function(value) {
if (!value) return '';
return value.split('').reverse().join('');
});
<div>{{ message | uppercase | reverse }}</div>
今天介紹了 Vue 模板語法中的差值語法，讓我們可以輕鬆地動態渲染數據到 HTML 中。另外，我們也學習了過濾器的使用，使我們能在模板中格式化和處理數據，以滿足不同的頁面需求。今天學習到的內容都能夠幫助我們更靈活地操作數據和呈現內容。明天也將繼續介紹模板語法中的另一部分—指令，那我們就明天見囉～
iThome鐵人賽
看影片追技術