總結vue知識體系之基礎入門篇

vue 做爲目前前端三大框架之一,對於前端開發者能夠說是必備技能。那麼怎麼系統地學習和掌握 vue 呢?爲此,我作了簡單的知識體系體系總結,不足之處請各位大佬多多包涵和指正,若是喜歡的能夠點個小贊!css

相關推薦html

Vue 的優缺點是什麼

優勢:前端

  1. 低耦合。視圖(View)能夠獨立於 Model 變化和修改,一個 ViewModel 能夠綁定到不一樣的 View 上,當 View 變化的時候 Model 能夠不變,當 Model 變化的時候 View 也能夠不變。
  2. 可重用性。你能夠把一些視圖邏輯放在一個 ViewModel 裏面,讓不少 view 重用這段視圖邏輯。
  3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發(ViewModel),設計人員能夠專一於頁面設計,使用 Expression Blend 能夠很容易設計界面並生成 xml 代碼。
  4. 可測試。界面素來是比較難於測試的,而如今測試能夠針對 ViewModel 來寫。
  5. vue 是單頁面應用,使頁面局部刷新,不用每次跳轉頁面都要請求全部數據和 dom,這樣大大加快了訪問速度和提高用戶體驗。並且他的第三方 ui 庫不少節省開發時間

缺點:不利於 SEO,社區維護力度不強,相比還不夠成熟vue

vue 經常使用指令

  • v-html / v-text:把值中的標籤渲染出來
  • v-model: 放在表單元素上的,實現雙向數據綁定
  • v-bind(縮寫 :):用於綁定行內屬性
  • v-if / v-show 是否能顯示,true 能顯示,false 不能顯示
  • v-cloak:須要配合 css 使用:解決小鬍子顯示問題
  • v-once 對應的標籤只渲染一次
  • v-for :循環顯示元素
  • v-on 事件綁定

事件修飾符

Vue.jsv-on 提供了事件修飾符,修飾符是由點開頭的指令後綴來表示的。webpack

  • stop:阻止事件繼續傳播
  • prevent:阻止事件默認行爲
  • capture:添加事件監聽器時使用事件捕獲模式
  • self:當前元素觸發時才觸發事件處理函數
  • once:事件只觸發一次
  • passive:告訴瀏覽器你不想阻止事件的默認行爲,不能和.prevent 一塊兒使用。
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="toDo"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="toSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="toDo"></a>

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

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理,而後才交由內部元素進行處理 -->
<div v-on:click.capture="toDo">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<div v-on:click.self="toDo">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="toDo"></a>

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<div v-on:scroll.passive="onScroll">...</div>
複製代碼

表單修飾符

  • .lazy 在輸入框輸入完內容,光標離開時才更新視圖
  • .trim 過濾首尾空格
  • .number 若是先輸入數字,那它就會限制你輸入的只能是數字;若是先輸入字符串,那就至關於沒有加.number

過濾器 filter

過濾器是對即將顯示的數據作進一步的篩選處理,而後進行顯示,值得注意的是過濾器並無改變原來的數據,只是在原數據的基礎上產生新的數據。nginx

  1. 定義過濾器
    全局註冊
Vue.filter('myFilter', function (value1[,value2,...] ) {
// 代碼邏輯
})
複製代碼

局部註冊es6

new Vue({
 filters: {
    'myFilter': function (value1[,value2,...] ) {
       // 代碼邏輯
      }
    }
&emsp;})
複製代碼
  1. 使用過濾器
<!-- 在雙花括號中 -->
<div>{{ message | myFilter }}</div>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | myFilter"></div>
複製代碼

計算屬性 computed

依賴其它屬性值,而且 computed 的值有緩存,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時纔會從新計算 computed 的值;web

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function() { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } }) </script>
複製代碼

監聽屬性 watch

觀察和響應 Vue 實例上的數據變更。相似於某些數據的監聽回調 ,每當監聽的數據變化時都會執行回調進行後續操做。它能夠有三個參數ajax

  • handler:其值是一個回調函數。即監聽到變化時應該執行的函數
  • deep:其值是 true 或 false;確認是否深刻監聽。
  • immediate:其值是 true 或 false,確認是否以當前的初始值執行 handler 的函數
watch:{
  message:{
    handler:function(val, oldVal){
      console.log(val, oldVal)
    },
    deep: true,
    immediate: true
  }
}
複製代碼

computed 和 watch 的區別

  • computed: 是計算屬性,依賴其它屬性值,而且 computed 的值有緩存,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時纔會從新計算 computed 的值;
  • watch: 更多的是「觀察」的做用,相似於某些數據的監聽回調 ,每當監聽的數據變化時都會執行回調進行後續操做。

