概述：一套用于構(gòu)建用戶界面的漸進(jìn)式框架流妻。

? vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用，vue的核心庫(kù)只關(guān)注視圖層笆制，易于上手且便于與第三方庫(kù)或已有項(xiàng)目進(jìn)行整合绅这。

VUE基礎(chǔ)概述

環(huán)境

想要使用vue有兩種方式：

• 直接在html文件的<script>中引入xur.js

  可以直接下載，或者使用CDN在辆。

  <!-- 帶有幫助信息的開(kāi)發(fā)環(huán)境版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <!-- 優(yōu)化大小速度的生產(chǎn)環(huán)境版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  

• 使用命令行工具：vue-cli

基本操作

首先证薇，vue其實(shí)就是一個(gè)js框架。

? 其精妙之處在于虛擬化了一個(gè)DOM對(duì)象匆篓，并在未加載html時(shí)就對(duì)該對(duì)象進(jìn)行虛擬操作浑度，等到加載后，該虛擬對(duì)象與真實(shí)的htmlDOM對(duì)象進(jìn)行了關(guān)聯(lián)鸦概，此時(shí)操作就會(huì)由真實(shí)DOM呈現(xiàn)箩张。

基礎(chǔ)渲染

文本插值：

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

綁定attribute

<div id="app-2">
  <span v-bind:title="message">
    鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
  </span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁(yè)面加載于 ' + new Date().toLocaleString()
  }
})
</script>

條件與循環(huán)

v-if

<div id="app-3">
  <p v-if="seen">現(xiàn)在你看到我了</p>
</div>
<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>

繼續(xù)在控制臺(tái)輸入 app3.seen = false窗市，你會(huì)發(fā)現(xiàn)之前顯示的消息消失了伏钠。

v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學(xué)習(xí) JavaScript' },
      { text: '學(xué)習(xí) Vue' },
      { text: '整個(gè)牛項(xiàng)目' }
    ]
  }
})
</script>

在控制臺(tái)里，輸入 app4.todos.push({ text: '新項(xiàng)目' })谨设，你會(huì)發(fā)現(xiàn)列表最后添加了一個(gè)新項(xiàng)目。

事件監(jiān)控器

v-on:***

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反轉(zhuǎn)消息</button>
</div>
<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

console輸出myapp5.btnDown = function(){this.btnMsg = '嘻嘻';}缎浇，則按下按鈕會(huì)變扎拣。

表單

Vue 還提供了 v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定素跺。

雙向綁定：修改message會(huì)修改表單內(nèi)內(nèi)容二蓝，修改表單內(nèi)內(nèi)容，會(huì)修改massage

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

組件化應(yīng)用構(gòu)建

組件系統(tǒng)是 Vue 的另一個(gè)重要概念指厌，因?yàn)樗且环N抽象刊愚，允許我們使用小型、獨(dú)立和通巢妊椋可復(fù)用的組件構(gòu)建大型應(yīng)用鸥诽。仔細(xì)想想商玫，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)：

2.png

組件：擁有預(yù)定義選項(xiàng)的 Vue 實(shí)例。(類似于javaBean：可重用組件)

注冊(cè)組件方式：

①<script>中創(chuàng)建組件

幾個(gè)要點(diǎn)：

• props：起著占位符的作用牡借，里面是占位符數(shù)組拳昌。

  傳值方式：

  • 在html使用組件時(shí)，開(kāi)始標(biāo)簽中使用 propName="" 來(lái)傳遞
  • 在html使用組件時(shí)钠龙，開(kāi)始標(biāo)簽中使用 v-bind:porpName="" 來(lái)傳遞炬藤。

• template：被調(diào)用時(shí)，顯示的內(nèi)容碴里。其內(nèi)容可以跟普通 html 標(biāo)簽完全一樣

• data：數(shù)據(jù)

• methods：函數(shù)方法

    <!-- 組件化應(yīng)用 -->
    <div id="app-7">
        <ol>
            <xixi v-for="fruit in fruits" v-bind:todo="fruit"></xixi>
            <button-counter title="①"></button-counter>
            <button-counter title="②"></button-counter>         
        </ol>
    </div>
    
    <script>
         Vue.component('button-counter',{
            props:['title'],
            template:'<button v-on:click="count++">{{title}}點(diǎn)了我{{count}}次</button>',
            data:function(){
                return{
                    count: 0
                }
            },
        })
                         
        Vue.component('xixi',{
            props:['todo'],
            template: '<li v-on:click="changeName()">{{todo.text}}</li>',
            methods: {
                changeName: function(){
                    this.todo.text = "荔枝";
                },
            }
        })
    </script>

實(shí)際模型概述

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

VUE實(shí)例

API 文檔

創(chuàng)建一個(gè)Vue實(shí)例

規(guī)范：

