共计 1060 个字符，预计需要花费 3 分钟才能阅读完成。
总结
使用三步曲
- 在 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>
正文完