这两天学了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内部实现　　

　　

　　

Vuejs使用笔记 --- 框架的更多相关文章

  1. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

  2. VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...

  3. VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...

  4. VueJs项目笔记

    ======================知识点总结=========================== 一.keep-alive(实现页面的缓存) 二. 移动端固定定位的解决方案 三. Vue表 ...

  5. OpenGL超级宝典笔记----框架搭建

    自从工作后,总是或多或少的会接触到客户端3d图形渲染,正好自己对于3d图形的渲染也很感兴趣,所以最近打算从学习OpenGL的图形API出发,进而了解3d图形的渲染技术.到网上查了一些资料,OpenGL ...

  6. Vuejs学习笔记1

    首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...

  7. Vuejs使用笔记 --- component内部实现

    现在来系统地学习一下Vue(参考vue.js官方文档): Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件. Vue.js拥抱数据驱动的视图概念,这意味着我们 ...

  8. vuejs学习笔记（1）--属性，事件绑定，ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  9. vuejs学习笔记（2）--属性，事件绑定，ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

随机推荐

  1. 视图（View） – ASP.NET MVC 4 系列

           精心编写的整洁代码是开发一个可维护 Web 应用程序的基础.但用户在浏览器中访问时,这些工作他们是看不见的.用户对应用程序的第一印象,以及与应用程序的整个交互过程都是从视图开始的.    ...

  2. windows系统下在dos命令行kill掉被占用的pid (转)

    原文出自:http://www.2cto.com/os/201304/203771.html   windows系统下在dos命令行kill掉被占用的pid   1.开始-->运行-->c ...

  3. [2014.01.27]wfTextImage 文字图像组件 1.6

    全新开发的文字转图像组件--wfTextImage,使用简单,功能强大,图像处理效果极佳.     将大段的文本内容转换成GIF图片.     有效防止文字内容被复制抄袭,有效保护文字资料.      ...

  4. STM32是否可以跑linux

    操作系统有两种 用MMU的 和 不用MMU的用MMU的是Windows MacOS Linux Android不用MMU的是FreeRTOS VxWorks ucOS... CPU有两种 带MMU的 ...

  5. tokudb引擎磁盘空间不足导致写入失败的调查

    故障现象 2016.1.1号早上4点左右,zabbi数据库服务器报警,写入数据失败.登陆机器后检查发现磁盘空间使用95%没有用满,进去zabbix数据库,执行insert命令提示错误“errir 10 ...

  6. day3 字典，集合，文件

    一.深浅copy 浅copy只copy第一层,不copy第二层.copy后,第一层指向不同内存地址.第二层指向相同的内存地址. 导入copy模块,deepcopy深copy.deepcopy后,均指向 ...

  7. 基于Autofac, Castle.DynamicProxy的动态WCF解决方案(原创)

    本方案解决了下面3个主要的问题: 1.减少配置,为了避免每次新增service都需要去修改配置文件,包括服务器端跟各个客户端的. 2.能够使用函数重载,泛型函数,以及泛型类. 3.使项目能够快速地在w ...

  8. hbase基础-系统架构

    HBase 系统架构 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列 ...

  9. vim常用操作

    vim filename 编辑一个文件 在一般模式里按yy是复制的意思(复制当前行),按yy之前先按相应的数字键就是复制光标所在行到指定的行,然后按p粘贴在一般模式里按dd是删除的意思(也叫做剪切), ...

  10. Ubuntu 下安装 SQL Server 2016初探

    安装步骤参官方 https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-setup-ubuntu 执行命令如下: .Enter supe ...