• 一個(gè)根 Vue 實(shí)例
• 可選的嵌套的可重用組件（也是 Vue 實(shí)例）

根實(shí)例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

數(shù)據(jù)與方法

? 當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建時(shí)沈矿，會(huì)將data對(duì)象的所有 property 加入到Vue 的響應(yīng)式系統(tǒng)中；當(dāng)某個(gè)屬性發(fā)生變化時(shí)咬腋，該系統(tǒng)會(huì)產(chǎn)生響應(yīng)羹膳，作用到視圖上就是更新為新的值。（雙向）

響應(yīng)式：

? 當(dāng)數(shù)據(jù)改變時(shí)帝火，視圖會(huì)進(jìn)行沖渲染溜徙。注意：僅當(dāng)存在于Vue實(shí)例的data對(duì)象中的屬性（數(shù)據(jù)）才是響應(yīng)式的。

一些小知識(shí)：

• 初始值：（以后可能會(huì)用到該數(shù)據(jù)犀填，先將其變成響應(yīng)式數(shù)據(jù)）

  data: {
    newTodoText: '',
    visitCount: 0,
    hideCompletedTodos: false,
    todos: [],
    error: null
  }
  

例外：Object.freeze(obj)

? 該語(yǔ)句會(huì)阻止對(duì)已有對(duì)象obj的修改蠢壹。所以該對(duì)象的屬性的響應(yīng)式功能會(huì)失效。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- 這里的 `foo` 不會(huì)更新九巡！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

Vue提供的實(shí)例

所有的new出來(lái)的Vue實(shí)例图贸，都繼承了Vue定義的property與方法；

語(yǔ)法：$屬性

如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個(gè)Vue定義的實(shí)例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個(gè)回調(diào)將在 `vm.a` 改變后調(diào)用
})

以后你可以在 API 參考中查閱到完整的實(shí)例 property 和方法的列表

Vue實(shí)例的生命周期鉤子

創(chuàng)建：

每個(gè)Vue實(shí)例被創(chuàng)建時(shí)冕广，都要經(jīng)過(guò)一系列的初始化過(guò)程：

• 設(shè)置數(shù)據(jù)監(jiān)聽(tīng)
• 編譯模板
• 將實(shí)例掛載關(guān)聯(lián)到DOM疏日，并在數(shù)據(jù)變化時(shí)更新DOM
• ...

在這個(gè)過(guò)程中，同時(shí)會(huì)運(yùn)行一些叫生命周期鉤子的函數(shù)撒汉。

作用：用戶可在不同階段添加自己的代碼沟优。如：

created會(huì)在Vue創(chuàng)建后，執(zhí)行

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實(shí)例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

生命周期鉤子：

• created
• mounted（已安裝睬辐、已掛載）
• updated
• destroyed

生命周期鉤子的this挠阁，指調(diào)用它的Vue實(shí)例。

注意：

不要在選項(xiàng) property 或回調(diào)上使用箭頭函數(shù)溯饵，比如
created: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())侵俗。
因?yàn)榧^函數(shù)并沒(méi)有 this，this 會(huì)作為變量一直向上級(jí)詞法作用域查找丰刊，直至找到為止隘谣，經(jīng)常導(dǎo)致
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之類的錯(cuò)誤。

生命周期圖示

1.png

模板語(yǔ)法

插值

文本

最常見(jiàn)格式：

• {{}}

  • "Mustache"（八字胡）語(yǔ)法啄巧，雙大括號(hào)中插入變量名

  ? 如：{{msg}}寻歧，顯示時(shí)會(huì)顯示msg這個(gè)屬性的值掌栅，且具有響應(yīng)式更新。

• v-once

  • 一次性的放置數(shù)據(jù)熄求，之后數(shù)據(jù)改變時(shí)渣玲，該插值內(nèi)容不會(huì)變。如：

    <span v-once>這個(gè)將不會(huì)變：{{msg}}</span>
    

原始 HTML

說(shuō)明：使用{{}}弟晚，里面的數(shù)據(jù)將被解釋為普通文本忘衍，而非 HTML 代碼。

如：

<!--假定msg='<b>你好</b>'-->
<div id="example">
    {{msg}}  //顯示的信息為：<b>你好</b>卿城，而非粗體你好
</div>

指令：

• v-html = "data"

  <p>
      使用雙括號(hào)：{{rawHtml}}   
  </p>
  <p>
      使用v-html指令：<span v-html="rawHtml"></span>
  </p>
  

注意：

你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)枚钓，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值瑟押，絕不要對(duì)用戶提供的內(nèi)容使用插值搀捷。

Attribute屬性

說(shuō)明：Mustache 語(yǔ)法不能作用在 HTML 標(biāo)簽屬性上，如果需要多望，可以使用v-bind指令

指令：

• v-bind:AttributeName = "data"

  <div v-bind:id="dynamicId"></div>
  

