一剃法、Vue 簡介及安裝

1. 簡介

• Vue只關(guān)注視圖層,采用自底向上的增量開發(fā)的設(shè)計(jì)
  
• Vue的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
  
• Vue上手比較容易
  

2. 安裝

• 直接使用<script>引入
• 使用npm安裝,具體見教程

二律适、Vue工程常見目錄結(jié)構(gòu)

三巷查、常用語法

1. Vue 模板語法簡介

• Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)抹腿。
  
• Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)岛请。
  
• 結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)警绩， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上崇败。
  

2. 文本插值 {{ message }}

讀取Vue對(duì)象中的data的message值

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

3. 指令

• 指令基本用法

v-指令名:參數(shù).修飾符

如 v-bind:href

v-on:submit.prevent

參數(shù): 在指令后以冒號(hào)指明。

修飾符: 以半角句號(hào).指明的特殊后綴房蝉，用于指出一個(gè)指令應(yīng)該以特殊方式綁定僚匆。

其中的.prevent修飾符告訴v-on指令對(duì)于觸發(fā)的事件調(diào)用event.preventDefault()

<div id="app">
    <!--v-xxx 開頭 作為html標(biāo)簽的屬性-->
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鳥教程</h1>'
  }
})
</script>

• 表達(dá)式

vue.js提供了完全的 JavaScript 表達(dá)式支持

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

• 常用指令及用法

指令是帶有 v- 前綴的特殊屬性。

指令用于在表達(dá)式的值改變時(shí)搭幻，將某些行為應(yīng)用到 DOM 上。

• 過濾器

Vue.js 允許你自定義過濾器逞盆，被用作一些常見的文本格式化檀蹋。由"管道符"指示,格式如下:

<!--過濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)-->
<!-- 在兩個(gè)大括號(hào)中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

<!--過濾器串聯(lián), 過濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)： -->
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}

示例:

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

• 指令縮寫

Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫：

v-bind

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

4. Vue 實(shí)例

每個(gè) Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例來啟動(dòng)的

每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性

除了 data 屬性， Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法俯逾。這些屬性與方法都有前綴 $贸桶，以便與代理的 data 屬性區(qū)分。

示例

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個(gè)實(shí)例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個(gè)回調(diào)將在 `vm.a`  改變后調(diào)用
})

5. v-if 示例

v-else 桌肴、v-else-if 必須跟在 v-if 或者 v-else-if之后皇筛。

示例一

<div id="app">
    <p v-if="seen">現(xiàn)在你看到我了</p>
    <template v-if="ok">
      <h1>測(cè)試</h1>
      <p>學(xué)的不僅是技術(shù)，更是夢(mèng)想坠七！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

示例二

<div id="app">
    <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>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

6. v-for 示例

v-for 可以綁定數(shù)據(jù)到數(shù)組來渲染一個(gè)列表

v-for 指令需要以 site in sites 形式的特殊語法水醋， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。

v-for 可以通過一個(gè)對(duì)象的屬性來迭代數(shù)據(jù)：

你也可以提供第二個(gè)的參數(shù)為鍵名

v-for 也可以循環(huán)整數(shù)

示例一:

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

示例二:

<!--模板-->
<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

<!--遍歷對(duì)象屬性-->
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>

<!--遍歷對(duì)象屬性value,key-->
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>

<!--遍歷對(duì)象屬性value,key,index-->
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>

<!--循環(huán)整數(shù),從1開始-->
  <ul>
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>

7. v-model

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定

v-model 會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素

修飾符

.lazy 在默認(rèn)情況下彪置， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)拄踪，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步

.number 想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值）拳魁，可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值：

.trim 要自動(dòng)過濾用戶輸入的首尾空格

示例:

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="編輯我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鳥教程\r\nhttp://www.runoob.com'
  }
})
</script>

<!--修飾符示例-->
<input v-model.lazy="msg" />
<input v-model.number="age" type="number">
<input v-model.trim="msg">

四惶桐、計(jì)算屬性 computed

計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的

使用 methods 來替代 computed，效果上兩個(gè)都是一樣的潘懊，但是 computed 是基于它的依賴緩存姚糊，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods 授舟，在重新渲染的時(shí)候叛拷，函數(shù)總會(huì)重新調(diào)用執(zhí)行。

可以說使用 computed 性能會(huì)更好岂却，但是如果你不希望緩存忿薇，你可以使用 methods 屬性

computed 屬性默認(rèn)只有 getter,不過在需要時(shí)你也可以提供一個(gè) setter

示例:

<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 調(diào)用 setter， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新
vm.site = 'test';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

五躏哩、樣式綁定

class 與 style 是 HTML 元素的屬性署浩，用于設(shè)置元素的樣式，我們可以用 v-bind 來設(shè)置樣式屬性扫尺。

Vue.js v-bind 在處理 class 和 style 時(shí)筋栋， 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外正驻，還可以是對(duì)象或數(shù)組弊攘。

可以在對(duì)象中傳入更多屬性用來動(dòng)態(tài)切換多個(gè) class

可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象

當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform 姑曙，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴襟交。

示例

