首页 > 代码库 > Vuejs使用笔记 --- 框架

Vuejs使用笔记 --- 框架

2024-08-12 07:36:26   223人阅读

这两天学了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使用笔记 --- 框架


联系
我们