使用 JS 表達(dá)式

說(shuō)明：插值不僅包含普通的屬性鍵值嫩舟，還可以支持完整的 JS 表達(dá)式。

{{ number + 1 }}
{{ ok? 'yes':'no' }}
{{ message.split('').reverse().join('.') }}
<div v-bind:id="'list-' + id"></div>

限制：

只能包含單個(gè)表單怀偷，所以下面的例子不會(huì)生效：

<!-- 這是語(yǔ)句不是表達(dá)式 -->
{{ var a = 1 }}

<!-- 流控制也不會(huì)生效家厌，可以用三元表達(dá)式代替 -->
{{ if (ok) { return message } }}

注意：

模板表達(dá)式都被放在沙盒中，只能訪問(wèn)全局變量的一個(gè)白名單椎工，如 Math 和 Date 饭于。你不應(yīng)該在模板表達(dá)式中試圖訪問(wèn)用戶定義的全局變量。

指令

說(shuō)明：指令（Directives）指標(biāo)簽元素中帶有：v-前綴的特殊屬性维蒙。

職責(zé)：

預(yù)期職責(zé)：作為單個(gè) JavaScript 表達(dá)式（v-for是例外情況）掰吕，當(dāng)指令改變時(shí)，會(huì)響應(yīng)式地對(duì)整個(gè)標(biāo)簽起作用颅痊。如：

<p v-if="seen">現(xiàn)在看得見(jiàn)</p>

當(dāng)seen的值由true變?yōu)?code>false時(shí)殖熟，該DOM會(huì)被重新渲染，直接移除斑响。

參數(shù)

說(shuō)明：一些指令能夠接收一個(gè)"參數(shù)"吗讶，在指令名稱之后，以冒號(hào)表示恋捆。如：

<a v-bind:href="url">
    本鏈接的地址是：{{url}}
</a>

其可以接收從 Vue 掛載對(duì)象的屬性，已達(dá)到更復(fù)雜多樣的變化重绷。

動(dòng)態(tài)參數(shù)

2.6.0新增

說(shuō)明：

可以用方括號(hào)括起來(lái)的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)：

<!--
注意沸停，參數(shù)表達(dá)式的寫法存在一些約束，如之后的“對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約束”章節(jié)所述昭卓。
-->
<a v-bind:[attributeName]="url"> ... </a>

? 這里的 attributeName 會(huì)被作為一個(gè) JavaScript 表達(dá)式進(jìn)行動(dòng)態(tài)求值愤钾，求得的值將會(huì)作為最終的參數(shù)來(lái)使用瘟滨。例如，如果你的 Vue 實(shí)例有一個(gè) data property attributeName能颁，其值為 "href"杂瘸，那么這個(gè)綁定將等價(jià)于 v-bind:href。

對(duì)動(dòng)態(tài)參數(shù)的值的約束

動(dòng)態(tài)參數(shù)預(yù)期會(huì)求出一個(gè)字符串伙菊，異常情況下值為 null败玉。這個(gè)特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會(huì)觸發(fā)一個(gè)警告镜硕。

對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約束

動(dòng)態(tài)參數(shù)表達(dá)式有一些語(yǔ)法約束运翼，因?yàn)槟承┳址缈崭窈鸵?hào)兴枯，放在 HTML attribute 名里是無(wú)效的血淌。例如：

<!-- 這會(huì)觸發(fā)一個(gè)編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

變通的辦法是使用沒(méi)有空格或引號(hào)的表達(dá)式，或用計(jì)算屬性替代這種復(fù)雜表達(dá)式财剖。

在 DOM 中使用模板時(shí) (直接在一個(gè) HTML 文件里撰寫模板)悠夯，還需要避免使用大寫字符來(lái)命名鍵名，因?yàn)闉g覽器會(huì)把 attribute 名全部強(qiáng)制轉(zhuǎn)為小寫：

<!--
在 DOM 中使用模板時(shí)這段代碼會(huì)被轉(zhuǎn)換為 `v-bind:[someattr]`躺坟。
除非在實(shí)例中有一個(gè)名為“someattr”的 property沦补，否則代碼不會(huì)工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修飾符

修飾符 (modifier) 是以半角句號(hào) . 指明的特殊后綴瞳氓，用于指出一個(gè)指令應(yīng)該以特殊方式綁定策彤。例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

在接下來(lái)對(duì) v-on和 v-for等功能的探索中匣摘，你會(huì)看到修飾符的其它例子店诗。

縮寫

