<!-- VUE 開發版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- VUE 發行版 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
基本的 Vue 網頁架構如下：
<!DOCTYPE html>
<html>
<head>
<!-- 採用 Unicode utf-8 編碼 -->
<meta charset="utf-8" />
<!-- 設定寬度自動符合手機螢幕寬度 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- VUE 開發版 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
<title></title>
</head>
<body>
<!-- VUE DOM 區塊，應用程式ID為 app -->
<div id="app">
</div>
<script>
// 建立 Vue 物件
var vm = new Vue({
el: '#app',
data: { }
});
</script>
</body>
</html>
後續程式範例，請利用下列程式模板，將程式碼填入到<body></body>區塊内，並以瀏覽器執行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
<title></title>
</head>
<body>
<!-- 後續範例請複製到這後才能正常執行 -->
</body>
</html>
Vue主要透過模板的語法，以聲明式的將數據渲染進HTML 的 DOM 系統，下例中，在data物件中宣告了變數 msg，再透過Vue的綁定功能將内容渲染到<h1>元素内。
<div id="bide-1">
<h1>Vue {{ msg }}</h1>
</div>
<script>
var vm = new Vue({
el: '#bide-1',
data: {
msg: '你好!'
}
});
</script>
如上例中，資料綁定最常見的形式就是使用雙大括號在文件中插值，當資料msg内容變動時，插值處的內容都會更新。上例也可以透過 v-text 或 v-html 指令來完成。兩者的差別在於 v-text會把字串中的html指令，當作是純文字處理：
<div id="bide-2">
<!--使用v-text，會把指令當文字-->
<h3 v-text="msg"></h3>
<!--使用v-html，會顯示斜體-->
<h3 v-html="msg"></h3>
</div>
<script>
var vm = new Vue({
el: '#bide-2',
data: {
msg: '<i>Vue 你好</i>'
}
});
</script>
使用v-bind指令可以讓 HTML屬性具有動態綁定的功能：
<div id="bide-3">
<!--使用 v-bind: 綁定 href 屬性-->
<a v-bind:href="url">動態網址綁定</a>
<!-- v-bind可以省略 -->
<a :href="url">動態網址綁定</a>
</div>
<script>
var vm = new Vue({
el: '#bide-3',
data: {
url: 'http://ewin.tw/app/vue'
}
});
</script>
在前面的例子中，一直都只綁定簡單的資料變數，實際上可以使用單一表達式的JavaScript，例如：
<div id="bide-4">
<!--依據option來決定綁定的網址-->
<a :href="option==2 ? url1 : url2">動態網址綁定</a>
</div>
<script>
var vm = new Vue({
el: '#bide-4',
data: {
option: 1,
url1: 'http://ewin.tw/app/vue',
url2: 'http://ewin.tw/app/python'
}
});
</script>
動態綁定中僅適合用於簡單的屬性或運算式，若要處理較複雜的屬性，可以透過計算屬性來達成。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="comput-1">
<!-- 使用計算屬性來顯示翻轉的字符 -->
{{ reversedMsg }}
</div>
<script>
var vm = new Vue({
el: '#comput-1',
data: {
msg: '123456'
},
// 計算屬性
computed: {
reversedMsg() {
return this.msg.split('').reverse().join('')
}
}
});
</script>
</body >
</html >
v-model指令可以用在表單輸入元素上創建雙向數據綁定，它會根據控件類型自動的雙向更新元素，VUE會負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
<div id="model-1">
<!--顯示 num-->
<div>數值：{{ num }}</div>
<!--透過 v-model 雙向綁定 num-->
<input type="number" v-model="num">
<!--透過事件呼叫 plus()更改 num-->
<button @click="plus">+1</button>
</div>
<script>
var vm = new Vue({
el: '#model-1',
data: {
num: 10
},
methods: {
plus: function () {
this.num++;
}
}
})
</script>
<div id="event-1">
<!-- -1 按鈕 -->
<button v-on:click="minus">-1</button>
<!-- 唯讀 input -->
<input type="text" v-model="num" readonly size="4">
<!-- +1 按鈕 -->
<button @click="plus">+1</button>
</div>
<script>
var vm1 = new Vue({
el: '#event-1',
data: {
num: 10
},
methods: {
minus: function() { this.num--; },
plus: function () { this.num++; }
}
})
</script>
Vue允許為v-on在監聽鍵盤事件時添加按鍵修飾符，例如在keyup事件後面加上 up 或 down 修飾符：
<div id="event-2">
<input type="text" v-model="year" readonly
@keyup.right="plus" @keyup.left="minus">
</div>
<script>
var vm2 = new Vue({
el: '#event-2',
data: {
year: 1970
},
methods: {
minus: function() { this.year--; },
plus: function () { this.year++; }
}
})
</script>