<div v-bind:class="{ active: isActive }"></div>

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<div v-bind:class="[activeClass, errorClass]"></div>

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>
</div>

<div id="app">
  <div v-bind:style="styleObject">菜鳥教程</div>
</div>

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div>
</div>

六、事件處理

事件監(jiān)聽可以使用 v-on 指令

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)伤靠，如：event.preventDefault() 或 event.stopPropagation()捣域。

Vue.js通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。

Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

常用按鍵別名：

.enter .tab .delete (捕獲 "刪除" 和 "退格" 鍵) .esc .space .up .down .left .right .ctrl .alt .shift .meta

示例一:

 <!--直接用表達(dá)式-->
 <button v-on:click="counter += 1">增加 1</button>

 <!--調(diào)用 JavaScript 方法-->
<div id="app">
   <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  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)用方法
app.greet() // -> 'Hello Vue.js!'
</script>

<!--內(nèi)聯(lián) JavaScript 語句-->
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

示例二 事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián)  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件至少觸發(fā)一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

示例三 按鍵修飾符

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 使用 別名  enter=13 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

七焕梅、組件

組件（Component）是 Vue.js 最強(qiáng)大的功能之一迹鹅。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼贞言。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用斜棚，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹。

prop 是父組件用來傳遞數(shù)據(jù)的一個(gè)自定義屬性该窗。

父組件的數(shù)據(jù)需要通過 props 把數(shù)據(jù)傳給子組件弟蚀，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"

類似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 v-bind 動(dòng)態(tài)綁定 props 的值到父組件的數(shù)據(jù)中挪捕。每當(dāng)父組件的數(shù)據(jù)變化時(shí)粗梭，該變化也會(huì)傳導(dǎo)給子組件.

prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件级零，但是不會(huì)反過來

父組件是使用 props 傳遞數(shù)據(jù)給子組件断医，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件奏纪！

在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件鉴嗤。可以使用 .native 修飾 v-on

使用 v-on 綁定自定義事件, 每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)序调，即：

使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

另外醉锅，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件

注冊(cè)一個(gè)全局組件語法:
Vue.component(tagName, options)

tagName 為組件名，options 為配置選項(xiàng)发绢。注冊(cè)后硬耍，我們可以使用以下方式來調(diào)用組件
<tagName></tagName>

示例:

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

八、自定義組件

除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ), Vue 也允許注冊(cè)自定義指令边酒。

鉤子函數(shù)
指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：

bind: 只調(diào)用一次经柴，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作墩朦。

inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用坯认，不必存在于 document 中）。

update: 被綁定元素所在的模板更新時(shí)調(diào)用氓涣，而不論綁定值是否變化牛哺。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）劳吠。

componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用引润。

unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用赴背。

鉤子函數(shù)參數(shù)
鉤子函數(shù)的參數(shù)有：

el: 指令所綁定的元素椰拒，可以用來直接操作 DOM 晶渠。
binding: 一個(gè)對(duì)象凰荚，包含以下屬性：
name: 指令名燃观，不包括 v- 前綴。
value: 指令的綁定值便瑟， 例如： v-my-directive="1 + 1", value 的值是 2缆毁。
oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用到涂。無論值是否改變都可用脊框。
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" 践啄， expression 的值是 "1 + 1"浇雹。
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo屿讽， arg 的值是 "foo"昭灵。
modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }伐谈。
vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)烂完，查閱 VNode API 了解更多詳情。
oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)诵棵，僅在 update 和 componentUpdated 鉤子中可用抠蚣。

示例:

<div id="app"  v-runoob:hello.a.b="message">
</div>
 
<script>
Vue.directive('runoob', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: '菜鳥教程!'
  }
})
</script>

九、路由

Vue.js 路由允許我們通過不同的 URL 訪問不同的內(nèi)容履澳。

通過 Vue.js 可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用（single page web application嘶窄，SPA）。

Vue.js 路由需要載入 vue-router 庫

示例:

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導(dǎo)航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

<script>
// 0. 如果使用模塊化機(jī)制編程距贷，導(dǎo)入Vue和VueRouter柄冲，要調(diào)用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進(jìn)來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件储耐。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器羊初，
// 或者，只是一個(gè)組件配置對(duì)象什湘。
// 我們晚點(diǎn)再討論嵌套路由长赞。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧闽撤。
const router = new VueRouter({
  routes // （縮寫）相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實(shí)例得哆。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現(xiàn)在哟旗，應(yīng)用已經(jīng)啟動(dòng)了贩据！
</script>

十栋操、總結(jié)

該篇博客主要是學(xué)習(xí)菜鳥教程網(wǎng)站的Vue教程后，做的學(xué)習(xí)筆記饱亮，僅作個(gè)人學(xué)習(xí)參考矾芙。

Vue 相對(duì)比較更容易入門,基本語法不太多,但組件、自定義指令及路由有點(diǎn)學(xué)習(xí)曲線近上。

個(gè)人學(xué)習(xí)Vue主要目的是能夠看懂Vue寫的代碼剔宪，能使用Vue構(gòu)建簡單的網(wǎng)頁程序。

十一壹无、參考

菜鳥教程

Vue