vue2.0 之基本功-指令與生命週期鉤子 （一些經驗）

時間  2019-12-07
標籤 vue2.0 vue 基本功 指令 生命週期 鉤子 一些 經驗 简体版
原文   原文鏈接

前言

接觸vue也有一年多的時間了，一直沒有作記錄。做爲一個前端開發者，對我而言，vue是一個正確的選擇。vue的易用性，渲染能力，開發文檔等等，都比較友好。最近的一段時間也在作react。css

我的見解：對於框架，本身以爲順手就行，使用框架就要儘量發揮出框架的所有能量，html、JavaScript、css基本功要作好，這樣任何js框架對你來講上手都很快。html

寫這篇文章主要是鞏固一些知識和記錄開發中的一些經驗，對於初學者也有一些幫助。前端

本篇爲基礎篇，若是這些內容掌握了，那基本的開發就沒有問題了。但這還不夠，若是你對組件、路由、還有狀態管理有深刻的理解，那你會是一個優秀的前端開發者。稍後我也會把個人理解記錄下來，給你們分享。vue

本篇內容有兩部分react

  1. 指令的基本用法和注意事項
  2. 週期鉤子的解釋和注意事項

一.引入

第一部固然是引入了，兩種方式npm

標籤引入方式
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

配合npm 模塊化引入
import Vue from 'vue'

二.實例化

var app = new Vue({
      el: '#app',//.app||document.getElementById('app')
      data: {
        message: 'Hello Vue!'
      }
    })

表示提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標。api

el：參數能夠是css選擇器，也能夠是HTMLElement,但最好是id選擇器，用class選擇器vue會自動把class轉化爲id緩存

你可能也見過這種寫法,效果同樣app

new Vue({
  data: {
    message: 'Hello Vue!'
  }
}).$mount('#app')

三.指令

v-text與v-html

v-text被編譯成不一樣文本，v-html不被編譯，直接輸出標籤框架

<span v-text="msg"></span>
<!-- 和下面的同樣 -->
<span>{{msg}}</span>
testHtml:<i>testHtml</i>
<span v-html="testHtml"></span>

輸出:testHtml

<span v-text="testHtml"></span>

輸出 <i>testHtml</i>

v-show與v-if

均可以說是條件判斷

<span v-if="true"></span>
<span v-show="false"></span>

v-show dom元素存在，根據表達式之真假值，切換元素的 display CSS 屬性。

v-if true元素存在，false元素不存在，根據表達式的值的真假條件渲染元素。

v-else與v-else-if

條件渲染

<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>

v-for

列表渲染

爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。理想的 key 值是每項都有的且惟一的 id。

建議儘量在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。

開發中你會遇到的事情：綁定事件，獲取索引

<div v-for="(item,index) in items" :key="item.id" @click="toggle(index)">
  {{ item.text }}
</div>
new Vue({
  el: '#app',
  data: function() {
    return {
      items: [{
        id:1,
        content: '1 item',
      }, {
        id:2,
        content: '2 item',
      }, {
        id:3,
        content: '3 item',
      }]
    }
  },
  methods: {
    toggle: function(index) {
        alert(this.items[index].content)
    }
  }
})

一個對象的 v-for

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

0. firstName: John
1. lastName: Doe
2. age: 30

v-on

事件指令
縮寫 @
部分修飾符，開發中這兩個基本就夠了

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 中止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認行爲 -->
<button @click.prevent="doThis"></button>

v-bind

屬性綁定
縮寫 ：

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 經過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定。「prop」必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>

<!-- 經過 $props 將父組件的 props 一塊兒傳給子組件 -->
<child-component v-bind="$props"></child-component>

v-model

表單控件雙向綁定
限制

  • <input>
  • <select>
  • <textarea>

修飾符

  • .lazy - 取代 input 監聽 change 事件
  • .number - 輸入字符串轉爲數字
  • .trim - 輸入首尾空格過濾

四.週期鉤子

注意：很是重要！很是重要！很是重要！

理解了生命週期函數，能幫助你在合適的時機作合適的事情。

vue官方api最新版本給出了11個周期函數

生命週期圖示我就不貼了，官網都有

上代碼,要仔細看哦~

