总结

使用三步曲

在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>

文章版权归作者所有，未经允许请勿转载。

THE END