目錄
MVVM模式
- vue是一個很火的js MVVM庫，它是數據驅動和組件化的思想構建的。數據驅動，無須操作DOM，將DOM和數據綁定起來，一單綁定，DOM和數據保持同步，也就是雙向數據綁定。
- mvvm 是model view viewModel的簡寫，viewModel是vue的核心
- 使用vue的過程就是定義mvvm各個組成部分的過程
- 定義view(視圖)
- 定義model（數據）
- 創建一個vue實例（viewModel）,他用於連接view和model（實例）
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>
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後面否則他不會被識別
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>
v-bind指令
- v-bind指令可以再其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是html元素的屬性，例如：v-bind:class v-bind:src等等
-
動態地綁定一個或多個特性，或一個組件 prop 到表達式。
-
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
-
沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。
<!-- 綁定一個屬性,定義樣式 --> <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" > <!-- 綁定一個屬性，根據vue數據來顯示不同的class --> <span v-bind:class="list.age>'18'?'s1 f30 red':'s1 f30 blue'">{{list.age}}</span> <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> </div> <script> var vm=new Vue({ el:'#vueTpl', data:{ }, filters:{ initData:function(val){ if(val) return val.split(',')[0]; }, dealUrl:function(val1,val2){ //對val1 val2進行處理 return val1+val2 } } }); </script>