vue框架-----"响应式"框架。
视图
1.由{{}}占位， 匹配的是模型数据(存储于data:{})的属性名称
2.每个页面要创建一个Vue实例
3.el对应的dom元素，把数据和视图结合在一起
4.计算属性computed，对应一个函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">{{nameReverse}}</div>
<script>
var vue = new Vue({
data: {
name: "hello, world"
},
el:"#app",
computed: {
nameReverse : function(){
return this.name.split("").reverse().join("");
}
});
</script>
</body>
</html>
v-for 循环指令
<div id="app">
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
<p v-for="(p,i) in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
list:[
{name:"商品1", price:3000.00, img:"图片名1.jpg"},
{name:"商品2", price:4000.00, img:"图片名2.jpg"},
{name:"商品3", price:2000.00, img:"图片名3.jpg"}
]
}
});
</script>
v-if 条件指令：条件不成立视图上不会有这个标签
<div id="app">
<table border="1" width="100%" v-if="list.length>0">
<tbody>
<tr v-for="(p,i) in list">
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td>{{p.img}}</td>
</tr>
</tbody>
</table>
<span v-else>物品已售罄</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
list:[
{name:"商品1", price:3000.00, img:"图片名1.jpg"},
{name:"商品2", price:4000.00, img:"图片名2.jpg"},
{name:"商品3", price:2000.00, img:"图片名3.jpg"}
]
}
});
</script>
v-show 指令：条件不成立时，标签根本不会出现，隐藏了标签
绑定属性
1.v-bind:单向绑定：视图的修改不影响模型
格式：v-bind:属性名="变量"
简化写法：:属性名="变量"
2.v-model:双向绑定：视图的修改影响模型
7. 事件处理
格式：v-on:事件名
简化写法：@事件名