v-for指令渲染列表
#key
? ?預期：number | string | boolean | symbol
? ? key的特殊attribute主要用在Vue的虛擬DOM算法桨菜，在新舊nodes對比時辨識VNodes铣猩。如果不使用key,Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復用相同類型元素的算法伏嗜。而使用key時色迂，它會基于Key的變化重新排列元素順序华蜒，并且會移除key不存在的元素。
? ? 有相同父元素的子元素必須有獨特的Key。重復的Key會造成渲染錯誤。
? ? 最常見的組合? ?v-for :
<ul>
? ? ? ? <li? ? ?v-for=" item in items "? ? ?:key="item.id">{{ item }} </li>
</ul>
它也可以用于強制替換元素/組件而不是重復使用它系洛，當遇到如下場景可能會用到：1. 完整地觸發(fā)組件的聲明周期鉤子? 2. 觸發(fā)過渡
<transition>
? ? ? ? <span :key="text">{{ text }}</span>
</transition>
// 當text發(fā)生改變時俊性，<span>總是會被替換而不是被修改，因此會觸發(fā)過渡
綁定class的幾種方式
通過數(shù)據(jù)驅(qū)動的方式實現(xiàn)類的動態(tài)化綁定
綁定Style
計算屬性
在模板中綁定表達式是非常便利的描扯，但是它們實際上只用于簡單的操作定页。在模板中放入太多的邏輯會讓模板過重且難以維護
<div id="example">
????????????{{ message.split('').reverse().join('') }}
</div>
????在這種情況下，模板不再簡單和清晰绽诚。在實現(xiàn)反向顯示?message?之前典徊，你應該確認它。這個問題在你不止一次反向顯示 message 的時候變得更加糟糕恩够。因此卒落，官網(wǎng)也說過，任何復雜的邏輯處理蜂桶，都應使用計算屬性导绷。
<div? ? id="example">
? ? ? ? <p> message: "{{ message }}"</p>
? ? ? ? <p> computed message : " {{ reversedMessage }} "</p>
</div>
var? ? vm = new Vue({
? ? ? ? el : '#example',
? ? ? ? data ：{
? ? ? ? ? ? message : 'student'
? ? ? ? },
? ? ? ? computed ：{
? ? ? ? ? ? //計算屬性的getter
? ? ? ? ? ? reversedMessage ：function () {
? ? ? ? ? ? ? ? ? ? ? ? //? this 指向的是 vm 實例
? ? ? ? ? ? ? ? ? ? ? ? return? this.message.split(' ').reverse().join()
? ? ? ? ? ? }
? ? ? ? }
})
條件渲染
v-if?指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會在指令的表達式返回 truthy 值的時候被渲染屎飘。
必須是兄弟相連的元素，中間不能放其他的元素贾费！
在?<template>?元素上使用?v-if?條件渲染分組
????因為?v-if?是一個指令钦购，所以必須將它添加到一個元素上。但是如果想切換多個元素呢褂萧？此時可以把一個?<template>?元素當做不可見的包裹元素押桃，并在上面使用?v-if。最終的渲染結(jié)果將不包含?<template>?元素导犹。
<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>
????Vue 會盡可能高效地渲染元素唱凯，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非郴蚜。快之外磕昼，還有其它一些好處。例如节猿，如果你允許用戶在不同的登錄方式之間切換：
<template v-if="loginType === 'username'">
????<label> Username</label>
????<input placeholder="Enter your username">
</template>
<template v-else>
????<label>Email</label>
????<input placeholder="Enter your email address">
</template>
v-show
另一個用于根據(jù)條件展示元素的選項是?v-show?指令票从。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
不同的是帶有?v-show?的元素始終會被渲染并保留在 DOM 中。
v-show?只是簡單地切換元素的 CSS property?display滨嘱。
注意峰鄙，v-show?不支持?<template>?元素，也不支持?v-else太雨。
v-if與v-show的區(qū)別
v-if?是“真正”的條件渲染吟榴，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。
v-if?也是惰性的：如果在初始渲染時條件為假囊扳，則什么也不做——直到條件第一次變?yōu)檎鏁r吩翻，才會開始渲染條件塊兜看。
相比之下，v-show?就簡單得多——不管初始條件是什么仿野，元素總是會被渲染铣减，并且只是簡單地基于 CSS 進行切換。
一般來說脚作，v-if?有更高的切換開銷葫哗，而?v-show?有更高的初始渲染開銷。因此球涛，如果需要非常頻繁地切換劣针，則使用?v-show?較好；如果在運行時條件很少改變亿扁，則使用?v-if?較好捺典。
v-if與v-for不推薦同時使用
不推薦同時使用?v-if?和?v-for。
當?v-if?與?v-for?一起使用時从祝，v-for?具有比?v-if?更高的優(yōu)先級襟己。
組件與路由頁面
組件的定義：主要負責構(gòu)建用戶界面，包含 HTML JS Style
// 定義一個名為 button-counter 的新組件
?Vue.component('button-counter', {
????????data: function (){
????????????????????return {
????????????????????????????count: 0
????????????????????????}
????????????},
????????template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
????組件是可復用的 Vue 實例牍陌，且?guī)в幸粋€名字：在這個例子中是?<button-counter>擎浴。我們可以在一個通過?new Vue?創(chuàng)建的 Vue 根實例中，把這個組件作為自定義元素來使用
<div id="components-demo">
????????<button-counter></button-counter>
</div>
new Vue({
????????el: '#components-demo'
})
因為組件是可復用的 Vue 實例毒涧，所以它們與?new Vue?接收相同的選項贮预，例如?data、computed契讲、watch仿吞、methods?以及生命周期鉤子等。僅有的例外是像?el?這樣根實例特有的選項捡偏。
data必須是一個函數(shù)
當我們定義這個?<button-counter>?組件時唤冈，你可能會發(fā)現(xiàn)它的?data?并不是像這樣直接提供一個對象：
data: {
????????count:0
}
取而代之的是，一個組件的?data?選項必須是一個函數(shù)银伟，因此每個實例可以維護一份被返回對象的獨立的拷貝：
data:function(){
????return{
????????count:0
????????}
}
如果 Vue 沒有這條規(guī)則务傲，點擊一個按鈕就可能會像如下代碼一樣影響到其它所有實例，會共享同一個對象枣申。
路由頁面
用于操作頁面的跳轉(zhuǎn)實現(xiàn), 在uniapp中售葡，放在pages里面頁面，都叫路由頁面忠藤，同時路由頁面必須有注冊在pages.json中挟伙。
路由的功能：是框架統(tǒng)一管理，需要在pages.json中配置每個路由頁面的路徑及頁面樣式。類似小程序在app.json中配置頁面路由一樣尖阔，所以在uni-app的路由用法與Vue-Router方式管理路由不同贮缅。
路由的跳轉(zhuǎn)：uni-app有兩種頁面路由跳轉(zhuǎn)方式：1.使用navigator組件跳轉(zhuǎn)? ? 2.調(diào)用API跳轉(zhuǎn)
頁面棧：框架以棧的形式管理當前所有的頁面，當發(fā)生路由切換的時候介却，頁面棧的表現(xiàn)如下：
路由方式????????????????????????????????頁面棧表現(xiàn)????????????????????????????????????????觸發(fā)時機
初始化? ? ? ? ? ? ? ? ? ? ????????????? ?新頁面入棧? ? ? ? ? ? ? ? ? ? ? ? ? ? ? uni-app 打開的第一個頁面
打開新頁面? ? ? ? ? ? ? ? ? ? ? ? ? ? 新頁面入棧????????????????????????調(diào)用 API ??uni.navigateTo??谴供、使用組件 ?<navigator open-type="navigate"/>
頁面重定向????????????????當前頁面出棧，新頁面入棧? ? ? ? ? 調(diào)用 API ??uni.redirectTo??齿坷、使用組件??<navigator open-type="redirectTo"/>
頁面返回? ? ? ? ? ? ? ?頁面不斷出棧桂肌，直到目標返回頁? ? ? ? 調(diào)用 API ?uni.navigateBack? ?,使用組件?<navigator open-type="navigateBack"/>?、? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用戶按左上角返回按鈕永淌、安卓用戶點擊物理back按鍵
Tab 切換????????????頁面全部出棧崎场，只留下新的 Tab 頁面? ? 調(diào)用 API ?uni.switchTab? 、使用組件??<navigator open-type="switchTab"/>? 遂蛀、用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?戶切換 Tab
重加載????????????????頁面全部出棧谭跨，只留下新的頁面? ? ? ? ? ? 調(diào)用 API ?uni.reLaunch? 、使用組件 ?<navigator open-type="reLaunch"/>
定義一個list.vue組件
組件的使用步驟：1從外部引入? 2. 注冊? 3. 使用在view中
uni.navigateTo(object):? 保留當前頁面李滴，跳轉(zhuǎn)到應用內(nèi)的某個頁面螃宙，使用 uni.navigateBack 可以返回到原來的頁面
<template>
? ? <view>
? ? ? ? ? ? <h3>自定義頁面</h3>
? ? </view>
</template>
<script>
? ? ? ? export? default {
? ? ? ? ? ? ? ? data () {
? ? ? ? ? ? ? ? ? ? ? ? return {}
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? ? ? ? ? onLoad() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //編程式導航，通過路徑所坯，實現(xiàn)頁面的跳轉(zhuǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? uni.navigateTo({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url : '/pages/list/list'
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
}
<style>
</style>
? ??????????
然后操作路由去實現(xiàn)頁面的跳轉(zhuǎn)
注：如果頁面沒有發(fā)生跳轉(zhuǎn)污呼，可能需要重新編譯一下，可能是出現(xiàn)了緩存包竹。
