标签：
这两天学了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中
在App.vue中，还有“store”这样一条语句，它表示的是vuex目录下的store.js：
store.js中存储的是整个表单系统的数据，也就是一个顶级的数据库，所有关于表单的更新都必须反馈到这个文件中，那么这是一种vuex的实例。
直接在js文件中写如下语句就可以生成一个vuex实例：
Vue.use(Vuex)
在那里面会有：初始表单数据，以及对表单数据进行更新的方法，比如：
constant 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的函数methodx
现在，我们可以通过store.state来读取state对象，或者通过dispatch某mutation名字来出发状态state更改：
store.dispatch(‘Method1‘);
标签：
原文地址：http://www.cnblogs.com/yyh1993/p/5846586.html
