这两天学了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. C#-2 wpf 项目编程结构设计

    View:界面布局 EXCEL ViewModel:流程,数据粘合胶水 Model: 1)DB 结构 (数据库结构) 2)绑定的数据(界面交互数据) Service:1)BLL(画流程图)画业务逻辑图 ...

  2. JavaScriptPolyfillShim 在JavaScript中Shim和Polyfill有什么区别?

    在JavaScript的世界里,有两个词经常被提到,那就是Shim和Polyfill,它们指的都是什么,又有什么区别?在本文中,将简短的给大家介绍他们之间的联系和区别.Shim一个shim就是一个库, ...

  3. Python-SocketServer源码

    贴到博客,地铁上看- """Generic socket server classes. This module tries to capture the various ...

  4. mylistview 中item的子项的布局文件xml

    @Override public View getView(final int position, View view, ViewGroup parent) { System.out.println( ...

  5. geohash基本原理

    geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码,这种方式简单粗暴,可以满足对小规模的数据进行经纬度的检索 目录: 经纬度常识 认 ...

  6. Window 消息大全

    消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变窗口尺寸.按下键盘上的一个键都会使Windows发送一个消息给应用程序. 消息本身是作为一个记录传递给应用程序 ...

  7. 15、java中的内部类介绍

    内部类顾名思义就是定义在类中的类,下面做一个简单介绍: 内部类的访问规则:1,内部类可以直接访问外部类中的成员,包括私有. 之所以可以直接访问外部类中的成员,是因为内部类中持有了一个外部类的引用,格式 ...

  8. Hadoop总结篇之五---模块间是怎么驱动执行的

    在MRv1中,各个模块间驱动运行的方式是函数调用的方式.这是同步的过程,上一模块调用下一模块函数后,等待其执行.效率不高. 在MRv2中做了改进,yarn基于事件驱动的并发模型.在详细介绍前,先看下图 ...

  9. C指针详解(经典,非常详细)

    前言:复杂类型说明要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其优 ...

  10. Android生命周期

    Android的生命周期如下图所示: A和B两个Activity,从A启动B活动.执行的方法: A活动 onCreate() onStart() onResume()                 ...