[vue] - Vue.js教程-基礎(chǔ)

之前做過項目，一直沒有總結(jié)過胚股，現(xiàn)在重新看文檔加深一遍~~

一较店、介紹

1士八、聲明與渲染

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

2、指令

v-if
true是加載梁呈，false則不加載
v-for
v-on
v-on:click @click
v-model 雙向數(shù)據(jù)綁定

3婚度、vue組件

一個組件實質(zhì)上也是一個vue實例
props: ['todo']

<div id="app-7">
  <ol>
    //使用 v-bind 指令將 todo 傳到每一個重復的組件中
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
--
Vue.component('todo-item', {
  //將數(shù)據(jù)從父作用域傳到子組件,模板可渲染動態(tài)數(shù)據(jù)
  props: ['todo'],
  template: '<li>This is a todo</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

二、Vue實例

1、構(gòu)造函數(shù)創(chuàng)建實例

var vm = new Vue（{}）

2蝗茁、屬性醋虏，方法

data：{} 屬性
method：{}定義方法

3、實例生命周期

數(shù)據(jù)檢測哮翘，編譯模板颈嚼，掛載實例到DOM，數(shù)據(jù)變化時更新DOM
生命周期鉤子
created 在實例被創(chuàng)建之后被調(diào)用
mounted
updated
destroyed 銷毀實例時調(diào)用
Vue.js沒有構(gòu)造器的概念
4饭寺、生命周期圖示

Paste_Image.png

三阻课、模板語法

1、插值

1)艰匙、文本

{{}} 插值
v-once 一次性插值

<span v-once>This will never change: {{ msg }}</span>

雙大括號會將數(shù)據(jù)解釋為純文本限煞，而非 HTML

2)、純html

v-html 可以輸出真正的 HTML
<div v-html="rawHtml"></div>
注：動態(tài)渲染的html容易導致XSS攻擊员凝，絕不要對用戶提供的內(nèi)容插值

3)署驻、屬性

{{}}不能在html屬性中使用，得用v-bind
<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="true">Button</button>

4)健霹、使用javascript表達式

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

注：表達式中可以訪問Math旺上、Date這樣的全局變量，但不能訪問用戶自定義變量

2糖埋、指令

1)抚官、參數(shù)

指令可以接受參數(shù)
<a v-bind:href="url"></a>

2)、修飾符

. 用于指出一個指定應(yīng)該以特殊方式綁定
<form v-on:submit.prevent="onSubmit"></form>

3阶捆、Filters 過濾器

由管道符 | 表示凌节，添加在{{}}尾部
{{ message | capitalize }}
注： Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind表達式（從 2.1.0 開始支持）中使用洒试，因為過濾器設(shè)計目的就是用于文本轉(zhuǎn)換倍奢。

過濾器函數(shù)總接受表達式的值作為第一個參數(shù)。
new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

過濾器可以串聯(lián)：
{{ message | filterA | filterB }}

過濾器是 JavaScript 函數(shù)垒棋，因此可接受參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里卒煞，字符串 'arg1' 將傳給過濾器作為第二個參數(shù)， 
arg2 表達式的值將被求值然后傳給過濾器作為第三個參數(shù)叼架。

4畔裕、縮寫

v-on:click @click

四、計算屬性

<div id="example">
  <p>初始值: "{{ message }}"</p>
  <p>計算之后的值: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //聲明計算屬性
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 的值始終取決于 vm.message 的值

計算屬性和 Methods 比較
計算屬性是基于它的依賴緩存乖订，只要message不發(fā)生改變扮饶，那計算屬性必然也不會改變，計算屬性不會總執(zhí)行乍构。
相比而言甜无，每當重新渲染的時候，method 調(diào)用總會執(zhí)行函數(shù)
計算屬性和 Watched Property 比較
$watch：用于監(jiān)聽vue實例的數(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
    }
  }
})

上面代碼是命令式的和重復的。

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

計算setter
計算屬性默認只有g(shù)etter岂丘，可以自己定義setter

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {  // setter
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

觀察watchers
用途：在數(shù)據(jù)變化響應(yīng)時陵究，執(zhí)行異步操作或開銷較大的操作時
watch示例
使用 watch 選項允許我們執(zhí)行異步操作（訪問一個 API），限制我們執(zhí)行該操作的頻率奥帘，并在我們得到最終結(jié)果前铜邮，設(shè)置中間狀態(tài)。

五寨蹋、具體指令詳解

1松蒜、class

1)、對象語法

對象钥庇，可以多個屬性

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

直接綁定data中的一個對象

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

常用且強大的模式如下
綁定返回對象的[計算屬性]

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

2)牍鞠、數(shù)組語法

v-bind:class="[activeClass, errorClass]"
v-bind:class="[isAc ? acClass : '', eClass]"

當有多個條件 class 時可以在數(shù)組語法中使用對象語法
 v-bind:class="[{ active: isActive }, errorClass]"

3)咖摹、用在組件上

Vue.component('my-co', {
  template: '<p class="foo bar">Hi</p>'
})
//這些類將被添加到根元素上面 
<my-co v-bind:class="{ active: isActive }"></my-co>