Vuejs Using Notes---Frames

These two days to learn the Vuejs template, in this record.

This is the entire configuration of the large folder, and now we see all the files do not need to go to the Tube, said to pay attention to only need to pay attention to "index.html"

"Index.html" Inside is this:

<! DOCTYPE html>
Inside the label <app> is our entire page Component,vuejs will be the various parts of the page as component build up, the entire page is a large component.
So where's the app? Under the SRC folder: There is a file called App.vue, which is where the Vue instance named app is stored.
If you need to register multiple Vue objects in a file, you can define the following in JS (Vuejs official website code, local registration):
var child = Vue.extend ({/* ... */})  //Define a component named children var Parent = vue.extend ({  Template: ' ... '), Components  : {    //<my-component> can only be used within the parent component Template    ' my-component ': Child   //This is an internal way to indicate that the parent component contains child, Use the child component directly with the <my-component></my-component> tag in the parent Component  }})
　　
Go back to App.vue and look at the script code inside:
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 statement: Declare the component or VUEX that it uses (global data container, which I understand, later)
2. Export statement: Exports its composition, components include header and index, and the data container is store.
The HTML code for App.vue is as follows:
<template>    <div id= "app" >        <v-header></v-header>        <router-view keep-alive ></router-view>    </div></template>
Router-view is a top-of-the-line routing chain that renders a component that matches the top-level route, that is, the component declared within Router.map, and we first look at 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)}}    )
For example, we have a statement in a function:
this. $router. Go ('/components/index ');
Then index this component will be rendered in App.vue, that is, the component will be displayed in the current page.
You can see that the last two router look a bit special:
'/preview/:questid ': {...}
In fact, this is a dynamic path rendering, such as in a form management system, there are many forms, each form has an ID, then open a different form, there will be different questid, then you need a dynamic path. The capture of this dynamic path is then used:
this. $router. Go ('/preview/${this.questionnaire.id} ')//in publish under Actions, Vuex, in Src/create.vue
In App.vue, there is a "store" statement, which represents the store.js in the Vuex directory:
Store.js is stored in the entire form system data, that is, a top-level database, all the updates about the form must be fed back into this file, then this is a Vuex instance.
A Vuex instance can be generated by writing the following statement directly in the JS file:
Vue.use (Vuex)
There will be: the initial form data, and the method of updating the form data, such as:
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)),  //All questionnaires, using KEY to retrieve
    Currentquestionaire:null  //Current operational questionnaire
}
function Updatestorage (state) {
    Updates the local storage whenever questionaire (state) has an update localstorage
    Localstorage.setitem (KEY, Json.stringfy (state.questionairelist))
}export default New Vuex.store ({State    ,    mutations})
Here, we have stored three original forms, defined the method inside the state change mutations, and defined the function of distributing mutations METHODX
Now, we can read the state object through Store.state, or dispatch a mutation name to make a status change:
Store.dispatch (' Method1 ');
　　
　　
 Vuejs using notes---frames