計算屬性、事件綁定、條件判斷、遍歷循環
計算屬性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><div id="app"><h3>用戶信息</h3><div >姓名：{{userInfo.name}}</div><div >性別：{{userInfo.sex}}</div><div >性別：{{getSexLable}}</div><!-- 這個表示函數的調用 [Vue warn]: Error in render: "TypeError: getSexLable2 is not a function"報錯 其實這個 getSexLable 在Vue內部像是一個方法，但不是一個方法func--><!-- <div >性別：{{getSexLable2(userInfo.sex)}}</div> --><!--重點分析：第一步getSexLable3這個前面部分會先去調用計算屬性，這個時候會返回一個我們聲明的匿名函數體，那么我就可以直接拿來調用，因為我返回的是function所以我才能夠通過（）括號調用函數的形式傳參等執行--><div >性別：{{getSexLable3(userInfo.sex)}}</div></div></body><script>// 后端數據庫一般存 0 1 代表男 女 Vue有專門的東西可以計算屬性將數據做一個轉換var s=new Vue({el:"#app",// 數據存放區data(){return{// 現在有兩份數據 用戶的基本信息userInfo:{name:"隔壁",sex:'0'},// 性別字典值 業務層面上這種值不會變，我如果要的話我找它拿就行了sexDict:[{code:'1',label:'男'},{code:'0',label:'女'}],name:'xxx'}},// 計算屬性computed:{// 這是一個函數的形式 es6的增強語法。然后我們可以把這個方法名當做是變量名去使用getSexLable(){// 簡單使用 // 在這里我只知道一份信息，在Vue實例中 除了data外 ，訪問別的區域的時候，需要帶上this// 但是這種Switch方法只能適應很小很小的場景 擴展能力差，并不是那么好用 但也是一種方式switch(this.userInfo.sex){case '1':return '男';break;case '0':return '女';break;}return '未知';},//該方法我希望它能夠傳值 ,所以該方法不可取getSexLable2(sexCode){console.log('the people`s sex is'+sexCode);},// 因為上面我這個方法行不通那么就 return一個function(){} 然后就好比在調用一個函數// 必須要有返回值getSexLable3(){return function (sexCode) {// 然后我們只根據這個code進行判斷 無需再this.通過區域去拿值。我無需再關心我內部實現的邏輯怎么樣，我只需要調用傳值// 開發層級上經常用switch (sexCode) {case '1':return '男';break;case '0':return '女';break;} }}// 記住不僅該計算屬性有這樣的方法 而且它還有緩存的效果，每次監聽到傳入值變化的時候，會去對比前一次return的值，// 如果說相同就不會再去更新頁面上的內容，可以達到減少開銷的效果// 但是如果return 的是function可能會去重新計算 問題不大 開銷一點點罷了}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><div id="app"><!-- 我們vue中要綁定事件的話 就跟前面一節課一樣 聲明一個指令就行了 記住函數要在js里面聲明.記住不傳參可以不用寫參數 --><button v-on:click="handler">按鈕</button><!-- 以后都用下面這種寫法 然后click等號右邊可以是邏輯代碼 --><button @click="num++">{{num}}</button><!-- 可以傳參 $event：如果我們要用event建議通過參數的形式傳遞然后直接打印。是關鍵字。正常不會失效，也沒有什么情景去拿事件對象--><button @click="handler(1,2,3,$event)">按鈕</button><!-- -------------------------------------------------- --><!-- 條件判斷 補充我們雖然學過屬性綁定 但是我們不一定都通過事件的綁定去拿值，只是說有些變量需要通過綁定才拿到值采取，就是說這個值是變化的才去綁定比如father我就是固定好的屬性值所以無需再去綁定 什么的，有點多此一舉的行為--><!-- 以前我們父子級別中同樣的事件行為 當孩子點擊的時候 父親也會觸發 --><div class="father" style="border: 1px solid black; " @click="log">父親<!-- 直接點stop就行了 --><div class="child" style="border: 1px solid black;" @click.stop="log">孩子</div></div></div>
</body>
<script>var s =new Vue({el:"#app",data(){return{num:0}},// 聲明一個Methodsmethods:{handler(...rest){console.log(event);console.log(event.target);// vue的事件里面 this 不指向事件源 永遠指向Vue實例對象// 如果非要獲取事件源DOM可以通過事件的target屬性console.log(this.num);console.log('jsikdsds');// 參數 console.log(rest);},log(){console.log('dont touch me again OK??????' );}}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><div id="app"><!-- 我可以通過條件去判斷該標簽的顯示和隱藏 讓用戶看起來還是一樣的效果 --><div class="sex"><!-- 這個意思是如果sex等于1我就返回男 否則就返回女 if-else這個系列是在做節點操作 刪除創建 --><!--v-if 右邊只要有值就行 會自動轉為 bool類型 比較方便 --><span class="man a1" v-if="userInfo.sex==2" @click="handler">男</span><!-- 記住else之一塊 不是說不會顯示 而是不會被創建 --><span class="woman a2" v-else @click="handler">女</span><!-- 優化先取個類名 --></br><!-- 我們有些標簽是經常需要顯示和隱藏的 如果頻繁的進行節點刪除和創建 對瀏覽器的開銷是挺大的 --><!-- 所以有個指令是v-show 是通過css的display：none來控制的--><span class="man a3" v-show="userInfo.sex==1" @click="handler">男</span><!-- 記住else之一塊 不是說不會顯示 而是不會被創建 --><span class="woman a4" v-show="userInfo.sex==0" @click="handler">女</span><!-- 頁面頻繁切換顯示隱藏 推薦使用v-show 如果是一些權限控制系統推薦使用v-if --><!-- 剛剛在控制臺通過document.querySelector()發現 a1能被選到 但是 a2為空；a3,a4都能被選到（這樣是很危險的）只要節點存在就可以通過控制臺或者外掛一個腳本 。所以權限控制的推薦使用v-if--></div></div></body>
<script>var s=new Vue({el:"#app",data(){return{userInfo:{sex:'1'}}},methods:{handler(){console.log('xxxxxxxxxxxxxxxxxxxxxxxxxx');}}})
</script>
</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><script src="./vue.js"></script>
</head>
<body><!-- Vue是跟著數據走的記住// 我們可以遍歷循環出數據來 --><div id="app"><h1>遍歷數組（常用）</h1><!-- v-for 的語法比較特殊 item：表示當前的遍歷項 具有局部作用域。因為我這里產生了遍歷項 text找不到它的遍歷項然后就去找data里面--><div class="card" v-for="item in cardList">{{item}}{{text}}</div><!-- 遍歷數組對象 Vue能夠把對象轉成文本顯示 我如果要用值直接. 一般都是通過該方式--><div class="pop" v-for="item in peopList">{{item.name}}</div><!-- 默認第二項是獲取下標 可以省略掉-->·<div class="pop" v-for="(item,index) in peopList">{{item.name}}{{index}}</div><!-- 遍歷字符串 --><div class="str" v-for="charone in text">{{charone}}</div><!-- 遍歷數字 --><div class="number" v-for="(n,index) in 5">{{n}}</div><div>------------------------------------</div><!-- 遍歷對象 記住 遍歷的是每一個鍵的值 正常開發這個也常用牢記 遍歷對象這個是鍵值對不是下標--><div class="obj" v-for="(ob,index) in bro">{{ob}}{{index}}</div><!-- 當使用`v-for`指令時，需要在該標簽上寫上`key`屬性，并且理想的 key 值是每項唯一，以便vue實例能跟蹤每個節點的身份，從而重用和重新排序現有元素。通常會使用屬性綁定，對其賦值；不建議使用`index`值 --><!-- 遍歷對象 記住 遍歷的是每一個鍵的值 正常開發這個也常用牢記 遍歷對象這個是鍵值對不是下標每一個v-for 寫一個key 不能被定死 盡量不要用index 這樣會導致代碼執行完會有很多key都是相同的所以寫v-for記得帶上key 有些節點 因為v-for是遍歷那些數組 串聯出來的節點 下一次數組如果更新，vue會檢測到數據變化會重新遍歷一次 有些節點數據沒變 你給了key Vue抓到之后 可以減少一些沒有必要的重復遍歷 提高性能 減少一些奇怪的bug 估計不會出現--><div>------------------------------</div><div class="obj" v-for="(ob,index) in bro" :key="ob+index">{{ob}}{{index}}</div></div></body><script>const s=new Vue({el:"#app",data(){return{cardList:[1,2,3,4,44],peopList:[{name:'zs',age:'12'},{name:'ls',age:'12'}],text:'hello world',bro: {name:"xiaomi",price:'1222'}}}})// 數組檢測更新 Vue會捕捉到數據的變化 然后重新遍歷數組 新增一項 Vue重寫了push 自動更新頁面上的內容 必須用Vue的setTimeout(() => {// s.peopList.push({name:"kk",age:'13'})// 通過這樣的方式改變值 Vue是不會更新的視圖上 無法被Vue捕捉并更新到視圖上s.cardList[0]=9// 提供了全局的一個方法 第一個填我要更新的數據目標 第二個填下標 第三個填我要更新的值 三秒鐘自己變了 ￥set一定能夠保證數據的變化和視圖的變化s.$set(s.cardList,0,10000)}, 3000);
</script>
</html>
)
/三路快排-快速選擇-215,11,560,21,128,20,121)
繪制六角網格碼)
