vue

Create a VUE project with VUE-CLI

The installation

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

Create a project

vue create my-project
# OR
vue ui
Copy the code

Installation and configuration: specific configuration according to the specific situation

The first step

? Please pick a preset: (Use arrow keys)

Default ([Vue 2] Babel, esLint) // Default vue2 configuration Default (Vue 3 Preview) ([Vue 3] Babel, Eslint) // Default VUe3 configuration Manually select features // Manual configuration

The second step

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

() select Vue version () Babel // transcoder, TypeScript //TypeScript is a superset of JavaScript (suffix.js) (suffix.ts) () Progressive Web App (PWA) Support // Progressive Web applications () Router // Routing () Vuex // state management () CSS pre-processors //CSS pre-processors such as less, Sass () Linter/Formatter // Code specification and error () Unit Testing // Unit Testing () E2E Testing //end to end Testing

The third step? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

3.x (Preview) //vue3.0

The fourth step? Use history mode for router? (Requires proper server setup for index fallback in production) (Requires proper server setup for index fallback in production) (Y/n

Step 5? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): // Use that CSS preprocessor

Sass/SCSS (with Dart-sass) Sass/SCSS (with Node-sass) Less // I often use the Stylus

Step 6? Pick a linter/formatter config: (Use arrow keys) // Select the code rule

ESLint with error Prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier // I often use ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier

Step 7? Pick additional lint features: (Press to select, to toggle all, to invert selection)

(*) Lint on save () Lint and fix on commit // Lint and fix on commit

Step 8? Pick a unit testing solution: (Use arrow keys)

Mocha + Chai // Mocha is flexible and provides only a simple test structure. If other functions are needed, other libraries/plug-ins need to be added. Jest must be installed in a global environment. Built Istanbul, you can see test coverage compared to Mocha: simple configuration, simple test code, easy integration with Babel, and rich expect built in

Step 9? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files //

In package.json // Stored In package.json

Step 10? Save this as a preset for future projects? (y/N) // Whether to save the configuration

The VUE project is created.

To open the file we created, start with app.vue in SRC.

Delete all of them. Type the following code

<template>
  <div id="app">

  </div>
</template>

<script>
export default {
    data(){
      return {

      }
    },
    methods: {
    
  }
}
</script>

<style lang="less">
#app {

}

</style>

Copy the code

Inside the template is HTML, which requires one and only one root element

Data in script writes data, methods writes logic

Write style inside style

Data binding

<template> <div id="app"> {{a}} <! {{a+2}} <! {{a+3>2? 'big ':' small '}} <! </div> </template> <script> export default {data(){return {a: 1'}}, methods: { } } </script> <style> #app { } </style>Copy the code

Two-way data binding: When the value of data changes, the data on the page will also change, and the value of data will also change as the data on the page changes

NextTick (): Gets updated DOM data

instruction

Instructions are special instructions that begin with a V –

v-block

v-text

Similar to interpolation, display the data of data

<template>
  <div id="app">
    <h1 v-text="msg"></h1>
  </div>
</template>

<script>
export default {
    data(){
      return {
        msg: 'Hello Vue.'
      }
    },
    methods: {
  }
}
</script>

<style>
#app {

}
</style>
Copy the code

v-html

Just like V-text, you can parse HTML tags

<template>
  <div id="app">
    <div v-html="msg"></div>
    
  </div>
</template>

<script>
export default {
    data(){
      return {
        msg: '<h1>Hello Vue.</h1>'
      }
    },
    methods: {
  }
}
</script>

<style>
#app {

}
</style>
Copy the code

v-pre

Its and its children are displayed directly, skipping compilation to speed up performance.

<template>
  <div id="app">
    <div v-pre>{{msg}}</div>
  </div>
</template>

<script>
export default {
    data(){
      return {
        msg: '<h1>Hello Vue.</h1>'
      }
    },
    methods: {
  }
}
</script>

<style>
#app {

}
</style>
Copy the code

v-once

Render it once and never change it again

< the template > < div id = "app" > < p = "add" > @ click click change: {{a}} < / p > < p v - once @ click = "add" > click the same: {{ a }}</p> </div> </template> <script> export default { data(){ return { msg: '<h1>Hello Vue.</h1>', a:1 } }, methods: { add(){ this.a++ } } } </script> <style> #app { } </style>Copy the code

