js框架 vue
1. 职责划分-MVVM
Model 模型 - 数据
View 视图 - html 标签,样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上
2. 入门例子
vue中的数据和页面上标签内容是'绑定'在一起的,模型数据发生了变动,页面视图也会相应变化。这种特性称之为`响应式`框架。
例如:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 视图, 是由两个{{}}占位,到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">{{name}}</div>
<script>
// 每个页面要创建一个Vue对象(实例)
var vue = new Vue({
// 模型数据存储于data之中,其中多个属性,可以配合{{}}进行显示
data: {
name: "hello, world"
},
// el 对应的dom元素,把数据和视图结合在一起
el:"#app"
});
</script>
</body>
</html>
注意:
1. 绑定时,要把一个统一的父标签与Vue对象进行绑定
2. 不要把Vue对象和html或body标签绑定,建议和一个div标签绑定
3.计算属性
`{{}}` 中的表达式可以进行简单的运算,例如:
<p>{{name.split("").reverse().join("")}}</p>
<p>{{age+1}}</p>
为了不要直接在视图执行这些过于复杂的计算,可以把这些计算的逻辑通过`计算属性`来表示例如:
```
<!-- 视图, 是由两个{{}}占位,到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">
<p>{{nameReverse}}</p>
<p>{{age+1}}</p>
<div>
<span>{{sex}}</span>
</div>
</div>
<script>
// 每个页面要创建一个Vue对象(实例)
var vue = new Vue({
// 模型数据存储于data之中,其中多个属性,可以配合{{}}进行显示
data: {
name: "hello, world",
age: 18,
sex: "男"
},
// el 对应的dom元素,把数据和视图结合在一起
el:"#app",
computed: {
/* 计算属性,对应一个函数,由普通属性计算而来 */
nameReverse : function(){
// this 代表vue对象
return this.name.split("").reverse().join("");
}
}
});
</script>
4. v-for 指令
<div id="app">
<!-- 指令 循环指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>
<script>
/*
[
{name:"商品1", price:3000.00, img:"图片名1.jpg"},
{name:"商品2", price:4000.00, img:"图片名2.jpg"},
{name:"商品3", price:2000.00, img:"图片名3.jpg"}
]
*/
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>
5. v-if 指令
条件成立,在视图上就显示此标签,否则视图上不会有这个标签
<div id="app">
<!-- 指令 循环指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
<table border="1" width="100%" v-if="list.length>0">
<tbody>
<!-- p代表数组中第i个元素,i是下标值-->
<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>
v-show 指令 根据条件决定表示是否显示,
与v-if的区别在于,条件不成立时,标签根本不会出现
v-show是条件不成立时,隐藏了标签
v-show不能配合v-else 使用6. v-bind 绑定属性
要实现标签属性的绑定,必须使用v-bind 指令
<table border="1" width="100%" v-show="list.length>0">
<tbody>
<!-- p代表数组中第i个元素,i是下标值-->
<tr v-for="(p,i) in list">
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<!-- {{}} 语法只能用来占位内容,不能作为标签的属性(特性)
要绑定标签的属性,需要使用 v-bind:属性名="变量"
简化写法(省略了v-bind):
:属性名="变量"
-->
<td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td>
<td><img width="110" :src=" 'images/' + p.img"></td>
</tr>
</tbody>
</table>
7. 事件处理
<div id="app">
<!-- 格式: v-on:事件名
简化写法: @事件名
还可以实现参数传递
-->
<input type="button" value="点我" v-on:click="abc(50)">
<input type="button" value="点我" @click="abc(100)">
</div>
<script>
var vue = new Vue({
el:"#app",
data: {
},
methods: {
abc: function(i){
console.log("点击了按钮", i);
}
}
});
</script>
8. 双向绑定
v-bind:属性名 只能实现单向的绑定:模型的修改能够立刻反应到视图,但视图的修改不能影响模型
v-model:属性名 能够实现双向绑定:不仅有v-bind的功能,而且视图的修改也能影响模型了