v- 前綴作為一種視覺(jué)提示，用來(lái)識(shí)別模板中 Vue 特定的 attribute音榜。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為 (dynamic behavior) 時(shí)庞瘸，v- 前綴很有幫助，然而赠叼，對(duì)于一些頻繁用到的指令來(lái)說(shuō)擦囊，就會(huì)感到使用繁瑣。同時(shí)嘴办，在構(gòu)建由 Vue 管理所有模板的單頁(yè)面應(yīng)用程序 (SPA - single page application) 時(shí)瞬场，v- 前綴也變得沒(méi)那么重要了。因此涧郊，Vue 為 v-bind 和 v-on 這兩個(gè)最常用的指令贯被，提供了特定簡(jiǎn)寫：

v-bind 縮寫

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 縮寫

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

注意：

? 它們看起來(lái)可能與普通的 HTML 略有不同，但 : 與 @ 對(duì)于 attribute 名來(lái)說(shuō)都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析彤灶。而且看幼，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中』仙拢縮寫語(yǔ)法是完全可選的诵姜，但隨著你更深入地了解它們的作用，你會(huì)慶幸擁有它們搏熄。

計(jì)算屬性和偵聽(tīng)器

計(jì)算屬性

說(shuō)明：對(duì)于模板內(nèi)（html）的表達(dá)式棚唆，會(huì)提供很多遍歷，但是其僅支持簡(jiǎn)單運(yùn)算搬卒，如果邏輯太復(fù)雜會(huì)難以維護(hù)瑟俭。

如：

<div id = "example">
    {{ message.split(''). }}
</div>

基礎(chǔ)例子

        <div id="reverse1">
            <p>消息："{{msg}}"</p>
            <p>消息："{{msgReverse}}"</p>
        </div>

        <script>
            var reverse1 = new Vue({
                el: "#reverse1",
                data:{
                    msg: "apple"
                },
                computed:{
                    msgReverse: function(){
                        return this.msg.split('').reverse().join('.');
                    }
                }
            })
        </script>

結(jié)果：

Original message: "Hello"

Computed reversed message: "olleH"

說(shuō)明：computed相當(dāng)于提供一個(gè)msgReverse的get()函數(shù)，其也是響應(yīng)式的：

? 控制臺(tái)輸出==> reverse1.msg = '西瓜'

? html顯示：

消息："西瓜"

消息："瓜.西"

調(diào)用方法也能完成一樣的效果契邀。

//組件中
methods: {
    msgReverse: function(){
        return  this.msg.split('').reverse().join('.');
    }
}
//調(diào)用：
<p>消息："{{msgReverse()}}"</p>

methods和計(jì)算屬性

• 最終結(jié)果相同

• 方法沒(méi)緩存摆寄、計(jì)算屬性有緩存。

• 依賴方式不同：

  • method中：每次重新渲染都需要執(zhí)行函數(shù)坯门。

  • 計(jì)算屬性中：基于響應(yīng)式依賴進(jìn)行緩存微饥，只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)，才會(huì)重新求值古戴，只要msg還沒(méi)有改變欠橘，多次訪問(wèn)msgReverse會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)现恼。

    注意：

    ? 此時(shí)肃续，如果計(jì)算屬性函數(shù)是：

    ? time:funciton(){

    ? return new Date.now()

    ? }

    ? 其永遠(yuǎn)不會(huì)更新.

計(jì)算屬性 vs 偵聽(tīng)屬性

偵聽(tīng)屬性：

定義：Vue提供的一種通用方式，來(lái)觀察叉袍、響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)始锚。

計(jì)算屬性和監(jiān)聽(tīng)屬性都可以用于：隨數(shù)據(jù)變動(dòng)而改變的值。

但有時(shí)可能是計(jì)算屬性更好用：
例子：

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代碼是命令式且重復(fù)的喳逛。將它與計(jì)算屬性的版本進(jìn)行比較：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

計(jì)算屬性的 setter

計(jì)算屬性默認(rèn)只有 getter瞧捌，但在需要時(shí)可以提供 setter：

...//Vue聲明中
computed: {
    fullName:{ 
        get: function () {
        return this.firstName + '  ' + this.lastName
        }
        set: function(new value){
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
     }
}
...

現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時(shí)，setter 會(huì)被調(diào)用润文，vm.firstName 和 vm.lastName 也會(huì)相應(yīng)地被更新姐呐。

偵聽(tīng)器

? 雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器典蝌。這就是為什么 Vue 通過(guò) watch 選項(xiàng)提供了一個(gè)更通用的方法曙砂，來(lái)響應(yīng)數(shù)據(jù)的變化。

場(chǎng)景：

? 當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)骏掀，這個(gè)方式是最有用的麦轰。

class 與 style 綁定

詳情-官網(wǎng)

條件渲染

v-if

作用：根據(jù)其值是否為true乔夯，來(lái)選擇是否渲染該標(biāo)簽。

<p id="customP2" :style="myStyle" v-if="render">我是中國(guó)人</p>

v-else

作用：需要緊跟v-if款侵，且是相同元素標(biāo)簽，用于表達(dá)else語(yǔ)法侧纯。

