這兩天學了vuejs的模板，於此紀錄一下。
這是整個大文件夾的配置，現在我們看到的所有文件都不需要去管，說要關注也只需要關注“index.html”
"index.html"里面是這樣的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Questionnaire</title>
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<app></app>
<!-- built files will be auto injected -->
</body>
</html>
里面的標簽<app>就是我們整個頁面的component，vuejs將頁面的各個部分作為component搭建起來，整個頁面就是一個大的component。
那么app在哪兒呢？在src文件夾下：有一個叫做App.vue的文件，就是存放名為app的vue實例的地方。
如果需要在一個文件中注冊多個Vue對象，可以在js中如下定義（vuejs官網代碼，局部注冊）：
var Child = Vue.extend({ /* ... */ }) // 定義一個名為Child的組件
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父組件模板內
'my-component': Child // 這是一種內部的方式，表示Parent組件中包含Child，在Parent組件中直接使用<my-component></my-component>標簽即可使用Child組件
}
})
回到App.vue，看一下里面的script代碼：
import Header from './components/Header'
import Index from './components/Index'
import store from './vuex/store'
export default {
components: {
'v-header': Header,
Index
},
store
}
1. import語句：聲明其使用到的component或者vuex（全局數據容器，我是這樣理解的，后面講）
2. export語句： 導出其組成，components包括Header和Index，而數據容器為store。
App.vue的HTML代碼如下：
<template>
<div id="app">
<v-header></v-header>
<router-view keep-alive></router-view>
</div>
</template>
router-view是一個頂級的路由外鏈，其會渲染一個和頂級路由匹配的組件，也就是router.map里面所聲明的組件，我們先看看router.js：
router.map({
'/index': {
component: function(resolve) {
require(['./components/Index'], resolve)
}
},
'/create': {
component: function(resolve) {
require(['./components/Create'], resolve)
}
},
'/edit/:questId': {
component: function(resolve) {
require(['./components/Edit'], resolve)
}
},
'/preview/:questId': {
component: function(resolve) {
require(['./components/Preview'], resolve)
}
},
'/data/:questId': {
component: function(resolve) {
require(['./components/Data'], resolve)
}
}
})
比如說，我們在某個function中有一條語句：
this.$router.go('/components/Index');
那么Index這個組件就會在App.vue中進行渲染，也就是該組件會在當前頁面中顯示。
可以看到最后兩個router看起來有點特別：
'/preview/:questId':{...}
其實這是一種動態路徑的渲染，比如在一個表單管理系統，有很多表單，每個表單都有一個id，那么打開不同的表單時，就會有不同的questID，這時就需要動態路徑。那么對這種動態路徑的捕獲則采用：
this.$router.go(`/preview/${this.questionnaire.id}`) // 在src/create.vue中的vuex下的actions -> publish中，打開一個指定id的表單頁面
在App.vue中，還有“store”這樣一條語句，它表示的是vuex目錄下的store.js：
store.js中存儲的是整個表單系統的數據，也就是一個頂級的數據庫，所有關於表單的更新都必須反饋到這個文件中，那么這是一種vuex的實例。
直接在js文件中寫如下語句就可以生成一個vuex實例：
import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)
在那里面會有：初始表單數據，以及對表單數據進行更新的方法，比如：
const KEY = 'questionaireList'
let questionaire01 = {name : value}
let questionaire02 = {name : value}
let quesitonaire03 = {name : value}
const mutations = {Method1, Method2 ...}
const state = {
questionaireList: JSON.parse(localStorage.getItem(KEY)), //所有的調查問卷，用KEY來檢索
currentQuestionaire: null // 當前正在操作的調查問卷
}
function updateStorage(state){
// 每當questionaire（state）有更新時，就更新本地存儲localStorage
localStorage.setItem(KEY, JSON.stringfy(state.questionaireList))
}
export default new Vuex.Store({
state,
mutations
})
在這里，存放了三個原始表單，定義了狀態更改mutations里面的方法，定義了分發mutations的函數updateStorage
現在，我們可以通過store.state來讀取state對象，或者通過dispatch某mutation名字來出發狀態state更改：
store.dispatch('Method1');
在外部的vue組件中，通常使用如下語法來訪問store：
vuex: {
getters: {
questionnaireList: state => state.questionnaireList // 讀取表單數據
}，
actions: {
setQuest({dispatch}, item) {
dispatch('SET_QUEST', item)
},
removeQuest({dispatch}, item) {
dispatch('RM_QUEST', item)
}
}
}
在這種層層嵌套的風格中，如何使得子組件訪問父組件的屬性呢？這里需要用到props函數：
Vue.component('example', { // 注冊了一個組件
props: ['showCalendar']
})
當其他的組件使用到這個example組件時，就會得到example組件的'showCalendar'屬性。
現在，我們已經知道了vue的框架是長什么樣的，所以在使用vue的時候，我們有幾件事情是需要關注的：
1. 確定數據類型，如表單中必然包含標題、問題等
2. 確定頁面所需要的組件，比如需要一個通用的日歷組件和標題組件。
3. 確定整個工程的頁面，如創建、編輯、刪除等，都在不同的頁面操作，這些以頁面為單位的components都應該在router中進行注冊，並且編寫相關的方法來決定跳轉的時機。
4. 在每個component中設定相應的css樣式等
5. 如果需要和服務器進行數據交互還需要vue-resource，使用起來也很方便：
{ // 可參考： https://github.com/vuejs/vue-resource/blob/master/docs/http.md
// GET /someUrl
this.$http.get('/someUrl').then((response) => {
// success callback
}, (response) => {
// error callback
});
}
下面我們來看一下每一個component內部是怎么實現的 >> component內部實現