版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38454165/article/details/82590158
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>绑定后，在js中对数据的修改会动态的改变视图中的显示。
要想让视图中修改影响到js中的数据，需要双向绑定v-model。
7. 事件处理
<div id="app">
<!-- 格式： v-on:事件名
简化写法： @事件名
还可以实现参数传递
-->
<input type="button" value="点我" v-on:click="abc(50)">
<input type="button" value="点我" @click="abc(100)">
<input type="submit" value="注册" @click="submit()">
</div>
<script>
var vue = new Vue({
el:"#app",
data: {
},
methods: {
abc: function(i){
console.log("点击了按钮", i);
}，
submit:function(){
//阻止表单提交事件
event.preventDefault();
}
},
}
});
</script>8. 双向绑定
v-bind:属性名 只能实现单向的绑定：模型的修改能够立刻反应到视图，但视图的修改不能影响模型
v-model:属性名 能够实现双向绑定：不仅有v-bind的功能，而且视图的修改也能影响模型了
扫描二维码关注公众号，回复：
3116637 查看本文章
