Vuejs使用笔记 --- 框架
这两天学了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使用笔记 --- 框架的更多相关文章
- VueJs 学习笔记
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
- VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...
- VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...
- VueJs项目笔记
======================知识点总结=========================== 一.keep-alive(实现页面的缓存) 二. 移动端固定定位的解决方案 三. Vue表 ...
- OpenGL超级宝典笔记----框架搭建
自从工作后,总是或多或少的会接触到客户端3d图形渲染,正好自己对于3d图形的渲染也很感兴趣,所以最近打算从学习OpenGL的图形API出发,进而了解3d图形的渲染技术.到网上查了一些资料,OpenGL ...
- Vuejs学习笔记1
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...
- Vuejs使用笔记 --- component内部实现
现在来系统地学习一下Vue(参考vue.js官方文档): Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件. Vue.js拥抱数据驱动的视图概念,这意味着我们 ...
- vuejs学习笔记（1）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
- vuejs学习笔记（2）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
随机推荐
- NTP时间同步服务器设置
一.Window Server设置 [服务器端设置]1) 修改注册表以下键值:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\ ...
- webpack es6 to es5支持配置
1. 安装webpack npm install webpack --save-dev 2. 安装babel 实现 ES6 到 ES5 npm install --save-dev babel-co ...
- C# 多线程详解 Part.04（Lock、Monitor、生产与消费）
系列1 曾经说过:每个线程都有自己的资源,但代码区是共享的,即每个线程都可以执行相同的函数. 这可能带来的问题就是多个线程同时执行一个函数,并修改同一变量值,这将导致数据的 ...
- Javascript模式（第三章字面量与构造函数）------读书笔记
一 对象字面量 1.1对象字面量的语法 1,对象键值对哈希表,在其他的编程语言中称之为“关联数组”, 2 键值对里面的值,可以是原始类型也可以是其他类型的对象,称之为属性,函数称之为方法 3 自定义对 ...
- switch
关于java中switch使用的一些说明 switch(表达式) { case常量表达式1:语句1; .... case常量表达式2:语句2; default:语句; } default就是如果没有符 ...
- ruby生成随机成绩
生成16个86到99范围内的值,并且每个成绩打印一行,这样就可以复制粘贴到Excel中! 16.times {|x| puts (86..99).to_a.sample}
- [手机取证] Apple Watch取证初探
转载文章请注明出处 1. 关于Apple Watch 苹果公司在2015年3月正式发布了智能手表Apple Watch,包括Apple Watch.Apple Watch Sport以及Apple W ...
- 转换实例存储支持为EBS支持的AMI
转换实例存储支持为EBS支持的AMI 注:不能将实例存储支持的Windows AMI 转换为 EBS 支持的 AMI.并且,你只能转换你所拥有的 AMI. 1. 从一个EBS支持的AMI启动一个Ama ...
- 经典算法C++版（参考一线码农博文）
鉴于一线码农的算法博文基本通过C#完成,此处用C++再实现一遍,具体解法可参考其博文. 地址:http://www.cnblogs.com/huangxincheng/category/401959. ...
- XE6 & IOS开发之免证书真机调试（2）：连接真机并运行App（有图有真相）
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 连接真机前,请先确保真机 ...