<template>
  <div id="app1">
    <h1>{{a}}</h1>
    <h1>{{aDouble}}</h1>
    <button @click="plus">plus</button>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      a: 1
    }
  },
  computed: {
    aDouble () {
      return this.a * 2
    }
  },
  methods: {
    plus: function () {
      this.a++
    }
  },
  watch: {
    a: (val, oldVal) => {
      console.log(val, oldVal)
    },
    deep: true
  },
  beforeCreate () {
    console.log(this.$el) // undefined
    console.log(this.$data) // undefined
    console.log('beforeCreate 鉤子執行...')
  },
  created () {
    console.log(this.$el) // undefined
    console.log(this.$data) // {__ob__: Observer} 綁定了data
    this.a++ // a:2
    this.plus() // a:3
    // 連續兩次改變a的值，這裏watch只執行了一次，爲何呢？這裏是個異步，若是同一個 watcher 被屢次觸發，只會被推入到隊列中一次。
    console.log('created 鉤子執行...')
  },
  beforeMount () {
    console.log(this.$el) // undefined
    console.log('beforeMount 鉤子執行...')
  },
  mounted () {
    console.log(this.$el) // <div id="app1">...</div>
    console.log('mounted 鉤子執行...')
  },
  beforeUpdate: function () {
    // this.plus() 會觸發beforeUpdate
    console.log('beforeUpdate 鉤子執行...')
  },
  updated: function () {
    // this.plus() 會觸發beforeUpdate
    console.log('updated 鉤子執行...')
  },
  beforeDestroy: function () {
    // this.$destroy()或者是該組件被切換、路由跳轉等會引起實例被銷燬 會觸發beforeDestroy
    console.log('beforeDestroy 鉤子執行...')
  },
  destroyed: function () {
    // this.$destroy()或者是該組件被切換、路由跳轉等會引起實例被銷燬 會觸發beforeDestroy
    console.log('destroyed 鉤子執行...')
  }
}
</script>

beforeCreate

官方說明：在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

意思就是，實例要初始化了，我準備幹大事了，給大家提個醒！（你能夠理解爲：這個時候vue還啥都沒幹）

created

官方說明：在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

意思就是：實力已經建立完成了，你寫的data老子已經拿到了，你寫的methods老子也拿到了，你寫的watch老子也看到了（你敢動試試，我看着呢），總之呢，這個時候除了沒有生成dom，其餘事情都幹完了。你能夠選擇在這裏面請求一些數據。

beforeMount

官方說明：在掛載開始以前被調用：相關的 render 函數首次被調用。
意思就是：老子要生成dom，往html裏面掛了，前方高能，老子要掛了！！就是告訴你要掛載到dom了，有什麼事情在掛載以前作的就趕快作。

mounted

官方說明：el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
意思就是：該作的事情都作完了，dom也有了，這個時候你能夠操做dom了。

beforeUpdate

官方說明：數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。
意思就是：當你的數據改變了，實例監測到了變化，就會引起beforeUpdate而後updated兩個鉤子，很好理解

updated

官方說明：因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
意思就是：當你的數據改變了，實例監測到了變化，就會引起beforeUpdate而後updated兩個鉤子，很好理解

activated

keep-alive 組件激活時調用。
牽扯到路由緩存（keep-alive），講路由的時候再詳細說明

deactivated

keep-alive 組件停用時調用。
牽扯到路由緩存（keep-alive），講路由的時候再詳細說明

beforeDestroy

官方說明：實例銷燬以前調用。在這一步，實例仍然徹底可用。
意思就是：當實例被銷燬的時候會被觸發，何時會被銷燬呢？就是當組件（從頁面上消失的時候），一般是組件的切換，路由的切換等，或者主動調用this.$destroy()，先beforeDestroy而後destroyed，在開發的時候也不多用到

destroyed

官方說明：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。
意思就是：當實例被銷燬的時候會被觸發，何時會被銷燬呢？就是當組件（從頁面上消失的時候），一般是組件的切換，路由的切換等，或者主動調用this.$destroy()，先beforeDestroy而後destroyed，在開發的時候也不多用到

errorCaptured

2.5.0+ 新增
當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。
這個本人沒用到過,通常不會讓子組件出錯。

小結：週期鉤子能幫助咱們理解實例被建立的過程和運行過程發生的事情，咱們能夠在合適的時機作合適的事情，就像約會的時候根據不一樣的相處時間或者感受作出那個時候該作的事情同樣，關於基礎篇就先說這麼多。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程