如何用Vue.js写出第一个程序？
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教程）
<!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>
更多Vue.js相关技术文章，请访问Vue.js答疑栏目进行学习！
以上就是如何用Vue.js写出第一个程序？的详细内容，更多请关注易知道|edz.cc其它相关文章！
