VUE使用總結

時間 2019-11-21

標籤 vue 使用總結简体版

原文原文鏈接

新創建的了一個交流羣，歡迎在工做的開發者，尤爲是VUE和小程序的同志們 771402271html

很久沒更新博客，確實是本身已經懶癌晚期，最近畢業剛工做3個月，公司開發一直在用Vue，本身我的也比較喜歡這個框架，今天就對本身學習到和用到的知識點做一些總結，但願能幫到你們。前端

Vuevue

　　知道Vue也必定據說過react 和 angular ，相對於這兩個框架來講，Vue很輕量，打包後體積只有20K+，同時學習起來也比較簡單，Vue借鑑了兩個框架的不少優勢。固然框架沒有說最好，只有最適合，建議多學習嘗試。react

　　衆所周知Vue是一個MVVM框架，這裏的MVVM指的僅僅是前端，和後端無關。在MVVM框架中，視圖和數據不能直接通訊，而是經過中間人ViewModel，ViewModel它能夠監聽到數據的變化，而後通知視圖作更新。同時它也能夠監聽到視圖在改變，使數據改變。咱們看下面的例子就大概懂了。小程序

舉例：後端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        // 這是咱們的View 視圖

　　　　<div id="app"> 
　　　　　<p>{{ message }}</p> 
　　　　 <input type="text" v-model="message"/> //輸入框，綁定了數據message
　 </div>

    </body>
    <script src="js/vue.js"></script>   // 引入vue 自行下載
    <script>
        //  這是咱們的Model 
        var obj = { message: 'Hello World!' } // 聲明一個 Vue 實例 ，即 "ViewModel"，實例中傳入一個對象，用來鏈接 View 與 Model new Vue( el: '#app', // 將id爲app的dom節點放進來，即創建了與視圖view的鏈接。 data: obj　　　　// 將obj放入到實例的data屬性中, 此時創建與數據model的鏈接。

 　　　　})
    // 這樣就能夠同時監聽view和model了， 當更改message的時候，view會自動改變，同時當咱們更改文本框的值的時候，會發現P標籤裏的值也在同時改變，這個時候就是view被監聽使model改變。 這就實現了數據的雙向綁定。

 </script> 

</html>

經常使用語法緩存

# 文本插值app

// 綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
<span>Message: {{ msg }}</span> 
<span v-text="msg"></span>  // 也能夠用指令的方式

#經常使用指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性。其實就是一種命令，或者是規則。
框架

v-if v-else-if v-else: 知足某個條件的時候顯示。dom

   <body>
        <div id="app">
            <h1 v-if="age > 50">Yes!</h1>  //當年齡大於50的時候才渲染這個標籤
         　　<h1 v-else-if="age > 20 && age < 50">{{age}}</h1> // 當年齡大於20且小於50的時候渲染當前標籤 　　　　　　 <h1 v-else>Yes!</h1> // 其餘的狀況渲染此標籤 </div> </body> <script> var vm = new Vue({ el: '#app', data: { age: 80 } }) </script>

// v-if 可單獨使用，也可和v-else-if v-else 一塊兒使用，來控制不一樣狀況下的視圖。

v-show：簡單的切換 display:block 和 none, 和 v-if不一樣。帶有v-show的元素始終會被渲染

<h1 v-show="yes">Yes!</h1> // 若是yes爲真就顯示，爲假就不顯示

 var vm = new Vue({
            el: '#app',
            data: {
                yes: true
            }
        })

總結： v-show適用於兩種狀態的切換，v-if適用於條件判斷。

v-for指令：用於循環

<div id="app">
<todo-item v-for="item in groceryList" >{{item.text }}</todo-item>
</div>

var app7 = new Vue({
    el: '#app',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '隨便其餘什麼人吃的東西' }
        ]
    }
   })

v-bind指令

v-bind指令能夠在後面帶一個參數，中間用冒號隔開，這個參數通常是HTML的屬性，好比v-bind:class ,可縮寫爲:class，這個class和原來的class 並不衝突。

.show{
　　display: block;
}
<h1 class="center"  v-bind:class="yes ? show : off">Yes!</h1> // 若是yes爲真就添加名爲show的class，反之添加off

 var vm = new Vue({
            el: '#app',
            data: {
                yes: true
            }
        })

v-on指令

專門用於綁定事件的指令，用法和v-blind差很少，好比添加點擊事件< a v-on:click="方法名 / 執行語句"> ，可直接縮寫爲@click，可直接綁定一個方法，也能夠直接使用內聯語句

#修飾符

修飾符修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，指明一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件的時候阻止默認事件：

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

#計算屬性computed：在正常狀況下，代碼中能夠直接進行簡單的運算，可是若是太多就顯得難以維護。而計算屬性就是將這個邏輯提取出來，專門來維護。以下例子：

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

<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('')
    }
  }
})

#方法methods：可實現和計算屬性同樣的功能

<div id="example">
  <p>{{ message }}"</p>
 <p>{{ reversedMessage}}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
   reversedMessage: function () {
     return this.message.split('').reverse().join('')
   }
 }
})