運用場景正則表達式

  • 當咱們須要進行數值計算,而且依賴於其它數據時,應該使用 computed,由於能夠利用 computed 的緩存特性,避免每次獲取值時,都要從新計算;
  • 當咱們須要在數據變化時執行異步或開銷較大的操做時,應該使用 watch,使用  watch  選項容許咱們執行異步操做 ( 訪問一個 API ),限制咱們執行該操做的頻率,並在咱們獲得最終結果前,設置中間狀態。這些都是計算屬性沒法作到的。

生命週期函數

  • beforeCreate(建立前) vue 實例的掛載元素$el 和數據對象 data 都是 undefined, 還未初始化
  • created(建立後) 完成了 data 數據初始化, el 還未初始化
  • beforeMount(載入前) vue 實例的$el 和 data 都初始化了, 相關的 render 函數首次被調用
  • mounted(載入後) 此過程當中進行 ajax 交互
  • beforeUpdate(更新前)
  • updated(更新後)
  • beforeDestroy(銷燬前)
  • destroyed(銷燬後)

Vue 的父組件和子組件生命週期鉤子執行順序是什麼?

  1. 渲染過程:父組件掛載完成必定是等子組件都掛載完成後,纔算是父組件掛載完,因此父組件的 mounted 在子組件 mouted 以後。
  • 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  1. 子組件更新過程:
  • 影響到父組件:父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
  • 不影響父組件:子 beforeUpdate -> 子 updated
  1. 父組件更新過程:
  • 影響到子組件:父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
  • 不影響子組件:父 beforeUpdate -> 父 updated
  1. 銷燬過程:
  • 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

組件註冊

組件(component)是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素,封裝可重用的代碼。組件的使用過程包括定義和註冊的過程。

  1. 定義組件
// 方法一 Vue.extend
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 方法二:新建一個.vue 文件
複製代碼
  1. 註冊組件
// 全局註冊
Vue.component('my-component', MyComponent)

// 局部註冊
new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
})
複製代碼
  1. 使用組件
<div id="example">
  <my-component></my-component>
</div>
複製代碼

組件傳值

1. props 父組件給子組件傳值

props 值能夠是一個數組或對象;

// 數組:不建議使用
props:[]

// 對象
props:{
 inpVal:{
  type:Number, //傳入值限定類型
  // type 值可爲String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 還能夠是一個自定義的構造函數,而且經過 instanceof 來進行檢查確認
  required: true, //是否必傳
  default:200,  //默認值,對象或數組默認值必須從一個工廠函數獲取如 default:()=>[]
  validator:(value) {
    // 這個值必須匹配下列字符串中的一個
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}
複製代碼

2. $emit 子組件給父組件傳值

觸發子組件觸發父組件給本身綁定的事件,其實就是子傳父的方法

// 父組件
<v-Header @title="title">
// 子組件
this.$emit('title',{title:'這是title'})
複製代碼

3. vuex 數據狀態管理

  • state:定義存貯數據的倉庫 ,可經過 this.$store.state 或 mapState 訪問
  • getter:獲取 store 值,可認爲是 store 的計算屬性,可經過 this.$store.getter 或 mapGetters 訪問
  • mutation:同步改變 store 值,可經過 mapMutations 調用
  • action:異步調用函數執行 mutation,進而改變 store 值,可經過 this.$dispatch 或 mapActions 訪問
  • modules:模塊,若是狀態過多,能夠拆分紅模塊,最後在入口經過...解構引入

4. attrs 和 listeners

attrs 獲取子傳父中未在 props 定義的值

// 父組件
<home title="這是標題" width="80" height="80" imgUrl="imgUrl"/>
// 子組件
mounted() {
  console.log(this.$attrs) //{title: "這是標題", width: "80", height: "80", imgUrl: "imgUrl"}
}

// 相對應的若是子組件定義了 props,打印的值就是剔除定義的屬性
props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "這是標題", height: "80", imgUrl: "imgUrl"}
}
複製代碼

listeners:場景:子組件須要調用父組件的方法。 解決:父組件的方法能夠經過 v-on="listeners" 傳入內部組件——在建立更高層次的組件時很是有用

// 父組件
<home @change="change"/>

// 子組件
mounted() {
  console.log(this.$listeners) //便可拿到 change 事件
}
複製代碼

5. provide 和 inject

provideinject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中; 而且這對選項須要一塊兒使用; 以容許一個祖先組件向其全部子孫後代注入一個依賴,不論組件層次有多深,並在起上下游關係成立的時間裏始終生效。

//父組件:
provide: { //provide 是一個對象,提供一個屬性或方法
  foo: '這是 foo',
  fooMethod:()=>{
    console.log('父組件 fooMethod 被調用')
  }
},

// 子或者孫子組件
inject: ['foo','fooMethod'], //數組或者對象,注入到子組件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父組件下面全部的子組件均可以利用inject
複製代碼

6. $refs