<p id="customP2" :style="myStyle" v-if="render">我是中國(guó)人</p>
<p v-else>我是中國(guó)人</p>

v-else-if

作用：需要緊跟在v-if新锈、v-else-if后面。

<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else-if="Math.random() > 0.5">
    else if
</div>

總說(shuō)：

        <div id="exam">
            <div v-if="Math.random() > 0.5">
                Now you see me
            </div>
            <div v-else-if="Math.random() > 0.5">
                else if
            </div>
            <div v-else>
                Now you don't
            </div>
        </div>
        
        <script>
            var exam = new Vue({
            el:"#exam"
            })
        </script>

用 key 管理可復(fù)用的元素

? Vue 會(huì)盡可能高效地渲染元素眶熬，通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染妹笆。這么做除了使 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>

? 那么在上面的代碼中切換 loginType 將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容贸弥。因?yàn)閮蓚€(gè)模板使用了相同的元素.

<input> 不會(huì)被替換掉——僅僅是替換了它的 placeholder.

? 這樣也不總是符合實(shí)際需求窟坐，所以 Vue 為你提供了一種方式來(lái)表達(dá)“這兩個(gè)元素是完全獨(dú)立的，不要復(fù)用它們”绵疲。只需添加一個(gè)具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

現(xiàn)在哲鸳，每次切換時(shí)，輸入框都將被重新渲染盔憨。

注意徙菠，<label> 元素仍然會(huì)被高效地復(fù)用，因?yàn)樗鼈儧](méi)有添加 key attribute郁岩。

v-show

作用：根據(jù)value真假婿奔，選擇是否展示元素。

<h1 v-show="ok">ok真问慎，就看得到萍摊，假，就看不到</h1>

與v-if區(qū)別

? v-show所在元素蝴乔，始終會(huì)被渲染并保留在 DOM 中记餐。v-show只是簡(jiǎn)單的切換元素的CSS樣式style="display:true"、style="display:false"

注意薇正，v-show 不支持 <template>元素片酝，也不支持 v-else。

v-if vs v-show

? v-if 是“真正”的條件渲染挖腰，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建雕沿。

? v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)猴仑，才會(huì)開(kāi)始渲染條件塊审轮。

? 相比之下肥哎，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染疾渣，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換篡诽。

? 一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷榴捡，而 v-show 有更高的初始渲染開(kāi)銷杈女。

使用場(chǎng)景總結(jié)：

• v-show ：需要非常頻繁地切換。
• v-if：如果在運(yùn)行時(shí)條件很少改變吊圾。

v-if 與 v-for 一起使用

? 不推薦同時(shí)使用 v-if 和 v-for达椰。請(qǐng)查閱風(fēng)格指南以獲取更多信息。

當(dāng) v-if 與 v-for 一起使用時(shí)项乒，v-for 具有比 v-if 更高的優(yōu)先級(jí)啰劲。請(qǐng)查閱列表渲染指南以獲取詳細(xì)信息。

列表渲染

v-for

作用：用于遍歷數(shù)組檀何、對(duì)象蝇裤。

語(yǔ)法：

• v-for="item in items"
• v-for="item of items" ：等同第一個(gè)，更切和 JS 語(yǔ)法
• v-for="(item, index) in items" ：items的index屬性也可以訪問(wèn)
• v-for="(item, name ) in items" ：對(duì)象屬性的遍歷埃碱，也可以用兩個(gè)屬性猖辫，分別獲得鍵、值砚殿。
• v-for="(item, name啃憎，index) in items"

item參數(shù)：可以訪問(wèn)所有父作用域的 property 屬性。

<div id="items">
    <ul>
        <label style="color:lightseagreen;font-size: x-large;">
                 具體犬類
            </label>
                <li style="font: bold;color: lightskyblue;" v-for="(item, index) in items">
                    {{item+':'+index}}
            </li>
    </ul>
    <ul>
        <label style="color:lightseagreen;font-size: x-large;">
                犬類特征
              </label>
        <li style="font: bold;color: lightskyblue;" v-for="value of faces">{{value}}</li>
    </ul>
</div>

            var items = new Vue({
                el: "#items",
                data: {
                    items: [
                        "田園犬",
                        "泰迪",
                        "拉布拉多"
                    ],
                    faces: {
                        type: "哺乳動(dòng)物",
                        voice: "汪汪",
                        walkType: "爬行",
                    }
                }
            })

指定唯一key

對(duì)v-for遍歷似炎，為方便 Vue 跟蹤每個(gè)節(jié)點(diǎn)辛萍，而重新排序等，可以為每項(xiàng)提供給一個(gè)唯一key：

只能是基礎(chǔ)數(shù)據(jù)類型：int 羡藐，string 等等

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內(nèi)容 -->
</div>