方法和計算屬性區別：

計算屬性存在緩存，只有依賴的變量發現改變的時候纔會從新求值，如上，只有message發生改變纔會從新求值，而methods每次渲染都會從新執行。因此要根據業務來選擇。

#觀察watch

只有一個一個監聽數據，只要這個數據發生變化，就會在返回兩個參數，第一個是當前的值，第二個是變化前的值，每當變化的時候，則會觸發函數體的裏的邏輯行爲，來進邏輯後續操做

watch: {   監聽message的變化，若改變執行如下語句
    message(new,old) {
        //要執行的語句
    }
}

#過濾器

過濾器在開發中會常常用到，好比咱們要顯示一個日期，可是後端給咱們的數據是像這樣的3463782000時間戳，咱們就必須作如下轉換。例如：

{{ message | date}}  // date在這裏就是個過濾器。實際上就是一個函數，函數的第一個參數就是 | 前面的message，也就是說message會被當作參數傳入到date函數中進行處理，返回的結果就是最終顯示的結果，注意過濾器函數都必須有返回值。

new Vue({
  filters: {
   　　 date: function (date, fmt) {
      　　if (!date) {
        　　return 'timestamp can not be null or undefined';
      　　}
    　　date = new Date(date);
    　　if (isNaN(date.getFullYear())) {
        　　return 'dateError';
    　　}
    　　if (/(y+)/.test(fmt)) {
        　　fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    　　}
    　　const o = {
        　　'M+': date.getMonth() + 1,
        　　'd+': date.getDate(),
        　　'h+': date.getHours(),
        　　'm+': date.getMinutes(),
        　　's+': date.getSeconds()
   　　 };
    　　for (const k in o) {
        　　if (new RegExp(`(${k})`).test(fmt)) {
            　　const str = o[k] + '';
            　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        　　}
    　　}
    　　return fmt;
    }
  }
})

// 過濾器也能夠串聯.如 {{message | filterA | filterB}} message會當作參數傳給filterA，處理完返回的結果又會當作參數傳入filterB，處理完返回的就是最終結果了

 過濾器分全局和局部。全局就是整個項目均可以用到，具體自行百度。

#混合mixins：

咱們知道vue實例中會傳入一個對象，裏面有方法，計算屬性等，假若有兩個vue實例，他們有不少公用的東西，那麼就能夠用到混合了，混合能夠當作一個Vue實例，同時它又能夠和任何一個

對象進行組合。以下： am 和 vm 都須要使用方法foo,這個時候就能夠聲明一個混合來複用。

var mixin = {  // 聲明一個混合
  methods: {
    foo: function () {
      console.log('foo')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],   // 引用混合
  methods: {
    bar: function () {
      console.log('bar')
    }
  }
})

var am = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})

#給一個對象註冊一個不存在的屬性

假如咱們須要監聽對象下某個不存在的屬性，那麼咱們能夠經過set去建立。

全局註冊： vue.set(item, 'checked', true) item.checked = true

局部註冊： this.$set(item, 'checked', true)

#組件之間的通訊

組件的基礎就暫且不說了，看官方也能懂，直接說下通訊，組件之間，有時候須要傳遞數據或者數據的狀態，好比我這邊點了按鈕，須要父組件獲得而且作出必定的改變。因此組件之間須要通訊。

這個時候就分三種狀況：父組件傳遞消息給子組件，子組件傳遞消息給父組件，兄弟組件之間通訊

1 父組件傳遞數據給子組件：props

父組件
<child message="hello!"></child>  // 子組件在父組件內被調用，message是來自於父組件的數據，直接以屬性的形式傳遞

子組件 須要聲明props屬性來接收數據，數據能夠和data裏的數據同樣使用
Vue.component('child', {
  // 聲明 props
  props: ['message'], })

2 子組件傳遞信息給父組件：例：當點擊按鈕時，通知父組件

父組件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>   // 子組件調用被監聽派發出的時間increment,監聽到後調用incrementTotal方法
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {  //若傳遞過來有數據，能夠直接接收incrementTotal(value)
      this.total += 1
    }
  }
})

子組件：
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') // 派發事件increment，第二個參數能夠是想傳遞的數據 好比 this.$emit('increment', 1) } }, })

注意： 在子組件中不要直接更改props的值，不推薦也不支持，想要用能夠直接賦值給一個變量，或者用計算屬性，若是須要改變父組件這個值怎麼辦呢，就能夠利用watch監聽傳來的props數據，而後把這個數據賦給一個變量，
這樣咱們就能夠操做這個變量，再$emit派發事件把想要改變的數據傳給父組件，父組件再監聽。

3 兄弟組件通訊

var bus = new Vue()  聲明Vue實例

bus.$emit('id-selected', 1)   // 派發事件和數據

bus.$on('id-selected', function (id) {  // 監聽事件，並在回調函數中，接受傳來的數據。
  // ...
})

先說到這裏。。。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。