Vue.js学习第二天——MVVM、插值操作及绑定属性
- 什么是MVVM
Model–view–viewmodel，它是一种软件架构模式（其实我也不理解，大概就是数据和视图相分离吧）
- Vue中的MVVM
如上图，Model模型对视图View中的DOM进行事件监听，视图View中的DOM的数据与Model模型进行绑定。
- 插值操作
Mustache（胡子/胡须）语法，也叫双大括号语法{{ }} ，大括号中间不仅可以写变量也可以写简单表达式。
下面是一些常用的插值操作,总的script代码如下：
<script>
setTimeout(()=>{
const app = new Vue({
el: '#container',
data: {
message:'插值操作相关 v-once操作 只显示一次',
url: '<h1 style="color:red;">v-html操作 解析html</h1>',
name: '插值操作相关 v-text操作 不灵活',
age: '插值操作相关 v-pre操作 不解析',
cloak:'插值操作相关 v-cloak操作 不闪动'
}
})
},2000)
</script>
-
v-once：元素和指令只渲染一次，不会随着数据的改变而改变。
<h1 v-once>{{message}}</h1> -
v-html：可以解析HTML元素
<h1 v-html = 'url'></h1> -
v-text: 和{{}}功能类似，展示文本一般不用，因为不够灵活，会覆盖标签里面的内容
<h1 v-text = 'name'>aa</h1> -
v-pre: 不解析，原封不动的显示
<h1 v-pre>{{age}}</h1> -
v-cloak:不会闪动，在vue解析之前 div中会有此属性，解析之后，此属性消失
<h1 v-cloak>{{cloak}}</h1>
注：以上script标签加了延时函数，是为了让 v-cloak 的功能更好的展示
- 绑定属性
以上方法都是针对值而进行的改变，那么有没有一种是针对属性的呢，答案就是有的，就是 v-bind : 动态绑定 ，例如可以动态绑定 img 标签的 src 属性等等
有两种语法：
- 对象语法，即类的值是一个对象，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color:cyan;
}
.actives{
font-size: 10em;
}
</style>
</head>
<body>
<div id="container">
<p v-bind:class="{active:isClass,actives:isActives}">{{message}}</p>
<button v-on:click = 'change'>变色</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data:{
message:'hello',
isClass:false,
isActives:false
},
methods: {
change:function(){
this.isClass = !this.isClass;
this.isActives = !this.isActives;
}
}
})
</script>
</body>
</html>
- 数组语法，即类的值是一个数组，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color:cyan;
}
.actives{
font-size: 10em;
}
</style>
</head>
<body>
<div id="container">
<p :class="getClass()">{{message}}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:'#container',
data:{
message:'数组语法',
active:'active',
actives:'actives'
},
methods:{
getClass:function(){
return [this.active,this.actives];
}
}
})
</script>
</body>
</html>
v-bind的语法糖形式是省略前面的 v-bind，保留一个：
v-on的语法糖形式是把 v-on: 替换成 @
学习了以上内容，有一个案例需要实现 ：点击列表中的任意一项，使得那一项所在的li标签变色，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.change {
color: cyan;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li v-for='(attr,index) in movies' v-on:click='color(index)' :class='{change:index == status}'>{{attr}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data: {
movies: ['海王', '小黄人大眼萌', '海绵宝宝', '进击的巨人'],
status: 0
},
methods: {
color: function (index) {
this.status = index;
}
}
})
</script>
</body>
</html>
