目錄
1、MVVM模式
- vue是一個很火的js MVVM庫，它是數據驅動和組件化的思想構建的。數據驅動，無須操作DOM，將DOM和數據綁定起來，一單綁定，DOM和數據保持同步，也就是雙向數據綁定。
- mvvm 是model view viewModel的簡寫，viewModel是vue的核心
- 使用vue的過程就是定義mvvm各個組成部分的過程
- 定義view(視圖)
- 定義model（數據）
- 創建一個vue實例（viewModel）,他用於連接view和model（實例）
2、v-if，v-else,v-else-if
v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素，不符合v-if條件的，就不會出現在dom中，不會被渲染到html中，後面跟着的v-else,v-else-if也不會被渲染- expression是一個返回布爾值的表達式，也可以是一個布爾屬性。
- v-if可以綁定在html元素上，也可以在template元素上使用v-if條件渲染分組。
- v-else必須跟在v-if或者v-else-if後面否則他不會被識別
1、語法：
v-if="expression"
2、直接綁定在html上：
<h1 v-if="age>=20">{{age}}</h1>
3、放在template元素上：
<template v-if="[1,2,3].length>5 ">
<div class="red">
呵呵哈哈哈或
</div>
</template>
4、v-if和v-else,v-else-if例子
<div v-if="type==='A'">
A
</div>
<div v-else-if="type==='B'">
B
</div>
<div v-else-if="type==='C'">
C
</div>
<div v-else>
Not A、B、C
</div>
3、v-show,v-else,v-else-if
- 另外一個用於根據條件展示元素的選項，用法大致與v-if一致。
- 唯一不同的是，v-show屬性元素會渲染並保留在dom中，只是簡單的切換元素的css屬性display.
- 如果元素使用了v-show，後面跟着這使用的v-else,v-else-if也在被渲染在DOM中，
- v-else必須跟在v-if或者v-else-if後面否則他不會被識別
4、v-on指令
v-on指令用於給監聽DOM事件，比如click事件- v-on有兩種調用方式：綁定一個方法（讓事件指向方法的引用）；使用內聯語句
<div id="vueTpl"> <p><input type="text" v-model="message"></p> <p> <!--click事件直接綁定一個方法--> <button v-on:click="open">open</button> </p> <p> <!--click事件使用內聯語句--> <button v-on:click="say('Hi')">Hi</button> </p> <p> <!--click事件簡寫--> <button @click="say('Hi')">Hi</button> </p> <p> <!--click事件傳遞參數，一個參數--> <button @click="fun1('single')">Hi</button> </p> <p> <!--click事件傳遞參數，兩個參數--> <button @click="fun2('single','20')">Hi</button> </p> <p> <!--click事件傳遞參數，當前事件對象,可以獲取當前元素，對元素做處理--> <button @click="fun3($event)">Hi</button> </p> <p> <!--click事件傳遞參數，參數變量，當前參數是vue實例裏面的數據屬性 item.name假如是vue對象屬性--> <button @click="fun4(item.name)">Hi</button> </p> </div> <script> // 創建一個 Vue 實例或 "ViewModel" // 它連接 View 與 Model var vm=new Vue({ el: '#vueTpl',//vm實例掛載再id爲vueTpl的html元素上 data: {//這是model msg:'hello word' }, method:{ open:function(){ alert(this.msg);//this vm實例 }, say:function(msg){ alert(msg); }, fun1:function(val){ alert(val); }, fun2:function(val,val2){ alert(val1+val2); }, fun3:function(event){ var obj=event.currentTarget;//當前元素，obj是DOM對象 }, fun4:function(val){ alert(val); } } }) </script>
5、v-bind指令
- 屬性綁定,v-bind:title可以簡寫成:title
- v-bind指令可以再其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是html元素的屬性，例如：v-bind:class v-bind:src等等
-
動態地綁定一個或多個特性，或一個組件 prop 到表達式。
-
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
-
沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。
-
綁定計算屬性，計算屬性特性：只有被綁定的狀態值發生變化時，則計算屬性的值纔會重新計算得出最新結果，因爲計算屬性會緩存計算結果。通過修改計算屬性
computedClsObj綁定的狀態值，可以觸發計算屬性重新計算值，從而觸發 UI 更新顯示。 -
綁定數組：綁定數組的時候，數組元素可以是普通類型，如果需要綁定狀態值來決定是否使用樣式，則可以用三元符表達式最後取結果的值，也可以直接指定元素爲對象。
-
綁定函數返回值
-
<!-- 綁定一個屬性,定義樣式 --> <span class="progress" v-bind:style="{width:list.percent+'%'}"></span> <!-- 綁定一個屬性,把vue數據賦值給自定義屬性 --> <div v-bind:data-code="list.code"></div> <!--數據不能直接展示，需要前端處理的時候，定義一個過濾器進行數據處理，initData方法名--> <input type="text" v-bind:value="list.coverageYear | initData" > <div v-bind:class="index==0? 'weui-cell__ft down': 'weui-cell__ft' "></div> <!--循環item.children，data-index的值等於第一循環的index索引，加上當前對象的索引，中間有個‘g’字符串，區分 --> <div v-for="(subItem,subIndex) in item.children" v-bind:data-sikeness="subItem.lable" v-bind:data-index="index+'g'+subIndex" > <!-- 綁定一個屬性 -,class值爲card1,card2--> <div v-for="(item,index) in page2Data.env_info" v-bind:class="'swiper-slide card'+(index+1)" ></div> <!--傳遞多個參數，參數之間以逗號分隔--> <a class="weui-cell download" v-bind:href="item.url,item.fileUrl | dealUrl" v-if="item.url.indexOf('pdf')>=0" v-for="item in list"></a> <!--綁定多個class,active對應的class名稱--> <h1 :class="[active,active2]">{{msg}}</h1> <!--綁定多個style--> <h1 v-bind:style="[more]">{{msg}}</h1> <!-- 綁定字面量對象，class是active,根據isActive的值來決定是否添加樣式active--> <div id="test" v-bind:class="{ active: isActive }">哈哈</h1></div> <!--綁定計算屬性--> <div id="test" class="test" v-bind:class="computedClsObj">哈哈</div> <!--綁定數組，普通數組--> <div id="test" v-bind:class="[active,active1]">哈哈</div> <!--綁定數組，三元操作符--> <span v-bind:class="list.age>'18'?'s1 f30 red':'s1 f30 blue'">{{list.age}}</span> <!--綁定函數返回值--> <span :style="{background:!flag?deep:BackType(sign.status)}">{{list.age}}</span> </div> <script> var vm=new Vue({ el:'#vueTpl', data:{ msg:'hello world', active:'red', active2:'bolder', more:{ background:"yellow", color:"red" }, isActive:true,//顯示class,false就不顯示class error:null }, filters:{ initData:function(val){ if(val) return val.split(',')[0]; }, dealUrl:function(val1,val2){ //對val1 val2進行處理 return val1+val2 } }, computed:{ computedClsObj:function(){ return{ active:this.isActive && this.error, 'text-danger':this.error && this.error.type==='fatal' } } }, methods:function(){ BackType:function(status){ if(status=='1') return '#000'; else if(status=='2') return '#fff'; } } }); </script>v-bind指令總結：綁定樣式方式
-
類名 v-bind:class="focus"
-
類名數組 v-bind:class="['focus','shine']"
-
樣式對象 v-bind:class="{'focus':true/false,'shine':true/false}"，這種方式會根據樣式名來作爲鍵的值來決定是否採用，如果爲false,就不顯示樣式
-
對象數組 v-bind:class="[{'focus':true},'shine':false]"
-
綁定內聯樣式對象形式：v-bind:class="{background:'red'}"
-
數組形式：v-bind:style="[{background: 'red'}, {fontSize: '22px'}]"
6、v-model雙向數據綁定
7、計算屬性與偵聽器
- computed：fullname屬性，根據firstname,lastname屬性計算而來，當firstname,lastname的值不改變的時候，fullname會上線上一個緩存的值
- watch:偵聽器，偵聽一個值的變化，檢測某個數據或者計算屬性發生變化，在偵聽器裏面寫自己的業務邏輯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue基礎</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname">
名：<input type="text" v-model="lastname">
<div>{{fullname}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:'',
lastname:'',
count:0
},
computed:{//計算屬性
fullname:function(){
return this.firstname+' '+this.lastname;
}
},
watch:{//偵聽器
fullname:function() {
this.count++;
}
}
})
</script>
</body>
</html>
8、v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue基礎</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<p>循環的時候加個key值，可以提高性能</p>
<ul>
<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in list" :key="index"> {{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
list:[1,2,3,4]
}
})
</script>
</body>
</html>