1、vuejs框架簡介

1)準(zhǔn)備知識

①　前端開發(fā)基礎(chǔ)html、CSS、js

②　前端模塊化基礎(chǔ)

③　對ES6有初步的了解

2)vuejs是一種輕量級的MVVM框架，同時(shí)吸收了React和Angular的優(yōu)點(diǎn)，強(qiáng)調(diào)了React組件化的概念，可以輕松的實(shí)現(xiàn)數(shù)據(jù)和展現(xiàn)的分離，也吸收了Angular靈活的指令和頁面操作的方法。

3)雙向綁定

①　在頁面上進(jìn)行的輸入會綁定到j(luò)s代碼里的變量

②　Js代碼里的變動(dòng)也會體現(xiàn)在另外一個(gè)調(diào)用該變量的頁面

2、Vuejs開發(fā)環(huán)境的搭建

1)推薦使用官方提供的命令行工具：

快速下載一套基于vuejs的開發(fā)模板，不僅包含了vuejs的框架，還包含了vuejs打包工具、測試工具、開發(fā)調(diào)試的服務(wù)器等，可以不必關(guān)心具體的打包和部署的細(xì)節(jié)，把關(guān)注點(diǎn)放在vuejs本身對項(xiàng)目功能的實(shí)現(xiàn)上。

2)命令行工具的安裝及使用

npm：node的一個(gè)包管理工具

Windows系統(tǒng)還需要手動(dòng)安裝git

技巧：nmp在國內(nèi)網(wǎng)絡(luò)環(huán)境會很慢，推薦使用淘寶的一個(gè)npm鏡像（nmp.taobao.org），先使用命令sudi npm install -g cnpm --registry=https://registry.nmp.taobao.org安裝cnpm安裝到系統(tǒng)，以后使用npm的地方就使用cnpm來進(jìn)行替換。

步驟：

①　使用命令sudo cnpm install -g vue-cli全局安裝vue-cli（-g指的是全局安裝，將安裝到系統(tǒng)的node目錄下，不加-g會安裝到當(dāng)前目錄）

②　初始化一個(gè)項(xiàng)目，使用vue init webpack my-PRoject創(chuàng)建一個(gè)基于”webpack”的新項(xiàng)目。第一個(gè)參數(shù)webpack是項(xiàng)目類型，表示使用webpack這套模板來進(jìn)行壓縮和打包，第二個(gè)參數(shù)my-project是項(xiàng)目名稱。

③　使用命令cd my-project進(jìn)入my-project目錄，目錄下的src目錄是后續(xù)開發(fā)的目錄。Src目錄下有App.vue文件和assets文件夾及components文件夾。但是，下載下來的項(xiàng)目并不能直接跑起來，需要下載其依賴。

④　使用命令sudo npm install或sudo cnpm install（較快）可以直接安裝所有依賴，因?yàn)閙y-project目錄下有一個(gè)package.json文件。安裝好后my-project目錄下會多出一個(gè)node_modeules目錄。

⑤　使用命令npm run dev運(yùn)行項(xiàng)目，這時(shí)服務(wù)器就被啟動(dòng)，它監(jiān)聽的端口是localhost:8080，運(yùn)用瀏覽器訪問localhost:8080即可看到vuejs的模板頁面。隨后只需要在src目錄下的App.vue進(jìn)行具體的項(xiàng)目開發(fā)即可。說明一點(diǎn)，vuejs有一個(gè)熱更新，對App.vue進(jìn)行修改后，保存，頁面會進(jìn)行相應(yīng)的更新。

3、從*.vue到頁面

用webpack將*.vue打包成.Hml、.css和.js，其中.js其實(shí)就是一個(gè)新的Vue對象，數(shù)據(jù)（model）層都在Vue對象里，展現(xiàn)層都在.html里。

Vue.js的一個(gè)組件包括：<template></template>包裝的html、<style></style>包裝的css和<script></script>包裝的js。

一個(gè)最簡單的實(shí)例：

<div id=”app”>

{{message}}

</div>

new Vue({

el: “#app”,

data:{

message: “Hello Vue.js”

}

})

4、Vue.js組件的重要選項(xiàng)

1)Vue.js組件的重要選項(xiàng)

①　data：所有數(shù)據(jù)都放在data這個(gè)對象中，data中可以進(jìn)行雙向綁定，通過this可以訪問數(shù)據(jù)。

②　methods：所有方法都放在message這個(gè)對象中。

③　watch：監(jiān)聽data中的數(shù)據(jù)變化，數(shù)據(jù)變化則執(zhí)行相應(yīng)的方法。

例：

new Vue({

data: {

a: 1,

b: []

},

methods: {

doSomething: function() {

this.a++;

}

},

watch: {

‘a(chǎn)’: function(val, oldVal) {

Console.log(val, oldVal)

}

}

})

2)模板指令——html和vue對象的粘合劑

模板指令寫在html里。

①　數(shù)據(jù)渲染：v-text、v-html、{{}}

a. 三者不等價(jià)，v-text是格式處理了html，v-html保存html結(jié)構(gòu)；

b. 其值都對應(yīng)到Vue對象數(shù)據(jù)源里的數(shù)據(jù)

例：

<p>{{a}}</p>

<p v-text=”a”></p>

<p v-html=”a”></p>

new Vue({

data: {

a: 1,

b: []

}

})

②　控制模塊隱藏：v-if、v-show

控制元素的顯示和隱藏，區(qū)別在于v-if直接不渲染這個(gè)DOM元素，v-show則是通過css的display:none來進(jìn)行隱藏，在代碼里是能看到這個(gè)DOM元素的。

例：

<p v-if=”isShow”></p>

<p v-show=”isShow”></p>

new Vue({

data: {

isShow: true

}

})

③　渲染循環(huán)列表：v-for

渲染Vue對象數(shù)據(jù)源里的數(shù)組列表。

例：

<ul>

<li v-for=”item in items”>

<p v-text=”item.label”></p>

</li>

</ul>

new Vue({

data: {

items: [

{

label: “apple”

},

{

label: “banana”

}

]

}

})

④　事件綁定：v-on

簡寫模式：@

例：

<button v-on:click=”doThis”></button>

<button @click=”doThis”></button>

new Vue({

methods: {

doThis: function(someThing) {

}

}

})

⑤　屬性綁定：v-bind

對元素的屬性的操作

最常用的是class，v-bind:class可以簡寫為:class，當(dāng)然v-bind:src也可以簡寫為:src。

對于class，假如里面是對象，key指的是class的名字，其值是對這個(gè)class是否展現(xiàn)的一個(gè)判斷；假如里面是數(shù)組，則數(shù)組元素在data里面是一個(gè)字符串，是要直接展示出來的。顯然，對象里的變量是布爾值，是對這個(gè)class是否展現(xiàn)的一個(gè)判斷，數(shù)組元素則是字符串。

3)小結(jié)

①　new一個(gè)vue對象時(shí)候可以設(shè)置它的屬性，其中最重要的包括三個(gè)，分別是data，methods，watch。其中data代表vue對象的數(shù)據(jù)，methods代表vue對象的方法，watch設(shè)置了對象監(jiān)聽的方法。

②　Vue對象里的設(shè)置通過html指令進(jìn)行關(guān)聯(lián)。

③　重要的指令包括：v-text渲染數(shù)據(jù)、v-if控制顯示、v-on綁定事件、v-for循環(huán)渲染等。

例：

<img v-bind:src=”imageSrc”>

<div :class=”{red: isRed}”></div>

<div :class=”[classA, classB]”></div>

<div :class=”[{classA, {classB: isB, classC: isC}]”></div>