本文章僅僅是自己對說明文檔的總結，用比較容易懂的說法表示出來
讓正在學習前後端分離的朋友們看完之後舉一反三可以更快上手後端接口的編寫
畢竟vue後面跟着個.js，如果有JavaScript基礎理論上可以直接開始看了
如果是準備學習前端的話，建議直接看說明文檔
目錄
目錄結構
通過配置文檔確定我們需要了解的目錄。
| 目錄/文件 | 說明 |
|---|---|
| build |
項目構建文件（webpack） |
|
config |
配置目錄，端口號等信息在這裏設置 |
|
node_modules |
npm加載的項目依賴模塊 |
|
src |
這裏放的纔是vue的 代碼，如果要參考，學習的話主要看這個文件夾裏面的文件，包括｛ assets：圖片 components：組件文件 App.vue：項目入口文件 main.js: 項目的核心文件 ｝ |
|
static |
靜態資源目錄 |
|
test |
測試目錄 |
|
.xxxx文件 |
配置文件 |
|
index.html |
首頁入口文件，可以放統計代碼等 |
|
package.json |
項目配置文件 |
|
README.md |
項目配置文檔 |
基本語法
這裏用一段包含大部分語法的代碼總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>例一</h1>
<div v-html="message"></div>
<div>{{message}}</div>
<br><br>
<h1>例二</h1>
<input type="checkbox" v-model="ischeck">
<div v-bind:style="{display:getCheck(ischeck)}">勾選顯示/消失</div>
<br><br>
<h1>例三</h1>
<a v-on:click="ischeck2=!ischeck2" href="#">點擊顯示/消失</a>
<p v-if="!ischeck2">vue.js測試</p>
<h1>例四</h1>
<ol><li v-for="temp in 10">循環</li></ol>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>vue.js測試</h1>',
ischeck:false,
ischeck2:false
},
methods:{
getCheck:function(ischeck){
return ischeck?'none':'block'
}
}
});
</script>
</body>
</html>
本代碼可以保存爲html文件直接運行。其中有幾個需要了解的語法：
1.v-html 輸出html
2.｛｛variable｝｝ 輸出變量
3.v-bind: 屬性綁定，用了他之後，裏面的值變成變量 可以直接用 : 表示
4.v-model: 變量綁定，綁定之後同步修改組件改變的數值到變量中
5.v-if 條件判斷
6.v-on: 監聽器，發生相對應事件的時候觸發，可以直接用@表示
7.v-for 循環，寫法跟主流語言的一樣 value in object
8.methods 編寫函數的地方
computed約等於method
computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
兩者都是編寫函數的地方
watch監聽
var vm = new Vue({
el: '#app',
data: {
watchvalue : 0
},
watch : {
watchvalue :function(val) {
console.log(watchvalue)
}
}
});
vm.$watch('watchvalue ', function (newValue, oldValue) {
//可以返回舊值oldValue和 新值newValue
})
簡單的監聽可以直接用@，v-on來實現，$watch將會在vm.watchvalue改變的時候調用
修飾符
1.lazy 改變同步方式爲在 change 事件中同步
2.number 自動轉換爲number類型，像date這些
3.trim 自動過濾首尾空格
directive自定義指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
代碼的意思是自定義一個v-focus指令，用途是組件獲取焦點
路由
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
跟spring框架裏面的控制器相似
路由不是三言兩語能說完的，建議想要了解的夥伴直接搜索相對應資料。
const page1 = { template: '<div>foo</div>' }
const page2 = { template: '<div>bar</div>' }//定義組件
const routes = [
{ path: '/page1', component: page1},
{ path: '/page2', component: page2}
]//設置映射 映射到對應的組件
const router = new VueRouter({routes})//創建名爲router的實例，設置映射routes
const app = new Vue({router}).$mount('#app')//運行實例router在id爲app的組件
Ajax(axios)
基於http協議，對接後端接口最重要的是axios
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.baidu.com',{
params:{
val1:123,
val2:345
}
})
.then(response => (this.info = response))
.catch(function (error) { // 請求失敗處理
console.log(error);
});
}
})
html獲取info顯示，vue負責通過axios get接口的內容返回到info中，post也是如此。
訪問之後可以通過.then處理返回的文本，使用 then 時，會接收下面這樣的響應：
response.data
response.status
response.statusText
response.headers
response.config