總結
使用三步曲
- 在body節點定義一個html block 節點，並設置一個id值
- 使用script標籤加載vuejs sdk/框架
- 創建Vue.js vm實例，並綁定第一步定義的html block節點
示例
<!DOCTYPE html>
<html>
<head>
<title>A Vue.js Calculator</title>
<style>
p, input {
font-family: monospace;
}
p {
white-space: pre;
}
</style>
</head>
<body>
<!--第一步: 創建跟vuejs vm關聯的dom結點-->
<div id="app">
<!-- 注 v-model、v-text這些自定義的標籤屬性，vue框架內部分讀取與使用 js有提供接口可以獲取標籤屬性列表，別外瀏覽器解析到自定義標籤屬性不會報錯且會保存起來 -->
<p>x <input v-model="x"></p>
<p>y <input v-model="y"></p>
<p>---------------------</p>
<p>= <span v-text="result"></span></p>
</div>
<!--第二步：引入/加載遠程vue.js 框架-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--第三步: 在腳本代碼塊使用vuejs，新建一個vue wm/viewmodel實例，並綁定到上面id爲app的div節點-->
<script type="text/javascript">
function isNotNumericValue(value) {
return isNaN(value) || !isFinite(value);
}
var calc = new Vue({
el: '#app',
data: {x: 0, y: 0, lastResult: 0},
//計算屬性result，它依賴的屬性更新時，其判定的方法將會被調用
computed: {
result: function () {
let x = parseFloat(this.x);
if (isNotNumericValue(x))
return this.lastResult;
let y = parseFloat(this.y);
if (isNotNumericValue(y))
return this.lastResult;
this.lastResult = x + y;
return this.lastResult;
}
}
});
</script>
</body>
</html>