一、Vue基礎
Vue.js是一個響應式數據驅動的JavaScript框架，可以簡化Dom操作。Vue.js的官方網頁在https://cn.vuejs.org
我們使用Vue.js需要在<script>中導入資源，可以分爲兩種
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
我們首先實現一個HelloWorld的實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue.js</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue.js"
}
})
</script>
</body>
</html>
在<body>項中有三個部分，最中間的<script>部分導入了Vue.js的資源，上面的部分用來顯示message的信息，下面的部分來定義一個Vue應用，並對message進行賦值，具體的代碼在接下來會詳細介紹。
el是一個掛載點，通過CSS選擇器設置vue實例管理的元素。在掛載完畢後，el命中的元素，就會被data中同名的數據替換。Vue實例的作用域是在el命中的元素內部，即使嵌套也可以。
同樣地，我們使用#app是爲了命中外部的id=“app”，我們也可以使用class=“app”，這樣需要修改el:".app"，也可以直接使用標籤選擇器el:“div”，但在實際開發中，還是建議直接使用id選擇器，因爲一般開發的時候，要求id是唯一的，而類和標籤選擇器都有可能是不唯一的。我們也可以在其他的標籤中使用，例如p或者h2等等；但要注意vue無法掛載到<html>和<body>上。
data部分定義了要置換的數據內容。data中可以不止有字符串，也可以定義其他的複雜對象
<script>
var app = new Vue({
el:"#app",
data:{
school:{
name:"NEU",
location:"瀋陽"
},
campus:["南湖校區","渾南校區"]
}
}
})
</script>
Vue.js會直接打印對象的內容
我們也可以通過school.name的方式來獲取屬性值。
二、Vue指令
在這一部分我們來介紹Vue指令
1. v-text
v-text指令用來在標籤中添加文字，
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2 v-text="message + '!'"></h2>
<h2>我想寫的是{{message + "!"}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello V-text"
}
})
</script>
</body>
我們可以看到，代碼中依舊有el掛載點和data。我們可以選擇在標籤中直接添加v-text屬性，或者直接使用嵌套的花括號。第二種的好處是可以直接在花括號周圍添加其他字符。我們還可以使用字符連接來添加字符，注意在第一種方式中，我們只能在雙引號中使用單引號。
2. v-html
v-html可以設置標籤的inner-html。
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>Go Baidu</a>"
}
})
</script>
</body>
v-html指令也可以講文字打印在網頁中，和v-text完全相同。唯一的區別在於，如果在data中賦值的字符串是HTML的結構的話，其內容就會被解析並加載。例如上面的代碼中，網頁中會有Go Baidu的鏈接，點擊即可跳轉到百度搜索的界面。
3. v-on
v-on指令可以爲某一元素添加事件。
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="事件綁定" v-on:click="doIt">
<input type="button" value="事件綁定" v-on:mouseenter="doIt">
<input type="button" value="事件綁定" v-on:dbclick="doIt">
<input type="button" value="事件綁定" @dbclick="doIt">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
// TODO
}
}
})
</script>
</body>
我們直接在對應的元素上添加v-on來添加事件，也可以直接通過@來添加事件。當我們想要更改頁面中元素的值，我們可以通過this關鍵字來訪問
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2> {{message}} </h2>
<input type="button" value="點我" @click="addInfo">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"番茄炒蛋"
},
methods:{
addInfo:function(){
this.message += "好好喫!";
}
}
})
</script>
</body>
4. v-show
v-show指令可以根據表達式的真假，讓元素顯示或者隱藏。常見的效果比如廣告或者遮罩層等等。
<div id="app">
<img src = "vue.jfif" v-show="isShow">
<button @click="vanish">點我讓圖片消失</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
vanish:function(){
this.isShow = false;
}
}
})
</script>
按鈕會在單擊事件觸發的情況下執行vanish函數，vanish函數會將isShow變量設置爲false，因此圖片就會消失了。條件表達式也可以通過引用data中的變量來進行判斷，並決定是否要顯示圖片。
5. v-if
v-if指令也是通過表達式的真假來切換元素的顯示和隱藏，但是該指令是直接操縱dom元素。
<div id="app">
<p v-if="isShow">我是一個p標籤</p>
<button @click="vanish">消失</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
vanish:function(){
this.isShow = false;
}
}
})
</script>
我們可以看到v-if的使用方法和v-show沒有什麼差別。實際上每次修改顯示的時候，v-show修改的是元素的樣式，而v-if會直接將元素從DOM樹中刪除，顯示的時候再添加回來，修改的是元素。
6. v-bind
v-bind指令可以修改元素的屬性
<div id="app">
<img v-bind:src = "imgSrc">
<img v-bind:title = "imgTitle + '!!!!'">
<img v-bind:class = "isActive?'active':''">
<img v-bind:class = "{active:isActive}">
<img :class = "{active:isActive}">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"vue.jfif",
imgTitle:"Hello V-Bind",
isActive:false
}
})
</script>
v-bind指令讓屬性讀取data中的變量，變量中可以進行字符串連接，也可以做簡單的判斷；判斷的方式可以使用三元表達式，也可以使用對象的方式。v-bind有簡寫的方式，可以去掉v-bind，直接在屬性前添加冒號。
7. v-for
v-for可以生成要顯示的表格
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index+1}} - {{item}}
</li>
<li v-for="(item,index) in objArr">
{{index+1}} - {{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["A","B","C","D","E"],
objArr:[
{name:"Jack"},
{name:"Rose"}
]
}
})
</script>
在表格元素中添加v-for屬性，並賦值字符串，字符串中第一個變量是每次循環的變量，可以修改名字，in是關鍵字，in後的是要遍歷的數組。我們還可以獲取每次遍歷的索引，需要注意的是，遍歷的元素和索引要用括號括起來，並且元素在前面，索引在後面。數組中也可以是對象，使用的時候直接訪問內部的屬性即可。
8. v-on補充
傳遞自定義參數，事件修飾符
<div id="app">
<input type="text" @keyup.enter="sayHi"/>
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
sayHi:function(){
alert("Hello");
}
}
})
</script>
我們可以通過.操作符來訪問事件更多的修飾符，上面的例子是隻有點擊回車纔可以觸發事件，更多的事件修飾符可以查看官網
9. v-model
獲取和設置表單元素的值(雙向數據綁定)
<div id="app">
<input type="text" v-model="message">
<h2> {{message}} </h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello V-model"
}
})
</script>
當對錶單元素添加v-model屬性後，需要將data中的一個遍歷與表單元素進行綁定，兩者之一發生的改變都會引起另一方的改變，因此叫做雙向數據綁定。
三、網絡編程
在這一部分，我們學習axios網絡請求庫，並如何把它和vue結合在一起
1. axios基礎
在使用之前，我們需要導入axios的資源
<script src = "https://unpkg.com/axios/dist/axios.min.js"></script>
axios通過get方法來獲取請求，get方法會返回一個Promise對象，我們使用then來添加回調函數。回調函數需要兩個，第一個是成功的回調函數，第二個是異常的回調函數。
axios.get("url?查詢字符串").then(function(response){}, function(err){})
同樣，axios也有post方法
axios.post("url",{key1:value1,key2:value2}).then(function(response){}, function(err){})
2. axios + vue.js
我們可以把axios的get和post方法寫在vue.js的methods中
var app = new Vue({
el:"app",
data:{
joke:"笑話"
},
methods:{
getJokes:function(){
var that = this;
axios.get("url").then(function(response){
that.joke = response.data;
}.function(err){});
}
}
})
需要注意的是axios中的this會改變，無法訪問到data中的數據，因此我們使用一個變量先將this存儲下來。
四、vue-cli
Vue-cli是快速構建Vue.js項目的一套命令行工具。
1. vue-cli安裝
vue-cli需要node.js，且版本大於6，最好是8。還需要版本大於3的npm和Git。
我們在配置好node.js後，直接輸入以下指令即可完成vue-cli的安裝
npm install -g vue-cli
2. 創建vue-cli項目
我們可以在終端中修改路徑到目標文件夾，之後輸入以下指令
vue init webpack hello
webpack指定的是打包的方式，hello是項目的名稱。再按下回車後，會出現一系列交互，在修改後可以按回車確認
- 項目名稱
- 項目描述
- 項目作者
- Vue Build
- 安裝Vue-Router
- 是否使用EsLint
- 是否設置單元測試
- 是否用NightWatch設置e2e測試
- 是否在項目創建後運行npm install
如果你不知道如何設置的話，直接回車選擇默認值即可。當看到Project initialization finished即代表初始化完成。
3. 項目結構
我們來查看一下項目中生成的文件結構
hello // 項目名稱
-build // 用來使用Webpack打包使用Build依賴
-config // 用來做項目配置
-node_modules // 用來管理項目中使用的依賴
-src // 存儲Vue.js的代碼[重點]
assets // 存放靜態資源[重點]
components // 存放Vue組件[重點]
router // 配置項目路由[重點]
App.vue // 項目中根組件[重點]
main.js // 項目中主入口[重點]
-static // 其他靜態文件
- babelrc // 將es6語法轉爲es5運行
- editorconfig // 項目編輯配置
- gitignore // git忽略文件
- postcssrc.js // css兼容性處理
- index.html // 項目主頁
- package.json // 依賴管理，類似於Maven的pom.xml，使用命令，不建議手動修改
- package-lock.json // 對package.json的加鎖文件
- README.md // 說明文件
4. 運行項目
要運行項目，則切換到項目根目錄下，並直接輸入
npm start dev
啓動後，通過返回的URL即可訪問網頁，默認端口爲8081。
啓動後默認顯示的是App.vue下的代碼，可以在template的div中看到代碼中使用<router-view/>加載了路由，加載的是Components下的HelloWorld.vue的內容。
5. 開發方式
Vue-cli的重點在src文件夾下，在vue-cli中，一切皆組件。在一個組件中，只有js代碼、html代碼和css。Vue-cli中是開發組件來對應每個業務模塊，日後可以將多個業務組件組合到一起形成一個前端系統。日後在使用Vue-cli開發時，不再新建html文件，而是編寫vue組件，在之後打包時，vue-cli會將組件編譯成運行的html文件。
main.js是前端的入口，在這裏定義了App，並且掛載在index.html中。但是Vue.js並不建議我們直接在這裏添加組件，而是在components下開發我們自己的組件，並通過路由來從主頁訪問我們的組件。路由在router文件夾下的index.js文件中，我們通過在該文件的routes中添加組件信息來實現路由訪問。
參考資料
[1] 前端基礎必會教程-4小時帶你快速入門vue
[2] Vue腳手架的實戰教程，已完結
歡迎加入交流羣QQ1107710098
