初学Vue的写法，发现Vue是真的非常方便，如果说Jquery是简化了dom操作，那Vue就是封装了dom，通过数据绑定进行获取数据，大大简化了开发中js获取前台数据的流程和操作。
下面是我的第一个Vue示例用到的知识。
1、v-model 绑定数据模型
2、v-bind 绑定数据和元素属性
3、v-on:click 绑定点击时间
4、v-if 选择判断
5、v-for 循环
html的标签元素一定要放到一个大的div里面，设置id属性，然后Vue在js中创建对象的时候会使用，并且获取data()数据，并执行method的方法。
下面是我的实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
{{username}}
<br><a v-bind:href="url">百度</a>
<br><input type="button" value="按钮" v-on:click="show()">
<div v-if="count==3">div1</div>
<div v-else-if="count==4">div2</div>
<div v-else>div3</div>
<div v-show="count==3">div4</div>
<input type="text" v-model="count">
<br>
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}} <br>
</div>
</div>
<script src="js/vue.js" ></script>
<script>
//创建vue对象
new Vue({
el:"#app",
data() {
return {
username: "",
url : "https://www.baidu.com",
count : 3,
addrs : ["北京","西安","上海"]
}
},
methods: {
show(){
alert("我被点击了")
}
}
});
</script>
</body>
</html>
页面展示
标签：username,Vue,addr,绑定,环境,js,data,搭建 From： https://www.cnblogs.com/wjingbo/p/16737080.html