v-show

Display and hide, set element attributes display: None;

< the template > < div id = "app" > < h1 v - show = "true" > {{MSG}} according to < / h1 > < h1 v - show = "false" > {{MSG}} < / h1 > don't show < / div > < / template > <script> export default { data(){ return { msg: 'Hello Vue.', } }, methods: { } } </script> <style> #app { } </style>Copy the code

v-if,v-else-if,v-else

As if… else if…. else…. Where the hidden element does not appear

< template > < div id = "app" > < p v - if = "nub > 3" > than < / p > < p v - else - if = "nub = 3" > to < / p > < p v - else > < < / p > < / div > < / template > <script> export default { data(){ return { nub: 3, } }, methods: { } } </script> <style> #app { } </style>Copy the code

v-for

Automatically loop through arrays and objects for you

<template> <div id="app"> <ul> <li v-for="(val,key) in No" :key="key"> <! Val = value; key = attribute name; key = attribute name; As may be a problem - > {{key + "-- -" + val}} < / li > < / ul > < ul > < li v - for = "(the value, the index) in No. Girlfriend" : the key = "index" > <! -- value is a value, </li> </ul> </div> </template> <script> export default {data(){return {No:{name:" not to forget ", Age: "20", the girlfriend: [' ice ice ', 'black jia jia', 'rem']}}}, the methods: {}} < / script > < style > # app {} < / style >Copy the code

v-model

Data binding for forms

<template> <div id="app"> <input type="text" V-model =" MSG "> <br> </div> </template> <script> export default {data(){return {MSG: "", } }, methods: { } } </script> <style> #app { } </style>Copy the code

Modifiers for v-models

<template> <div id="app"> <input type="text" V-model. lazy=" MSG "> <br> </div> </template> <script> export default {data(){return {MSG: "",}}, methods: { } } </script> <style> #app { } </style>Copy the code

A commonly used modifier

Change the change method to lazy

Enter the number: number

Remove front and rear whitespace: trim

v-bind

Property binding, sometimes a property is dynamic and can change its value after binding.

Basic usage

<template>
  <div id="app">
  <a :href="url">去</a>
  </div>
</template>
<script>
export default {
    data(){
      return {
        url: "http://www.baidu.com/",
      }
    },
    methods: {
     
  }
}
</script>

<style>
#app {

}
Copy the code

Bind class (object)

<template>
  <div id="app"> 
  <h1 :class="{red:isred}">hello world. </h1>
  </div>
</template>
<script>
export default {
    data(){
      return {
        isred:true,
      }
    },
    methods: {
     
  }
}
</script>

<style>
 .red{
    color: red;
  }
</style>
Copy the code

Bind class (array)

<template>
  <div id="app">
  <h1 :class="['red']">hello world. </h1>
  </div>
</template>
<script>
export default {
    data(){
      return {
        
      }
    },
    methods: {
     
  }
}
</script>

<style>
 .red{
    color: red;
  }
</style>
Copy the code

The binding style

<template>
  <div id="app">
  <h1 :style="{color:col}">hello world. </h1>
  </div>
</template>
<script>
export default {
    data(){
      return {
        col:'red'
      }
    },
    methods: {
     
  }
}
</script>

<style>

</style>
Copy the code

Bind style(Array)

<template>
  <div id="app">
  
  <h1 :style="[col]">hello world. </h1>
  </div>
</template>
<script>
export default {
    data(){
      return {
        col:{color:'red'}
      }
    },
    methods: {
     
  }
}
</script>

<style>

</style>
Copy the code

v-on

Bind events, @ for short

Basic usage

<template>
  <div id="app">
  <p>{{a}}</p>
  <button @click="add">加一</button>
  </div>
</template>
<script>
export default {
    data(){
      return {
        a:1
      }
    },
    methods: {
     add(){
       this.a++
     }
  }
}
</script>

<style>

</style>
Copy the code

Common events are:

Click, click

Double-click: dblclick

Mouseover: mouseover

Mouse over: mouseleave

Mouse Movement: Mousemove

Get focus: Focus

Out of focus: Blue

Button up: keyUp

Key press: keyDown

Passing parameters

