Vue 2.0 Basics in Detail

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

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

// Using this.count // 2

// The calculated property does not accept parameters, will cache dependent data, must have a return
computed: {
    doubleCount: function () {
      return this.count *= 2
    },
}

// Using this.doubleCount // 4

methods: {
    cLog(msg) {
        console.log(msg)
    }
}

// Use this.cLog('The function was called') // Console output: The function was called

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

// Automatically triggered when count changes this.count = 2
this.copyCount // 3

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

// NPM download npm install vue-router
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//Define page routing (path, component)
export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // Routing component lazy loading { path: '/bar', component: '/pages/bar'}
})
// main.js
import router from './router.js'
new Vue({
  el: '#app',
  router, // Mount the route to the Vue instance render: h => h(App)
})

// page.vue
<!-- It is important to distinguish the relationship between the two -->
this.$router // Access the router, built-in push and replace routing methods this.$route // Access the current route, built-in path, query and other routing attributes // app.vue
<!-- Components matched by the route will be rendered here-->
<router-view></router-view>

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

this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace(...) // The difference from push is that history records are not inserted this.$router.go( [Number] n ) // How many steps forward or backward in the history record // When the route parameter carries Chinese, it is recommended to use encodeURLComponent to transcode it first to avoid garbled characters.

// Redirect to /login if the user fails to authenticate
router.beforeEach((to, from, next) => {
  // to is the route object to be entered, from is the source route, next is the hook function, whether to release if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

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

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

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

beforeRouteEnter
beforeRouteUpdate (new in 2.2)
beforeRouteLeave

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
...

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

Vue.prototype.$store = store

//store.js
const state = {
    name: 'zzz'
}

<!--page.vue-->
// 1. Directly call this.$store.state.name // 'zzz'
// 2. Auxiliary function mapping computed: {
    ...mapState(['name'])
}
this.name // 'zzz' 

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

<!--page.vue-->
// 1. Call this.$store.commit(updateName, 'zzh') directly // state.name: 'zzh'
// 2. Auxiliary function mapping methods: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // state.name: 'zzh'

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

<!--page.vue-->
// 1. Call this.$store.dispatch(asyncUpdateName) directly
// 2. Auxiliary function mapping methods: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

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

<!--page.vue-->
// 1. Directly call this.$store.getter.formatName() // 'xxx2021'
// 2. Auxiliary function mapping computed: {
    ...mapGetters(['formatName'])
}
this.formatName() // // 'xxx2021'

// Inside the module this.$store.state.name // No namespace is needed for internal access // Outside the module this.$store.state.login.name // login is the module namespace...
Other properties are similar

<!-- api.js -->
import axios from 'axios'

// Create and configure an instance axios.create({
    baseURL: 'http://www.baidu.com', // request base address timeout: 1000 // request timeout...
})

// Request interceptor axios.interceptors.request.use(request => {
    request.headers['Content-Type'] = 'application/json'
    ...
})
// Response interceptor axios.interceptors.response.use(response => {
    ...
    return response.data
})
//Configure request export default {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

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

Vue.prototype.$api = api
<!-- page.vue -->
this.$api.getId().then(res => {
    ...
}).catch()