"" " Node ~ ~ Python: Node is used to prepare running js With c ++ code npm (cnpm) ~~ pip: npm is a terminal application store, can change the domestic source CNPM vue ~ ~ Django: vue is used to build vue distal item 1) installation node official website to download the installation package, installation fool: HTTPS: //nodejs.org/zh-cn/ 2) change source mounting CNPM >: -g CNPM --registry the install NPM = HTTPS: // Registry .npm.taobao.org 3) mounted scaffolding vue item >: cnpm install -g @ vue / cli Note: 2 or the terminal 3 when the installation fails, can empty the buffer npm step was repeated failed npm --force cache Clean "" "
1 ) into the directory where the project >: cd *** 2 ) Creating a project > : VUE the Create Project name 3) project initialization
Select a space, press Enter
1 ) Open vue project with PyCharm
2) add configuration npm start
V- ├── proj | ├── node_modules // current projects all depend, generally not portable to other computer environments | ├── public | | ├── favicon.ico // tag icon | | └── index. html // current page items only | ├── src | | ├── Assets // static resource img, CSS, JS | | ├── components // widgets | | ├── views // page components | | ├── App.vue // root component | | ├── main.js // global script file (entry projects) | | ├── router.js // routing script file (url links and page routing configuration components mapping relationships) | | └── store.js // warehouse script file (vuex plug-in configuration files, data warehouse) | README.md ├── └ └── ** profile
# . 1) Template: There is only one root tag # 2) Script: component object must export the default {} Export # . 3) style: style clear scoped tag attribute, representing the pattern only work (assembly of the internal components of the pattern )
<template> <div class="test"> </div> </template> <script> export default { name: "Test" } </script> <style scoped> </style>
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
Vue from Import 'vue' // load vue environment Import from the App './App.vue' // load the root assembly Import from Router './router' // load routing environment Import from Store './store' // Load data warehouse environment Vue.config.productionTip = to false new new Vue ({ EL: '#app' , Router, Store, the render: function (readFn) { return readFn (the App); }, });
1 ) Load mian.js start the project I) Import Vue from ' vue ' project environment loading vue II) Import the App from ' ./App.vue ' loading assembly for rendering the replacement root mount point III) Import Router from ' . / Router ' load routing script file, enter the route configuration 2 ) load router.js file, provides routing services for the project, and load routing (mapping between links and page assembly) configured Note: No matter what the route is currently rendering , must be a root page rendering component, linked page component matched to only replace the root assembly <Router-View> </ Router-View> . 3) If a request to change the link (route change), it will match the new link corresponding to page components, a new page will replace the component rendering router-view label, replacing the previous page labels (that is, the completion of the page jump)
main.js: The contents of the file unchanged
< Template > < div ID = "App" > <-! URL path loads different page components eg: / red => RegPage | / blue => BluePage replace router-view tab, to complete the handover of the page -> < Router-View > </ Router-View > </ div > </ Template >
<template> <div class="red-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "RedPage", components: { Nav }, } </script> <style scoped> .red-page { width: 100vw; height: 100vh; background-color: red; } </style>
<template> <div class="blue-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "BluePage", components: { Nav } } </script> <style scoped> .blue-page { width: 100vw; height: 100vh; background-color: blue; } </style>
// ...
import TanPage from "./views/TanPage";
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// ...
{
path: '/tan',
name: 'tan',
component: TanPage
}
]
})
... <li> <router-link to="/tan">土页</router-link> </li> ...
# 1) a component from creation to destruction, it is called the life cycle of components # 2), during the destruction of the components to create, there will be a number of time-critical node, such as the components to be created, the component is created when, and data rendering component is completed, the assembly is to be destroyed, the destruction of finished components and so time node, each time a node, vue all provide a callback function (time to reach the node in the assembly, it will trigger corresponding to the callback function, the function can be completed in the business logic of the node to be completed) # 3) is a function of the life cycle of the hook members instance vue
Export default { // ... beforeCreate () { the console.log ( 'create the assembly, but the data and methods not available' ); // the console.log (the this $ Data.); // the console.log (the this . $ options.methods); the console.log ( the this .title); the console.log ( the this .alterTitle); }, // the hook need to know, the general background component data request, the hooks are done / / 1) to request the page data can be assigned to variables // 2) the virtual node just stop at the DOM category, if the data needs to be done to render the page and then the secondary modification, // can add beforeMount, mounted hooks processing logic created () { the console.log ( 'component creates the data and methods provided' ); // console.log(this.$data); // console.log(this.$options.methods); console.log(this.title); console.log(this.alterTitle); console.log(this.$options.name); }, destroyed() { console.log('组件销毁完毕') } }
"" " . 1) Router-Link will be parsed as a tag, specified by the path completion to jump, but can not add system events (as is the tag component) 2) can be used in the process js this. $ Router.push ( ' path ') jump completion logic 3) may be used in the process js this. $ route.path route to get the current page request "" "
<Template>
<div class = " NAV " >
<-! using vue-router complete page jump, can not use a label (page refresh occurs, the essence of a project is reloaded Interface) ->
<ul>
< the Click @ = Li " changePage ( '/') " : class = " {Active: The currentPage === '/'} " >
<! - <A the href = " / " > Home </a> ->
< ! - <-Link Router to = " / " > Home </ router-link> ->
Home
</ li>
<li @click="changePage('/red')" :class="{active: currentPage === '/red'}">
<!--<router-link to="/red">红页</router-link>-->
红页
</li>
<li @click="changePage('/blue')" :class="{active: currentPage === '/blue'}">
<!--<router-link to="/blue">蓝页</router-link>-->
蓝页
</li>
<li @click="changePage('/tan')" :class=" {Active: The currentPage === '/ Tan'} " >
<! - <-Link to Router = " / Tan " > earth page </ router-link> ->
Soil Page
</ Li>
</ UL >
</ div>
</ Template>
<Script>
Export {default
name: " Nav " ,
Data () {
return {
// do not render a page, will appear Nav loading assembly, the currentPage will be reset,
// 1 ) Hit the jump in the event, will jump page with a database stored on currentPage data updates the hook function
// currentPage: localStorage.currentPage localStorage?.currentPage: ''
// 2 ) directly created hook function, to get the current url path, the path update The currentPage
The currentPage: ''
}
},
Methods: {
changePage (Page) {
// the console.log (Page);
// When appears Nav rendering, the statement is meaningless because the data will be reset to empty currentPage
// = this.currentPage page;
// there bug, the user does not click through a direct path to complete the modification request page jump, the database is not updated data
// localStorage.currentPage = Page;
// any event in a tag, can be done by logical conditions Router
// console.log (. the this $ route); // manage routing data
// console.log (this. $ router); // management routing Jump
$ router.push the this (Page);. // logical routing jump
}
},
// current component is loaded, according to the actual path of the current location, and determines the radio tag activation
Created () {
// the console.log ( . route.path the this $);
this.currentPage = the this $ route.path;.
}
}
</ Script>
<style scoped>
.nav {
width: 100% ;
height: 60px;
background - Color: Orange;
}
.nav {Li
a float: left;
font: Normal 20px / 60px ' Microsoft yahei ';
padding: 0 30px;
}
.nav li:hover {
cursor: pointer;
background-color: aquamarine;
}
.nav li.active {
cursor: pointer;
background-color: aquamarine;
}
</style>