什么是Vue.js

Vue.js 是一套構(gòu)建用戶界面的 漸進(jìn)式框架炫狱。它非常容易與其它庫(kù)或已有項(xiàng)目整合，而無(wú)須從頭開(kāi)始重構(gòu)整個(gè)項(xiàng)目剔猿；另一方面视译，Vue 完全有能力驅(qū)動(dòng)采用單文件組件來(lái)開(kāi)發(fā)的更為復(fù)雜的單頁(yè)應(yīng)用。

目前在我參與開(kāi)發(fā)維護(hù)的項(xiàng)目中已經(jīng)使用上了Vue.js的一些基本功能归敬，下面兩幅圖來(lái)自項(xiàng)目截圖酷含。

vue-in-cur-poj.png

vue-in-cur-poj-2.png

Vue.js基本功能

• 視圖元素響應(yīng)式
• 數(shù)據(jù)雙向綁定，解放DOM操作
• 只關(guān)注視圖層汪茧，漸進(jìn)式插件

視圖元素響應(yīng)式

//視圖
<div id="app">{{msg}}</div>

//JS邏輯
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello world'
  }
})

上圖中椅亚，我們?cè)谝晥D里聲明一個(gè)變量msg，它被包在一個(gè)雙花括號(hào)"{{}}"中陆爽，以此表明它是一個(gè)Vue所管理的視圖變量元素什往。同時(shí)，我們?cè)贘S中新建一個(gè)Vue對(duì)象慌闭，其中的el對(duì)應(yīng)"#app"别威，表示改Vue對(duì)象管轄的視圖范圍為id是app所對(duì)應(yīng)的區(qū)域；data中有一個(gè)msg屬性驴剔，對(duì)應(yīng)視圖中的雙花括號(hào)變量msg省古。一旦我們新建好這個(gè)Vue對(duì)象，所有對(duì)于該對(duì)象data屬性中的msg進(jìn)行操作丧失，會(huì)同步反應(yīng)在視圖中的{{msg}}上豺妓，這個(gè)視圖變量元素即具有響應(yīng)式。

數(shù)據(jù)雙向綁定，解放DOM操作

• 雙向綁定：可以理解為JS邏輯中的數(shù)據(jù)的更改會(huì)實(shí)時(shí)的反映在視圖上琳拭；同時(shí)任何從視圖中過(guò)來(lái)的數(shù)據(jù)或者事件训堆，能夠?qū)崟r(shí)的反映在邏輯中。
• 一旦視圖和邏輯之間規(guī)定好需要綁定的數(shù)據(jù)和事件白嘁，那么業(yè)務(wù)邏輯就能專注數(shù)據(jù)處理坑鱼，而無(wú)需手動(dòng)管理DOM，這樣就實(shí)現(xiàn)了視圖和邏輯各司其職絮缅。

一個(gè)例子：

輸入框中的輸入的字符串實(shí)時(shí)顯示在視圖上鲁沥；同時(shí)當(dāng)用戶點(diǎn)擊視圖中的一個(gè)按鈕時(shí)，視圖中的字符串反向之后在輸出到視圖上耕魄。

DOM操作

//視圖
<div id="app">
    <p id="msg"></p><input id="inputMsg" type="text">
    <p id="gsm"></p><button id="reverseMsg">Reverse</button>
</div>

//邏輯
document.getElementById('inputMsg').addEventListener('input', function({
  document.getElementById('msg').innerText = this.value
}), false)

document.getElementById('reverseMsg').addEventListener('click', function({
  var msg = document.getElementById('msg').innerText
  document.getElementById('gsm').innerText = msg.split('').reverse().join('')
}), false)

Vue處理

//視圖
<div id="app">
    <p>{{msg}}</p><input v-model="msg" type="text">
    <p>{{gsm}}</p><button v-on:click="reverseMsg">Reverse</button>
</div>

//邏輯
var vm = new Vue({
    el: '#app',
    data: {
        msg: "",
        gsm: ''
    },
    methods: {
        reverseMsg: function(){
            this.gsm = this.msg.split('').reverse().join('')
        }
    }
})

Vue.js組件

• 易維護(hù)
• 易復(fù)用

組件系統(tǒng)是 Vue.js 另一個(gè)重要概念画恰，因?yàn)樗峁┝艘环N抽象，讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用吸奴。如果我們考慮到這點(diǎn)允扇，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)。

components-concept.png

一個(gè)自定義的按鈕

<div id='app'>
  <wds-button></wds-button>
</div>

<template id='template-wds-button'>
  <button class="wds-button">默認(rèn)按鈕</button>
</template>

var wdsButton = {
  template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  }
})

父組件傳遞數(shù)據(jù)到子組件: props

<div id='app'>
  <wds-button></wds-button>
  <wds-button type="success" btn-name="成功按鈕"></wds-button>
</div>

<template id='template-wds-button'>
  <button v-bind:class="['wds-button', type ? 'wds-button--' + type: '']">{{btnName}}</button>
</template>

var wdsButton = {
    props: {
        btnName: {
            type: String,
            default: '默認(rèn)按鈕'
        },
        type: {
            type: String,
            default: ''
        }
    },
    template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  }
})

was-button 組件描述

Props

子組件將數(shù)據(jù)傳回父組件：自定義Event

<div id='app'>
  <wds-button v-on:wds-button-click-event="alertButtonName" type="warning" btn-name="警告按鈕"></wds-button>
</div>

<template id='template-wds-button'>
  <button class="wds-button" v-bind:class="['wds-button', type ? 'wds-button--' + type: '']" v-on:click="wdsButtonClick">{{btnName}}</button>
</template>

var wdsButton = {
    props: {
        btnName: {
            type: String,
            default: '默認(rèn)按鈕'
        },
        type: {
            type: String,
            default: ''
        }
    },
    methods: {
      wdsButtonClick: function(){
        this.$emit('wds-button-click-event', this.btnName, this.type)
      }
    },
    template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  },
  methods: {
    alertButtonName: function(btnName, type){
      alert(btnName)
    }
  }
})

was-button 組件描述

Props

events

Vue.js單文件組件

• 組件應(yīng)該內(nèi)聚自己的樣式(HTML/CSS)和邏輯(JS)
• 一個(gè)組件對(duì)應(yīng)一個(gè)文件

文件和組件一一對(duì)應(yīng)：.vue文件

vue-file-sample.png

.vue文件無(wú)法直接運(yùn)行在瀏覽器上奄抽，通過(guò)webpack + vue-loader的方式來(lái)將Vue組件轉(zhuǎn)化為JS模塊蔼两。

• webpack： 前端資源模塊化管理打包工具。
• vue-loader: webpack下處理.vue文件的的插件逞度。

一個(gè)例子：

一個(gè)頁(yè)面中有多個(gè)按鈕，每點(diǎn)擊一個(gè)按鈕彈出toast信息妙啃，按鈕和toast都自定義档泽。代碼可以下載這里。

vue-webpack-demo-directory.png

小結(jié)

前端技術(shù)日新月異揖赴，如果你今年還沒(méi)開(kāi)始學(xué)某門(mén)技能馆匿，明年就可以用不學(xué)它了。

end-emoji.jpeg