1, 首先引用 vue.js
新建 html 文档 , 然后引入 vue.JS 的 CDN 地址 https://unpkg.com/vue
2, 在 body 中插入 id 为 firstVue 的 div
3, 使用 v-model 将 input 的值和变量 inputNum 进行绑定
4, 给 button 添加点击事件 add
5, 新建 vue 实例, el 属性添加 #firstVue, 用来渲染 dom
6,data 中填写 inputNum 初始变量
7,methods 声明周期中添加 add 事件, 完成计数.
这样, 一个简单的 vue 程序就完成了.(相关课程推荐: Vue.JS 教程 https://www.html.cn/jskuangjia/vue/ )
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- <script type="text/javascript" src="https://unpkg.com/vue">
- </script>
- </head>
- <body>
- <div id="firstVue">
- <p>
- <input type="number" v-model="inputNum" />
- <button @click="add()">
- ADD
- </button>
- </p>
- <p>
- {{total}}
- </p>
- </div>
- <script type="text/javascript">
- new Vue({
- el: '#firstVue',
- data: {
- inputNum: 0,
- total: 0
- },
- methods: {
- add: function() {
- this.total = parseInt(this.total) + parseInt(this.inputNum);
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.css88.com/qa/vue-js/16083.html