Vue很難？看完這篇文章，讓你快速上手Vue

什麼是vue

vue是如今很火的一個前端MVVM框架，它以數據驅動和組件化的思想構建，與angular和react並稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。你們也能夠移步，看一下vue的介紹和核心功能官網介紹。簡單粗暴的理解就是：用vue開發的時候，就是操做數據，而後vue就會處理，以數據驅動去改變DOM。
下面就是一個最簡單的說明例子

代碼以下

html

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

相信也不難理解，就是input綁定了message這個值，而後在input修改的時候，message就改了，因爲雙向綁定，同時頁面的html（{{ message }}）進行了修改！

什麼是MVVM模式

MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變能夠自動傳遞給 View，即所謂的數據雙向綁定。

其中 M 層 是vue中的data, V層是el綁定的HTML元素, VM是new實例的vue

入門指南

1.導入 vue 建立一個VM 實例, 傳入配置對象, 瞭解配置對象中的各個屬性

咱們在頁面中經過script標籤引入咱們須要的vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
  el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
  data: { // data屬性中，存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
    message: 'Hello Vue!'
  },
  methods : {}, // 這個methods屬性中定義了當前Vue實例全部可用的方法,主要寫業務邏輯
  computed: {}, // 在computed中,能夠定一些屬性, 這些屬性叫作計算屬性,計算屬性的本質就是一個方法,只不過咱們在使用這些計算屬性的時候是吧它們的名稱直接當作屬性來使用的,並不會把計算屬性當作方法去調用
  filters : {}, // 這個filters屬性中定義了當前Vue實例中全部可用的過濾的方法 
  watch: {}, // 使用這個屬性,能夠監聽data中數據的變化,而後觸發這個watch中對應的function處理函數
  router, // 掛載路由對象
  directives：{}, // 這個directives屬性定義了當前Vue實例中全部可用的自定義指令
  beforeCreate () {}, // 生命週期函數: 表示實例徹底被建立以前,會執行這個函數
  created () {}, // 生命週期函數: 表示實例被建立以後
  beforeMounted () {}, // 生命週期函數: 表示模板已經編譯完成,可是尚未把模板渲染到頁面中
  mounted () {}, // 生命週期函數:表示模板已經編譯完成,內存中的模板已經真實的渲染到了頁面中去,已經能夠看到渲染好的頁面了
  beforeUpdate () {}, // 生命週期函數: 表示當前界面尚未被更新,數據確定被更新了
  update () {}, // 生命週期函數: 表示當前頁面和數據保持同步了,都是最新的
  beforeDestroy () {}, // 生命週期函數: 表示Vue實例已經從運行階段進入到銷燬階段
  destroyed () {} // 生命週期函數: 表示組件已經徹底被銷燬了
})

2.學習vue中的自定義指令

自定義指令在咱們的項目中很經常使用, 因此要認真學習。

第一部分: 使用Vue.directive()自定義全局的指令

注意 : 參數 1 是指令的名稱, 在自定義指令的時候, 指令的名稱前面不須要加 "v-"前綴

注意 : 參數 2 是一個對象, 對象身上有一些指令的相關函數, 這些函數能夠在特定的階段, 執行相關的操做句號

注意 : 在參數 2 中的相關函數中,第一個參數，永遠是el,表示被綁定了指令的那個元素，這個el參數，是一個原生的js對象

注意 : 在參數 2 中的相關函數中,都有一個binding參數，是一個對象，它包含如下屬性：name/指令名，value/指令的綁定值（例如v-mydirective="'red'"）值就爲red，剩下的屬性去看官網用的少 一樣導入vue, 建立VM實例對象

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
    el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
    data: { // data屬性中存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
        message: 'Hello Vue!'
    },
})
// 自定義指令方法：
Vue.directive(「指令名稱」，{ 
    bind: function(){}, 
    inserted: function(){}, 
    updata: function(){} 
})

自定義指令中的bind函數

