1、vuejs框架簡介
1)準備知識
① 前端開發基礎html、CSS、js
② 前端模塊化基礎
③ 對ES6有初步的了解
2)vuejs是一種輕量級的MVVM框架，同時吸收了React和Angular的優點，強調了React組件化的概念，可以輕松的實現數據和展現的分離，也吸收了Angular靈活的指令和頁面操作的方法。
3)雙向綁定
① 在頁面上進行的輸入會綁定到js代碼里的變量
② Js代碼里的變動也會體現在另外一個調用該變量的頁面
2、Vuejs開發環境的搭建
1)推薦使用官方提供的命令行工具：
快速下載一套基于vuejs的開發模板，不僅包含了vuejs的框架，還包含了vuejs打包工具、測試工具、開發調試的服務器等，可以不必關心具體的打包和部署的細節，把關注點放在vuejs本身對項目功能的實現上。
2)命令行工具的安裝及使用
npm：node的一個包管理工具
Windows系統還需要手動安裝git
技巧：nmp在國內網絡環境會很慢，推薦使用淘寶的一個npm鏡像（nmp.taobao.org），先使用命令sudi npm install -g cnpm --registry=https://registry.nmp.taobao.org安裝cnpm安裝到系統，以后使用npm的地方就使用cnpm來進行替換。
步驟：
① 使用命令sudo cnpm install -g vue-cli全局安裝vue-cli（-g指的是全局安裝，將安裝到系統的node目錄下，不加-g會安裝到當前目錄）
② 初始化一個項目，使用vue init webpack my-PRoject創建一個基于”webpack”的新項目。第一個參數webpack是項目類型，表示使用webpack這套模板來進行壓縮和打包，第二個參數my-project是項目名稱。
③ 使用命令cd my-project進入my-project目錄，目錄下的src目錄是后續開發的目錄。Src目錄下有App.vue文件和assets文件夾及components文件夾。但是，下載下來的項目并不能直接跑起來，需要下載其依賴。
④ 使用命令sudo npm install或sudo cnpm install（較快）可以直接安裝所有依賴，因為my-project目錄下有一個package.json文件。安裝好后my-project目錄下會多出一個node_modeules目錄。
⑤ 使用命令npm run dev運行項目，這時服務器就被啟動，它監聽的端口是localhost:8080，運用瀏覽器訪問localhost:8080即可看到vuejs的模板頁面。隨后只需要在src目錄下的App.vue進行具體的項目開發即可。說明一點，vuejs有一個熱更新，對App.vue進行修改后，保存，頁面會進行相應的更新。
3、從*.vue到頁面
用webpack將*.vue打包成.Hml、.css和.js，其中.js其實就是一個新的Vue對象，數據（model）層都在Vue對象里，展現層都在.html里。
Vue.js的一個組件包括：<template></template>包裝的html、<style></style>包裝的css和<script></script>包裝的js。
一個最簡單的實例：
<div id=”app”>
{{message}}
</div>
new Vue({
el: “#app”,
data:{
message: “Hello Vue.js”
}
})
4、Vue.js組件的重要選項
1)Vue.js組件的重要選項
① data：所有數據都放在data這個對象中，data中可以進行雙向綁定，通過this可以訪問數據。
② methods：所有方法都放在message這個對象中。
③ watch：監聽data中的數據變化，數據變化則執行相應的方法。
例：
new Vue({
data: {
a: 1,
b: []
},
methods: {
doSomething: function() {
this.a++;
}
},
watch: {
‘a’: function(val, oldVal) {
Console.log(val, oldVal)
}
}
})
2)模板指令——html和vue對象的粘合劑
模板指令寫在html里。
① 數據渲染：v-text、v-html、{{}}
a. 三者不等價，v-text是格式處理了html，v-html保存html結構；
b. 其值都對應到Vue對象數據源里的數據
例：
<p>{{a}}</p>
<p v-text=”a”></p>
<p v-html=”a”></p>
new Vue({
data: {
a: 1,
b: []
}
})
② 控制模塊隱藏：v-if、v-show
控制元素的顯示和隱藏，區別在于v-if直接不渲染這個DOM元素，v-show則是通過css的display:none來進行隱藏，在代碼里是能看到這個DOM元素的。
例：
<p v-if=”isShow”></p>
<p v-show=”isShow”></p>
new Vue({
data: {
isShow: true
}
})
③ 渲染循環列表：v-for
渲染Vue對象數據源里的數組列表。
例：
<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，當然v-bind:src也可以簡寫為:src。
對于class，假如里面是對象，key指的是class的名字，其值是對這個class是否展現的一個判斷；假如里面是數組，則數組元素在data里面是一個字符串，是要直接展示出來的。顯然，對象里的變量是布爾值，是對這個class是否展現的一個判斷，數組元素則是字符串。
3)小結
① new一個vue對象時候可以設置它的屬性，其中最重要的包括三個，分別是data，methods，watch。其中data代表vue對象的數據，methods代表vue對象的方法，watch設置了對象監聽的方法。
② Vue對象里的設置通過html指令進行關聯。
③ 重要的指令包括：v-text渲染數據、v-if控制顯示、v-on綁定事件、v-for循環渲染等。
例：
<img v-bind:src=”imageSrc”>
<div :class=”{red: isRed}”></div>
<div :class=”[classA, classB]”></div>
<div :class=”[{classA, {classB: isB, classC: isC}]”></div>
新聞熱點
疑難解答
