码迷,mamicode.com
首页 > Web开发 > 详细

Vuejs使用笔记 --- 框架

时间:2016-09-06 18:30:29      阅读:793      评论:0      收藏:0      [点我收藏+]

标签:

这两天学了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‘);

  

 

  

 

Vuejs使用笔记 --- 框架

标签:

原文地址:http://www.cnblogs.com/yyh1993/p/5846586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!