< the template > < div id = "app" > < p > {{a}} < / p > < button @ click = "add (2)" > plus two < / button > < / div > < / template > < script > export default { data(){ return { a:1 } }, methods: { add(nub){ this.a=this.a+nub; } } } </script> <style> </style>Copy the code

Modifier for v-on

Events can be specified

< the template > < div id = "app" > < a href = "https://www.baidu.com/" @ click. Prevent = "add" > add a < / a > <! {{a}} </div> </template> <script> export default {data(){return {a :1}}, methods: { add(){ this.a++ } } } </script> <style> </style>Copy the code

Common modifiers are

Stop bubbling: stop

Prevents the default behavior: prevent

Trigger only once: once

Self triggers itself: self

Keys triggered by the keyboard:.enter or. The key code

Modifiers can be used together and in order

Custom instruction

Filter filter

Data can be modified in a fixed format

Global filter

All files are available

< the template > < div id = "app" > < p > {{name | no}} < / p > < / div > < / template > < script > export default {data () {return {name: "don't forget"}  }, methods: { }, } </script> <style> </style>Copy the code

Above is using filters. Global filters need to be defined in main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.filter('no'._= >{// Global filter
  return_ +'the most handsome'
})

Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')

Copy the code

Local filter

The current file is available

< the template > < div id = "app" > < p > {{name | no}} < / p > < / div > < / template > < script > export default {data () {return {name: "don't forget"} }, methods: {}, filters:{no(MSG){return MSG +' - '}}} </script> <style> </style>Copy the code

The listener watch

It can listen for data changes and trigger when data changes

< the template > < div id = "app" > < p > {{a}} < / p > < button @ click = > "add" to add a < / button > < br > now value: {{newval}} < br > previous value: {{old}} </div> </template> <script> export default { data(){ return { a:1, newval:'', old:'' } }, methods: {the add () {this. +}}, watch: {a (newval, old) {/ / the first parameter is the value after the change, Newval =newval this.old=old}} </script> <style> </style>Copy the code

Computed attribute computed

Putting too much logic in {{}} increases computer processing and, in computed, modifies data and saves it

Attribute names in computed cannot be the same as those in data

<template> <div id="app"> {{fullname}} </div> </template> <script> export default {data(){return {firstname:' Orient ', Lastname :' old win ',}}, methods: {}, computed:{fullName (){return this.firstName + '-' + this.lastName; } } } </script> <style> </style>Copy the code

component

A component is a self-defined piece of HTML that can be referenced with a tag. Frequently used HTML fragments can be wrapped into a component

Global registration

Create the son.vue file in the Component folder

<template> <div id="son"> <h1> Export default {name:'son', data(){ return { message:'hellow vue.', isShow:true, } }, methods: { } } </script> <style> </style>Copy the code

Create it in main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

import son from './components/son.vue'; / / import son. Vue
Vue.component('Son', son)// Set the global component

Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')

Copy the code

Use in app.vue

<template> <div id="app"> <Son /> <! </div> </template> <script> export default {name:'app', data(){return {}}, methods: { } } </script> <style> </style>Copy the code

Local registration

Create the son.vue file in the Component folder as above

Then use it on app.vue

<template> <div id="app"> <Son /> <! </div> </template> <script> import Son from './components/ Son 'export default {name:'app', components: { Son }, data(){ return { } }, methods: { } } </script> <style> </style>Copy the code

Components by value

The father the son

The parent component

<template> <div id="app"> <Son :fatherMsg="msg"/> <! </div> </template> <script> import Son from './components/ Son 'export default {name:'app', }} </script> </style> </style>Copy the code

Child components