盡量在使用v-for時(shí)贩毕，指定唯一key，除非遍歷輸出的的DOM內(nèi)容非常簡(jiǎn)單仆嗦，或是為獲得性能刻意不指定辉阶。

因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，key 并不僅與 v-for 特別關(guān)聯(lián)瘩扼。后面我們將在指南中看到谆甜，它還具有其它用途。

更多 key attribute 的細(xì)節(jié)用法請(qǐng)移步至 key 的 API 文檔集绰。

數(shù)組更新檢測(cè)

更新方法

數(shù)組的變更會(huì)觸發(fā) DOM 重渲染规辱，方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

如之前的item例子，Console==》items.items.push("西施")栽燕，則 DOM 會(huì)對(duì)應(yīng)重渲染

替換數(shù)組

? 變更方法罕袋，顧名思義改淑，會(huì)變更調(diào)用了這些方法的原始數(shù)組。相比之下浴讯，也有非變更方法朵夏，例如 filter()、concat() 和 slice()榆纽。它們不會(huì)變更原始數(shù)組侍郭，而總是返回一個(gè)新數(shù)組。當(dāng)使用非變更方法時(shí)掠河，可以用新數(shù)組替換舊數(shù)組：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

? 你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表。幸運(yùn)的是猛计，事實(shí)并非如此唠摹。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的啟發(fā)式方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來(lái)的數(shù)組是非常高效的操作奉瘤。

注意事項(xiàng)

由于 JavaScript 的限制勾拉，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。深入響應(yīng)式原理中有相關(guān)的討論盗温。

v-for 里使用值范圍

說(shuō)明：即父標(biāo)簽或更上層標(biāo)簽中藕赞，放入v-for語(yǔ)句，形成更大的循環(huán)范圍卖局。

v-for 與 v-if 一同使用

注意我們不推薦在同一元素上使用 v-if 和 v-for斧蜕。更多細(xì)節(jié)可查閱風(fēng)格指南。

? 當(dāng)它們處于同一節(jié)點(diǎn)砚偶，v-for 的優(yōu)先級(jí)比 v-if 更高批销，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。當(dāng)你只想為部分項(xiàng)渲染節(jié)點(diǎn)時(shí)染坯，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用均芽，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

? 上面的代碼將只渲染未完成的 todo。