每當指令綁定到元素上的以後，會當即執行這個bind函數，只執行一次

注意 : 和樣式相關的操做，通常均可以在bind執行，只要經過指令綁定了元素，無論這個元素有沒有被插入到頁面中去，這個元素確定有了一個內聯樣式。

未來元素確定會顯示頁面中去，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素

注意 : 在元素幹綁定了指令的時候，尚未插入到DOM中去，這時候調用例如：el.focus（獲取焦點）等js行爲相關的操做，須要在inserted方法中去執行，防止js行爲不生效

由於一個元素, 只有在插入DOM以後, 才能操做他的js行爲

// 舉例
Vue.directive(「color」，{ 
    bind: function(el, binding){
        //這個指令綁定的樣式顏色是固定死的，咱們能夠經過指令的綁定值來動態改變樣式顏色
        el.style.color ="red" 
    }, 
})
// 須要注意: 指令綁定的值若是不是字符串而是一個變量，就須要你在data中定義這個變量的值
// 下面展現經過使用指令傳入的顏色來來定義綁定標籤的顏色
<p v-color=" 'red' "></p> 
定義指令：Vue.directive(" color ",{ 
    bind: function(el, binding){ 
        el.style.color = binding.value 
    } 
})
// 在自定義局部指令的時候, 咱們也能夠經過給v-color綁定一個變量, 經過動態改變變量的值來控制標籤的顏色

自定義指令中的inserted函數

表示元素插入到DOM中的時候會執行inserted函數（觸發一次）

注意 : 和js行爲相關的操做，須要在inserted方法中去執行，防止js行爲不生效

// 例如: 
<p v-color=" 'red' "></p> 
定義指令：Vue.directive(" color ",{ 
    bind: function(el, binding){ 
        el.style.color = binding.value // 設置綁定該指令的標籤顏色
    },
    inserted: function(el, binding){ 
        el.focus()  // 在這裏執行獲取焦點才管用
    } 
})

自定義指令中的updata函數

當組件更新的時候, 會執行updata函數, 可能會屢次觸發

第二部分: 使用Vue.directive()自定義全局的指令

使用方法和上面的全局指令同樣。只是自定義局部指令須要在VM實例中定義

例如:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 經過差值表達式的方式將數據渲染到頁面
</div>
var VM = new Vue({
    el: '#app', // 表示當咱們new的這個Vue實例, 要控制頁面上的那個區域
    data: { // data屬性中存放的是el中要用到的數據,這裏的data就是MVVM中的M專門用來保存每一個頁面的數據
        message: 'Hello Vue!'
    },
    // 自定義局部指令
    directives: {
        "color":{
           bind: function(){}, 
           inserted: function(){}, 
           updata: function(){} 
        }
        // 下面這個是簡寫方式: 簡寫的function等同於把代碼寫到了bind和updata函數中
        color: function(el, binding) {
            el.style.color = binding.value
        }
    }
})

本文爲連載文章，關注我不要錯過下次更新哦~

---

前端學習進階之路任重道遠，若是你選擇了前端，那就要一氣呵成，不能半途而廢。前端要學的東西也挺多的，但有興趣纔是堅持下去的動力，一塊兒加油。

前端學習內容複雜、網上資料參差不齊，想要靠本身梳理清楚確實不容易，爲了幫助想要在這條路上一路走到黑的朋友，特別整理了《前端工程師學習進階資料大全》。

內容包括html，css，JavaScript，ES6，計算機網絡，瀏覽器，工程化，模塊化，Node.js，框架，數據結構，性能優化，項目等等。（本文資料 適合0-2年）

包含了騰訊、字節跳動、小米、阿里、滴滴、美團、5八、拼多多、360、新浪、搜狐等一線互聯網公司面試被問到的題目，涵蓋了初中級前端技術點。

前端面試題彙總

JavaScript

性能

linux

前端資料彙總

完整版PDF資料免費分享，只需你點贊支持，【動動手指點擊此處就可免費領取了】。