<template> <div id="son"> <h1> <h1>{{fatherMsg}}</h1> </div> </template> <script> export default {name:'son', // props:['fatherMsg'], // props:{// fatherMsg: {// required: true,// Required // type: String, / / / / / /}} String type, the data () {return {}}, the methods: {}} < / script > < style > < / style >Copy the code

Child the parent

The parent component

<template> <div id="app"> <Son @sonShow="fatherShow"/> <! FatherShow method --> <h1>{{MSG}}</h1> </div> </template> <script> import Son from './components/ Son 'export default { name:'app', components: { Son }, data(){ return { msg:'' } }, methods: { fatherShow(sonMsg){ this.msg=sonMsg } } } </script> <style> </style>Copy the code

Child components

<template> <div id="son"> < button@click ="show"> </button> <h1> Name :'son', data(){return {MSG :'son',}}, methods: {show(){this.$emit('sonShow',this. MSG)}} </script> <style> </style>Copy the code

Even bus transfer value

Create the utils folder under SRC, then create bus.js

import Vue from 'vue'
export const eventbus = new Vue()
Copy the code

Child components

<template> <div id="son"> {{didi}} < button@click ="givege"> </button> </div> </template> <script> import {eventbus} from '.. /utils/bus.js' export default {name:'son', data(){return {didi:'', a:' now, now, now '}}, methods: { givege(){ eventbus.$emit('givege',this.a) } } } </script> <style> </style>Copy the code

Create the sibling component borther.vue

<template> <div id="app"> {{gege}} < button@click ='givedi'> </button> </div> </template> <script> import {eventbus} from '.. /utils/bus.js' export default {name:'app', data(){return {gege:'', b:' "}}, methods: { givedi(){ eventbus.$emit('givedi',this.b) } } } </script> <style> </style>Copy the code

In the app. Vue

<template>
  <div id="app">
    <Son />
    <Borther />
  </div>
</template>
<script>
import Son from "./components/son"
import Borther from "./components/brother"
import {eventbus} from './utils/bus.js'
export default {
    name:'app',
    components:{
      Son,Borther
    },
    data(){
      return {
     
      }
    },
    methods: {
    },
    mounted(){
      eventbus.$on('givedi',data=>{
        console.log(data);
      })
      eventbus.$on('givege',data=>{
        console.log(data);
      })
    }
}
</script>

<style>

</style>
Copy the code

Multilevel component value transfer

$attrs/$ listeners

The parent component

<template> <div id="app"> <h1> <Son: MSG ="msgT" :msgS="msgS" @father="father" @gfather="gfather"/>  </div> </template> <script> import Son from './components/son' export default { name:'app', components: {Son}, data(){return {MSG :' father() ', msgS:' father() ', msgS:' father() '; }, gfather() {console.log(); } } } </script> <style> </style>Copy the code

Child components

<template> <div id="son"> <h1>{{msg}}</h1> <h1>{{$attrs}}</h1> <Gson v-bind="$attrs" v-on="$listeners"/> </div> </template> <script> import Gson from "./gson"; export default { name:'son', InheritAttrs: false, / / you can turn off automatically mount to the components on the root element is not in the attribute of props statement props: [' MSG '], / / interception here after grandchildren won't get it components: {Gson}. data(){ return { } }, methods: { }, mounted(){ this.$emit('father') } } </script> <style> </style>Copy the code

A child of a child component

<template>
  <div id="son">
    <h1>{{msgT}}</h1>
  </div>
</template>
<script>
export default {
    name:'son',
    inheritAttrs:false,
    props:['msgT'],
    data(){
      return {
    
      }
    },
    methods: {
  
    },
    mounted(){
      this.$emit('gfather')
    }
}
</script>

<style>

</style>
Copy the code

provide/inject

The parent component

<template> <div id="app"> <h1> </h1> <Son/> </div> </template> <script> import Son from './components/ Son 'export Default {name:'app', components: {Son}, data(){return {}}, provide: {msgT:' for ', msgS:' for '}, methods: { } } </script> <style> </style>Copy the code

Child components

<template>
  <div id="son">
    <h1>{{msgT}}</h1>
    <Gson />
  </div>
</template>
<script>
import Gson from "./gson";
export default {
    name:'son',
    inject:['msgT'],
    components:{
        Gson
    },
    data(){
      return {
    
      }
    },
    methods: {
      
    },
    mounted(){
      this.$emit('father')
    }
}
</script>

<style>

</style>
Copy the code

A child of a child component

<template>
  <div id="son">
    <h1>{{msgS}}</h1>
  </div>
</template>
<script>
export default {
    name:'son',
    inject:['msgS'],
    data(){
      return {
    
      }
    },
    methods: {
  
    },
    mounted(){
      this.$emit('gfather')
    }
}
</script>

<style>

</style>
Copy the code

vuex

Look at the following

slot

Adds the content of the child component to the parent component

Ordinary slot

The parent component

< the template > < div id = "app" > < h1 > heart for the world < / h1 > < Son > < h1 > is peaceful < / h1 > <! </Son> </div> </template> <script> import Son from './components/ Son 'export default {name: 'app', components: { Son }, data () { return { } }, methods: { } } </script> <style> </style>Copy the code

Child components

< the template > < div id = "app" > < h1 > for the o life < / h1 > < slot > < / slot > <! </div> </template> <script> export default {name: 'app', data () {return {}}, methods: { } } </script> <style> </style>Copy the code

A named slot

The parent component

<template> <div id="app"> <Son> <template V-slot :header> <h1> <template V-slot :footer> <h1> </h1> </template> </Son> </div> </template> <script> import Son from '.  'app', components: { Son }, data () { return { } }, methods: { } } </script> <style> </style>Copy the code

Child components

<template> <div id="app"> <slot name="header"></slot> <h1> <slot name="footer"></slot> </div </template> <script> export default { name: 'app', data () { return { } }, methods: { } } </script> <style> </style>Copy the code

Scope slot

The parent component

<template> <div id="app"> <h1> <Son> <template V-slot :default="soldata"> <h1>{{soldata.data}}</h1> </template>  </Son> <! -- <Son v-slot:default="soldata"> <h1>{{soldata.data}}</h1> </Son> --> <! -- <Son v-slot="soldata"> <h1>{{soldata.data}}</h1> </Son> --> </div> </template> <script> import Son from './components/son' export default { name: 'app', components: { Son }, data () { return { } }, methods: { } } </script> <style> </style>Copy the code

Child components

<template> <div id="app"> <h1> <slot :data=" MSG ">{{MSG}}</slot> </div> </template> <script> export default { Name: 'app', data () {return {MSG: ' ', methods: {}} </script> </style> </style>Copy the code

Vue lifecycle hook functions

The entire process that a component goes through, from start to end, is the life cycle of a component

In simple terms, you see components appear and disappear on the page. During this process, several functions are automatically triggered. They are called lifecycle hook functions

The parent component

<template> <div id="app"> < h@click ="change"> Make the component disappear </h1> <Son V-if ="isShow"/> </div> </template> <script> import Son from './components/son' export default { name:'app', components: { Son }, data(){ return { isShow:true } }, provide: }, methods: {change(){this.isshow =false; } } } </script> <style> </style>Copy the code

Child components

<template> <div id="son"> <button @click="change">{{! isShow? 'a' : "disappear"}} < / button > < h1 v - if = "isShow" > {{message}} < / h1 > < / div > < / template > < script > export default {name: "son", data(){ return { message:'hellow vue.', isShow:false, } }, methods: { change(){ this.isShow = ! this.isShow; {}}, beforeCreate () the console. The group (' -- -- -- -- -- - beforeCreate create state before -- -- -- -- -- - '); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: "+ this. / / undefined} message), created () {console. Group (' -- -- -- -- -- - created is created state -- -- -- -- -- - '); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); Console. log("%c%s", "color:red","message: "+ this.message); // Console. log("%c%s", "color:red","message:" + this.message); / / has been initialized}, beforeMount () {console. Group (' -- -- -- -- -- - beforeMount mount state before -- -- -- -- -- - '); console.log("%c%s", "color:red","el : " + (this.$el)); Console. log("%c%s", "color:red","data: " + this.$data); Console. log("%c%s", "color:red","message: "+ this.message); // Console. log("%c%s", "color:red","message:" + this.message); / / has been initialized}, mounted () {console. Group (' -- -- -- -- -- - mounted mount end state -- -- -- -- -- - '); console.log("%c%s", "color:red","el : " + this.$el); Console. log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); Console. log("%c%s", "color:red","message: "+ this.message); // Console. log("%c%s", "color:red","message:" + this.message); / / has been initialized}, beforeUpdate () {console. Group (' beforeUpdate update status before = = = = = = = = = = = = = = = ""); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); {}, updated () the console. Group (' updated updated completion status = = = = = = = = = = = = = = = ""); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); {}, beforeDestroy () the console. Group (' beforeDestroy destroyed former state = = = = = = = = = = = = = = = ""); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); {}, destroyed () the console. Group (' destroyed destroyed completion status = = = = = = = = = = = = = = = ""); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } } </script> <style> </style>Copy the code

Vue routing

Single page application (SPA), the first time to load the page, after all is to obtain data, speed up the response of the page, is not conducive to SEO

Here a page hop becomes a route hop

Since I’m using scaffolding, vue-Router is already configured to open index.js in the Router file

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'

Vue.use(VueRouter)

const routes = [
   // Configure the route here
  {
    path: '/'./ / path
    name: 'Home'./ / routing
    component: Home// The component to point to
  },
  {
    path: '/about'.name: 'About'.// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue')}]const router = new VueRouter({
  mode: 'history'.base: process.env.BASE_URL,
  routes
})

export default router

Copy the code

Modify the app. Vue

<template> <div id="app"> <router-view /> <! </div> </template> <style> </style>Copy the code

Routing hop

router-link

With no arguments

< the template > < the router - link: to = "{name: 'home'}" > jump < / router - the link > < the router - link: to = "{path: '/ home'}" > jump < / router - the link > <! -- Note: router-link links that start with a '/' start with the root route, if not with a '/' start with the current route. --> </template>Copy the code

With parameters

< the template > < the router - link: to = "{name: 'home', params: {id: 1}}" > jump < / router - the link > <! $route.params.id --> <router-link :to="{name:'home', query: $route.params.id --> <router-link :to="{name:'home', query: {id:1}}"> Jump </router-link> <! This.$route.query.id -> </template>Copy the code

this.$router.push()

With no arguments

<template> <div id="app"> < button@click ="add"> jump </button> </div> </template> <script> export default {data(){return {  } }, methods: { go(){ this.$router.push('/home') //this.$router.push({name:'home'}) //this.$router.push({path:'/home'}) } } } </script> <style lang="less"> #app { } </style>Copy the code

With parameters

<template> <div id="app"> < button@click ="add"> jump </button> </div> </template> <script> export default {data(){return {  } }, methods: { go(){ this.$router.push({name:'home',query: {id:'1'}}) //this.$router.push({path:'/home',query: $route.query.id //this.$route.query.id //this.$route.push ({name:'home',params: $route. Params. id}}} </script> <style lang="less"> #app {} </style>Copy the code

this.$router.replace() t

This.$router.push(); this.$router.push()

this.$router.go(n)

Integer forward, negative forward n times, mostly used to return

Navigation guard

Some pages can be jumped to and some pages can’t be jumped to, so you need a navigation guard

global

Write to index.js on the router

Router. beforeEach (global front-guard) : So routes are executed before jumps

router.beforeEach((to, from, next) = > {
    //to: destination route object to be entered
    //from: destination route object to be left
    //next: execute the next hook of the jump, the execution will proceed to the next step, otherwise no jump
    next()
});
Copy the code

Router.beforeresolve () (global resolution guard), similar to router.beforeeach

Router.aftereach () (global post-hook) : Similar to router.beforeeach, distinguishes routes already jump, so there is no next

exclusive

{
   path: '/about'.name: 'about'.component: about,
   beforeEnter:(to,from,next) = >{
      console.log(to);
      console.log(from);
      next()
   }
   // Similar to router.beforeEach, this is used for a single route
Copy the code

In the component

<template> <div> </div> <script> export default {name: "About ", beforeRouteEnter(to, from, next) {// Execute when entering the route}, beforeRouteUpdate(to, from, next) {// Execute when the route parameters are updated, same route, BeforeRouteLeave (to, from, next) {}} </script> <style scoped> </style>Copy the code

vuex

Using scaffolding, the basic configuration of Vuex is set up. You can see index.js in the Store folder. Vuex will save the required data and each component can be called

state

Save data state

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      name:'don't forget'
  },
  mutations: {},actions: {},modules: {}})Copy the code

call

<template>
  <div class="about">
    <h1>{{$store.state.name}}</h1>
  </div>
</template>
<script>
export default {
  methods: {
    test () {
      console.log(this.$store.state.name)
    }
  }
}
</script>
Copy the code

mutations

Modify state data

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      name:'don't forget'
  },
  mutations: {
      change(state){// A second argument can be added to accept the argument passed by the call
          state.name="Memories"}},actions: {},modules: {}})Copy the code

Component calls

<template> <div class="about"> <h1>{{$store.state.name}}</h1> </div> </template> <script> export default { methods: {test () {new code.store.mit ('change') {new code.store.mit ('change', parameter)}}} </script>Copy the code

Add delete state data

Vue.set(state,"age".15)/ / add
Vue.delete(state,'age')/ / delete
Copy the code

getters

Data processing

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: 'don't forget',},mutations: {},getters: {
    fullname(state) {
      const a = ` name:${state.name}`;
      returna; }},actions: {},modules: {},});Copy the code

call

<template>
  <div class="about">
    <h1>{{$store.getters.fullname}}</h1>
  </div>
</template>
<script>
export default {
  methods: {
    
  },
};
</script>

Copy the code

aciton

Modify state by manipulating asynchronous methods

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: 'don't forget',},mutations: {
    change(state, data){ state.name = data; }},actions: {
    useChange(context, payload) {
      setTimeout(() = > {
        context.commit('change', payload);
      }, 1000); }},modules: {},});Copy the code

call

<template> <div class="about"> <h1>{{$store.state.name}}</h1> <button @click="change"> change </button> </div> </template> <script> export default {methods: {change() {this.$store.dispatch('useChange', 'recall '); ,}}}; </script>Copy the code

modules

To classify data within VUEX, the call is similar to the previous one

vue.config.js

module.exports = {
  // Deploy the urls in production and development environments.
  // By default, Vue CLI assumes that your application is deployed on the root of a domain name
  // For example, https://www.ruoyi.vip/. If the application is deployed on a subpath, you need to specify the subpath with this option. For example, if your application is deployed on https://www.ruoyi.vip/admin/, is set the baseUrl to/admin /.
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/".// At NPM run build or YARN build, the directory name of the build file (to be consistent with the production environment path of baseUrl) (default dist)
  outputDir: 'dist'.// for placing generated static resources (js, CSS, img, fonts); (After the project is packaged, static resources will be placed in this folder)
  assetsDir: 'static'./ / open eslint save testing, valid values: true | | false 'error'
  lintOnSave: process.env.NODE_ENV === 'development'.// If you don't need the source map for production, set it to false to speed up production builds.
  productionSourceMap: false.// webpack-dev-server configuration
  devServer: {
    host: '0.0.0.0'.// Server address
    port: 3000.// Enable the port
    open: true.// Whether to automatically open the web page
    proxy: {// Proxy server to solve cross-domain problems
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: ` http://192.168.1.53:8080 `.changeOrigin: true.pathRewrite: {[A '^' + process.env.VUE_APP_BASE_API]: ' '}}},disableHostCheck: true
  },
  configureWebpack: {
    name: 'don't forget'./ / title
    resolve: {
      alias: {
        The '@': resolve('src')// The path starting with @/ indicates the path starting with SRC /}}}}Copy the code

Configuration is complicated, you can try it yourself

Vue2.0 review

vue

Create a VUE project with VUE-CLI

Data binding

instruction

v-block

v-text

v-html

v-pre

v-once

v-show

v-if,v-else-if,v-else

v-for

v-model

Modifiers for v-models

v-bind

Basic usage

Bind class (object)

Bind class (array)

The binding style

Bind style(Array)

v-on

Basic usage

Passing parameters

Modifier for v-on

Custom instruction

Filter filter

Global filter

Local filter

The listener watch

Computed attribute computed

component

Global registration

Local registration

Components by value

The father the son

Child the parent

Even bus transfer value

Multilevel component value transfer

a t t r s / attrs/ attrs/listeners

provide/inject

vuex

slot

Ordinary slot

A named slot

Scope slot

Vue lifecycle hook functions

Vue routing

Routing hop

router-link

this.$router.push()

this.$router.replace() t

this.$router.go(n)

Navigation guard

global

exclusive

In the component

vuex

state

mutations

Add delete state data

getters

aciton

modules

vue.config.js

Related Posts

Configure Tree Shaking to reduce the size of JavaScript packaging

Let’s paste the “New Year’s couplet” on the nuggets and provide the oil monkey script at the end of the article

Implement Vue Router manually (emphasis on implementing routing hooks)

$attrs/$ listeners