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>