Vue 2.0 Basic Details

// Vue single page instance<template>
    Label...
</template>
<script>
    export default {
      data () {},
      methods: {},
      computed: {},
      watch: {}
    }
</script>
<style>
    style...
</style>

data() {
    return {
        count: 2
        copyCount: 1
    }
}

// use // 2

// The calculation attribute does not accept parameters, and will cache dependent data. You must have a returncomputed：{
    doubleCount: function () {
      return  *= 2
    },
}

// use // 4

methods: {
    cLog(msg) {
        (msg)
    }
}

// use('The function was called') // Console output: The function was called

watch: {
    count(value, [oldValue]) {
        // value: the changed value         = value + 1
    }
}

// automatically triggered when count changes = 2
 // 3

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

// NPM downloadnpm install vue-router
// 
import Vue from 'vue'
import VueRouter from 'vue-router'
(VueRouter)

// Define page routing (path, component)export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // Lazy loading of routing components    { path: '/bar', component: '/pages/bar'}
})
// 
import router from './'
new Vue({
  el: '#app',
  router, // Mounting route to Vue instance  render: h => h(App)
})

// 
<!-- It is necessary to focus on distinguishing the relationship between the two -->
this.$router // Access the router, built-in routing method for push and replacethis.$route // Access the current route, built-in routing properties such as path and query// 
<!-- The component that the route matches will be rendered here -->
<router-view></router-view>

<router-link :to="...">
<router-link :to="..." replace>

this.$({ path: 'register', query: { plan: 'private' }})
this.$(...)   // The difference from push is that history records are not insertedthis.$( [Number] n )   // How many steps forward or backward in history record
// When routing parameters are transported in Chinese, it is recommended to use encodeURLComponent to transcode first to avoid garbled code.

// Redirect to /login when the user fails to verify the identity((to, from, next) => {
  // to the route object to be entered, from source route, next hook function, whether to release it  if ( !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

((to, from, next) => {
  // ...
})

((to, from) => {
  // The route guard does not accept the next hook function  // ...
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

beforeRouteEnter
beforeRouteUpdate (2.2 New)
beforeRouteLeave

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

(Vuex)
...

export default new ({
  state,
  getters,
  mutations,
  actions,
  modules
})
// 
import store from './store'

.$store = store

// 
const state = {
    name: 'zzz'
}

<!---->
// 1. Direct callthis.$ // 'zzz'
// 2. Helper function mappingcomputed: {
    ...mapState(['name'])
}
 // 'zzz' 

const mutations = {
    updateName(state, newName) {
         = newName
    }
}

<!---->
// 1. Direct callthis.$(updateName, 'zzh') // : 'zzh'
// 2. Helper function mappingmethods: {
    ...mapMutations(['updateName'])
}
('zzh') // : 'zzh'

const actions = {
    asyncUpdateName(context) {
        // Asynchronous operation, such as initiating an http request to obtain the updated name, assuming name=xxx        ...
        ('updateName', ) // : 'xxx'
    }
}

<!---->
// 1. Direct callthis.$(asyncUpdateName)
// 2. Helper function mappingmethods: {
    ...mapActions(['asyncUpdateName'])
}
()

const getter = {
    formatName(state) {
        return  + '2021'
    }
}

<!---->
// 1. Direct callthis.$() // 'xxx2021'
// 2. Helper function mappingcomputed: {
    ...mapGetters(['formatName'])
}
() //  // 'xxx2021'

// Inside the modulethis.$  // No namespace is required for internal access// External modulethis.$  // login is the module namespace...
Other attributes are similar

<!--  -->
import axios from 'axios'

// Create and configure instance({
    baseURL: '',    // Request a reference address    timeout: 1000   // Request timeout    ...
})

// Request an interceptor(request => {
    ['Content-Type'] = 'application/json'
    ...
})
// Response Interceptor(response => {
    ...
    return 
})
// Configuration requestexport default {
    getId: () => ('/getId'),
    getNameById: id => ('/getNameById', id)
}

<!--  -->
import api from './'

.$api = api
<!--  -->
this.$().then(res => {
    ...
}).catch()