一：首先 vue的雏形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
</div>
</body>
<script>
new Vue({
el:"#box", //这是个选择器，可以是id名字，class名字，也可以是body
data:{ //数据
msg:"hellow vue"
}
})
</script>
</html>
常用指令:
指令：扩展html 标签功能，属性
1.v-model
一般用在表单元素上（input） 实现双向数据绑定
<div id="box">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}}
</div>
<script>
new Vue({
el:"#box",
data:{
msg:"hellow vue"
}
})
</script>
2.循环 v-for
v-for="name in arr";
v-for="name in josn"
v-for="(k,v) in json"
*有重复数据时，会报错，用 track-by="$index/userId" 提高循环性能
<div id="box">
<ul>
<li v-for="value in arr" track-by="$index>{{value}}</li>
</ul>
<hr>
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#box",
data:{
arr:["apple","orange","bananr"],
json:{a:'apple',b:'orange',c:'banner'}
}
})
</script>
</html>
3.事件 v-on:click /mouseout /mouseover /mousedown /dblclick...="函数"
注:v-on:click可以简写成 @click
//点击按钮在数组后面添加potomo
<div>
<input type="button" v-on:click="add()">
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
new Vue({ el:"#box", data:{//数据 arr:["apple","orange","bananr"], json:{a:'apple',b:'orange',c:'banner'} }, methods:{//方法 add()
{ this.arr.push("Peach") } } })
4.v-show=true/false
<div id="box">
<input type="button" value="点击" v-on:click="a=false">
<div style="100px;height:100px;background:red;" v-show="a">
</div>
</div>
</body>
<script>
new Vue({
el:"#box",
data:{
a:true
}
})
</script>
5.在vue里绑定属性用 v-bind
v-bind:src 简写成 :src
<script> window.onload=function(){ new Vue({ el:"#box", data:{ url:"https://www.baidu.com/img/bd_logo1.png" }, methods:{ }, }) } </script> </head> <body> <div id=box> <img v-bind:src="url" alt=""> </div>