一般用於父組件調用子組件的方法

// 父組件
<home ref="child"/>

mounted(){
  console.log(this.$refs.child) //便可拿到子組件的實例,就能夠直接操做 data 和 methods
}
複製代碼

7. EventBus

  1. 就是聲明一個全局 Vue 實例變量 EventBus , 把全部的通訊數據,事件監聽都存儲到這個變量上;
  2. 相似於 Vuex。但這種方式只適用於極小的項目 3.原理就是利用 emit 並實例化一個全局 vue 實現數據共享
// 在 main.js
Vue.prototype.$eventBus = new Vue()

// 傳值組件
this.$eventBus.$emit('eventTarget', '這是eventTarget傳過來的值')

// 接收組件
this.$eventBus.$on('eventTarget', v => {
  console.log('eventTarget', v) //這是eventTarget傳過來的值
})
複製代碼

路由配置和使用

  1. 配置路由信息
let routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/list',
    component: list
  }
]

let router = new VueRouter({
  routes: routes
})
let vm = new Vue({
  el: '#app',
  router
})
複製代碼

在html使用

<div id="app">
   <router-link to='/home' active-class='current'>首頁</router-link>
   <router-link to='/list' tag='div'>列表</router-link>
   <router-view></router-view>
</div>
複製代碼

此外,vue-router還能夠經過一下方式配置動態路由

  • query傳參(問號傳參)
  • params傳參(路徑傳參)

路由懶加載

Vue 項目中實現路由按需加載(路由懶加載)的 3 中方式:

// 一、Vue異步組件技術:
{
	path: '/home',
	name: 'Home',
	component: resolve => reqire(['path路徑'], resolve)
}

// 二、es6提案的import()
const Home = () => import('path路徑')

// 三、webpack提供的require.ensure()
{
	path: '/home',
	name: 'Home',
	component: r => require.ensure([],() =>  r(require('path路徑')), 'demo')
}
複製代碼

路由守衛

vue-router 提供的導航守衛主要用來經過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程當中:全局的, 單個路由獨享的, 或者組件級的。

全局前置守衛 經常使用於判斷登陸狀態和菜單權限校驗

router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('isLogin') || ''
  if (!isLogin && to.meta.auth) {
    next('/login')
  } else {
    next()
  }
})
複製代碼
  • to: Route: 即將要進入的目標 路由對象
  • from: Route: 當前導航正要離開的路由
  • next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

組件內的守衛

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

路由緩存 keepalive

keep-alive 是 Vue 提供的一個抽象組件,用來對組件進行緩存,從而節省性能,因爲是一個抽象組件,因此在 v 頁面渲染完畢後不會被渲染成一個 DOM 元素。

<keep-alive>
  <router-view></router-view>
</keep-alive>
複製代碼

當組件在 keep-alive 內被切換時組件的 activateddeactivated 這兩個生命週期鉤子函數會被執行

1. 使用參數include/exclude

  • include: 字符串或正則表達式。只有匹配的組件會被緩存。
  • exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。
<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>
<keep-alive exclude="c">
  <router-view></router-view>
</keep-alive>
複製代碼

include 屬性表示只有 name 屬性爲 a,b 的組件會被緩存,(注意是組件的名字,不是路由的名字)其它組件不會被緩存。 exclude 屬性表示除了 name 屬性爲 c 的組件不會被緩存,其它組件都會被緩存。

2. 使用$route.meta 的 keepAlive 屬性

須要在 router 中設置 router 的元信息 meta

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不須要緩存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 須要被緩存
      }
    }
  ]
})
複製代碼

在 app.vue 進行區別緩存和不用緩存的頁面

<div id="app">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</div>
複製代碼

hash 和 history模式

  • hash 模式:在瀏覽器中符號「#」,#以及#後面的字符稱之爲 hash,用 window.location.hash 讀取。特色:hash 雖然在 URL 中,但不被包括在 HTTP 請求中;用來指導瀏覽器動做,對服務端安全無用,hash 不會重加載頁面。

  • history 模式:history 採用 HTML5 的新特性;且提供了兩個新方法: pushState(), replaceState()能夠對瀏覽器歷史記錄棧進行修改,以及popState事件的監聽到狀態變動。

  • hash 模式中( http://localhost:8080#home),即便不須要配置,靜態服務器始終會去尋找index.html並返回給咱們,而後vue-router會獲取 #後面的字符做爲參數,對前端頁面進行變換。

  • history 模式中,咱們所想要的狀況就是:輸入http://localhost:8080/home,但最終返回的也是index.html,而後vue-router會獲取 home 做爲參數,對前端頁面進行變換。那麼在nginx中,誰能作到這件事呢?答案就是try_files

推薦文章

關注的個人公衆號不按期分享前端知識,與您一塊兒進步!

相關文章
相關標籤/搜索