? 而如果你的目的是有條件地跳過(guò)循環(huán)的執(zhí)行单鹿，那么可以將 v-if 置于外層元素 (或 `) 上掀宋。如：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

v-on事件處理

職責(zé)：用于監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)仲锄，運(yùn)行一些 JS 代碼翎嫡。

基本格式：v-on:xxx

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

事件處理方法

說(shuō)明：有些事件處理邏輯很復(fù)雜，直接寫在v-on不是個(gè)好辦法猴鲫，替換的是v-on接收一個(gè)需要調(diào)用的方法名敷燎。

如下

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向當(dāng)前 Vue 實(shí)例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接調(diào)用方法
example2.greet() // => 'Hello Vue.js!'

內(nèi)聯(lián)處理器中的方法

除了直接綁定到一個(gè)方法，也可以在內(nèi)聯(lián) JavaScript 語(yǔ)句中調(diào)用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

? 有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原始的 DOM 事件澄惊∷敉荆可以用特殊變量 $event 把它傳入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
<script>
methods: {
  warn: function (message, event) {
    // 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求富雅。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯肛搬，而不是去處理 DOM 事件細(xì)節(jié)没佑。

為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符温赔。之前提過(guò)蛤奢，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理陶贼，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時(shí)啤贩，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生拜秧。因此痹屹，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊枉氮。

2.1.4 新增

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

? 不像其它只能對(duì)原生的 DOM 事件起作用的修飾符志衍，.once 修飾符還能被用到自定義的組件事件上。如果你還沒(méi)有閱讀關(guān)于組件的文檔聊替，現(xiàn)在大可不必?fù)?dān)心楼肪。

2.3.0 新增

? Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

? 這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能惹悄。

? 不要把 .passive 和 .prevent 一起使用春叫，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告俘侠。請(qǐng)記住象缀，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

按鍵修飾符

? 在監(jiān)聽(tīng)鍵盤事件時(shí)爷速，我們經(jīng)常需要檢查詳細(xì)的按鍵央星。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤事件時(shí)添加按鍵修飾符：

<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

? 你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來(lái)作為修飾符。

<input v-on:keyup.page-down="onPageDown">

? 在上述示例中惫东，處理函數(shù)只會(huì)在 $event.key 等于 PageDown 時(shí)被調(diào)用莉给。

按鍵碼

keyCode 的事件用法已經(jīng)被廢棄了并可能不會(huì)被最新的瀏覽器支持。

使用 keyCode attribute 也是允許的：

<input v-on:keyup.13="submit">

為了在必要的情況下支持舊瀏覽器廉沮，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9颓遏，這些內(nèi)置的別名應(yīng)該是首選。

你還可以通過(guò)全局 config.keyCodes 對(duì)象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系統(tǒng)修飾鍵

2.1.0 新增

可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽(tīng)器滞时。

• .ctrl
• .alt
• .shift
• .meta

注意：在 Mac 系統(tǒng)鍵盤上叁幢，meta 對(duì)應(yīng) command 鍵 (?)。在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (?)坪稽。在 Sun 操作系統(tǒng)鍵盤上曼玩，meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)鳞骤。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤黍判、以及其后繼產(chǎn)品豫尽，比如 Knight 鍵盤、space-cadet 鍵盤顷帖，meta 被標(biāo)記為“META”美旧。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”贬墩。

例如：

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

請(qǐng)注意修飾鍵與常規(guī)按鍵不同榴嗅，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)陶舞。換句話說(shuō)录肯，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl吊说。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。如果你想要這樣的行為优炬，請(qǐng)為 ctrl 換用 keyCode：keyup.17颁井。

更多看官網(wǎng)

表單輸入綁定

v-model

作用：做為表單標(biāo)簽元素的屬性，其值v-model="value"蠢护。

? value會(huì)掛載：【表單元素的輸入值】---- Vue 實(shí)例的【data的屬性】雅宾。

不同<input>元素

? **v-model **為不同輸入元素，使用不同 property 葵硕，并拋出不同的事件：

• <text>眉抬、<textarea> 元素： value property 和 input 事件；
• <checkbox> 和< radio> ： checked property 和 change 事件懈凹；
• <select> 字段： value 作為 prop 并將 change 作為事件蜀变。

v-model 會(huì)忽略所有表單元素的 value、checked介评、selected attribute 的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源库北。你應(yīng)該通過(guò) JavaScript 在組件的 data 選項(xiàng)中聲明初始值。

文本

說(shuō)明：Vue 的響應(yīng)式數(shù)據(jù)们陆，使前端可以做到原來(lái)后端才能做的事寒瓦。

message：用作輸入框內(nèi)容和 Vue 實(shí)例綁定的數(shù)據(jù)，實(shí)現(xiàn)當(dāng)輸入時(shí)坪仇，會(huì)實(shí)時(shí)顯示在<p>中杂腰。

<div id="example-1">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#example-1',
  data: {
    message: ''
  }
})
</script>

多行文本

message：用作輸入框內(nèi)容和 Vue 實(shí)例綁定的數(shù)據(jù)，實(shí)現(xiàn)當(dāng)輸入時(shí)椅文，會(huì)實(shí)時(shí)顯示在<p>中喂很。

<div id="exam2">
    <span>Multiline message is:</span>
    <p style="white-space:pre-line;">
        {{message}}
    </p>
    <textarea v-model="message" placeholder="在這里輸入"></textarea>
</div>
<script>
    var exam2 = new Vue({
                el: "#exam2",
            data:{
                    message:""
            }
        })
</script>

在文本區(qū)域插值 ({{text}}) 并不會(huì)生效惜颇，應(yīng)用 v-model 來(lái)代替。

復(fù)選框

單個(gè)復(fù)選框

綁定到bool值：

<div id="exam3">
    <input type="checkbox" id="checkbox" v-mode="checked">
         <label for="checkbox">
             {{checked}}
         </label>
</div>
<script>
    var exam3 = new Vue({
            el: "#exam3",
            data:{
                    checked: true
            }
    })
</script>

多個(gè)復(fù)選框

綁定到一個(gè)value數(shù)組恤筛，凡是勾選的框官还，其value就刷新為數(shù)組元素：

<div id="exam4">
    <input type="checkbox" id="mrLi" value="mrLi" v-model="boxList">
    <input type="checkbox" id="mrSun" value="mrSun" v-model="boxList">
    <input type="checkbox" id="mrWang" value="mrWang" v-model="boxList">
    <p>數(shù)組：</p>
    <p>
        {{boxlist}}
    </p>
</div>

<script>
    var exam4 = new Vue({
            el: "#exam4",
            data:{
                    boxList: ["首元素：nothing"]
            }
    })
</script>

單選按鈕

<div id="exam5">
    <input type="radio" v-model="radio" value="男">男
    <br/>
    <input type="radio" v-model="radio" value="女">女
    <br/>
    <p>radio：</p>
    <p>{{radio}}</p>
</div>

<script>
    var exam5 = new Vue({
            el: "#exam5",
            data:{
                    radio:""
            }
    })
</script>

選擇框

單選時(shí)：

<div id="exam6">
    <select v-modle="selected">
        <option disabled value="">請(qǐng)選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>selected is : {{selected}}</span>
</div>
<script>
    var exam6 = new Vue({
            el: "#exam6",
            data:{
                    selected:''
            }
    })
</script>

注意

? 如果 v-model 表達(dá)式的初始值未能匹配任何選項(xiàng)，<select> 元素將被渲染為“未選中”狀態(tài)毒坛。

? 在 iOS 中望伦，這會(huì)使用戶無(wú)法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下煎殷，iOS 不會(huì)觸發(fā) change 事件屯伞。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)豪直。

多選時(shí)劣摇，綁定到一個(gè)數(shù)組：

<div id="exam7">
    <select v-model="selectedList" multiple style="background-color:lightseagreen;width: 50px">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>selectedList is : {{selectedList}}</span>
</div>
<script>
    var exam7 = new Vue({
            el: "#exam7",
            data:{
                    selectedList:[]
            }
    })
</script>

配合v-for

<div id="exam8">
    <!-- 單選擇框+v-for -->
     <select v-model="selectedList" multiple style="background-color:lightseagreen;width: 50px">
        <option v-for="op of options">{{op}}</option>
    </select>
    <span>selectedList is : {{selectedList}}</span>
    <br/><hr/><br/>
    <!-- 單選擇框+v-for -->
    <select v-model="selectedList" multiple style="background-color:lightseagreen;width: 50px">
        <option v-for="op of options">{{op}}</option>
    </select>
    <span>selectedList is : {{selectedList}}</span>
</div>
<script>
    var exam8 = new Vue({
            el: "#exam8",
            data:{
                    selectedList:[],
                    options:[
                        "甲木",
                        "丙火",
                        "戊土",
                        "庚金",
                        "壬水"
                    ]
            }
    })
</script>

表單值綁定

說(shuō)明：對(duì)于單選按鈕，復(fù)選框及選擇框的選項(xiàng)弓乙，v-model 綁定的值通常是靜態(tài)字符串 (對(duì)于復(fù)選框也可以是布爾值)：

但是有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài) property 上末融，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè) property 的值可以不是字符串暇韧。

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 當(dāng)選中時(shí)
vm.toggle === 'yes'
// 當(dāng)沒(méi)有選中時(shí)
vm.toggle === 'no'

這里的 true-value 和 false-value attribute 并不會(huì)影響輸入控件的 value attribute勾习，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。如果要確保表單中這兩個(gè)值中的一個(gè)能夠被提交懈玻，(即“yes”或“no”)巧婶，請(qǐng)換用單選按鈕。

表單v-model修飾符

.lazy

用法：修飾符用法涂乌，都是在v-model后面直接連接就行艺栈。

職責(zé)：

? 在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))湾盒。你可以添加 lazy 修飾符湿右，從而轉(zhuǎn)為在 change 事件之后進(jìn)行同步：

<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg">

.number

職責(zé)：自動(dòng)將用戶輸入的值，轉(zhuǎn)換為整數(shù)類型罚勾。

? 這通常很有用诅需，因?yàn)榧词乖?type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串荧库。如果這個(gè)值無(wú)法被 parseFloat() 解析堰塌，則會(huì)返回原始的值。

.trim（修剪）

職責(zé)：自動(dòng)過(guò)濾用戶輸入的首尾空白字符分衫。

組件基礎(chǔ)

定義形如：

Vue.component('button-demo',{
        template: "<p>這里是顯示模板</p>"场刑，
    data:  function()[{
            return{
            count: 0
        }
        }，
         methods:{
         ....
    }
       
})

說(shuō)明：組件是可服用的 Vue 實(shí)例，且?guī)в幸粋€(gè)名字牵现，如上<button-demo>铐懊。

• 相同：含有data、computed瞎疼、watch科乎、methods 以及生命周期鉤子等。

• 區(qū)別：其不含有 el這個(gè)根實(shí)例項(xiàng)贼急。

使用：直接在html中使用即可

組件復(fù)用

說(shuō)明：組件可以復(fù)用任意次數(shù)茅茂，每次使用一個(gè)組件時(shí)，就會(huì)創(chuàng)建一個(gè)新Vue實(shí)例太抓，他們維護(hù)各自的數(shù)據(jù)空闲。

data 必須是一個(gè)函數(shù)

說(shuō)明：在組件中，data并不是一個(gè)對(duì)象走敌，而是等于一個(gè)函數(shù)的return值的形式.

原因：為每個(gè)實(shí)例提供一份唯一的拷貝碴倾。若非這樣，則對(duì)一個(gè)組件的操作掉丽，會(huì)影響相同的組件跌榔。

組件的組織

格式：通常以樹(shù)狀來(lái)組織。

如：導(dǎo)航欄捶障、側(cè)邊欄矫户、內(nèi)容區(qū)等組件。

每個(gè)組件又包含了其他的像導(dǎo)航鏈接残邀、博文之類的組件。

2.png

組件注冊(cè)

要使用組件柑蛇，首先得注冊(cè)組件