Componentization idea:

Reuse of functional modules by component

High execution efficiency

Develop single page complex application

Component state management (vuex)

Mixed use of multi components
vue-router

Code specification

image.png

vue-router

image.png

<template>
 <div>
   hello info component
 </div>
</template>

<script>
    export default {
        name: "Info"
    }
</script>

<style scoped>

</style>

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/info">Info</router-link>
    </div>
    <router-view/>
  </div>
</template>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/info',
      name: 'info',
      component: Info
    },

Vuex

One way data flow concept

view actions state

Vuex multiple view dependencies, menu navigation

The behavior of different views needs to change the same state and comment on the bullet curtain.

The state management mode of vue.js development
Centralized management of component state

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

Status of components
Method set of changing state

<template>
 <div>
   hello info component
   <button type="button" @click="add()">Add to</button>
 </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'Info',
  store,
  methods: {
    add () {
      console.log('dashucoding')
    }
  }
}
</script>

<style scoped>

</style>

image.png

image.png

image.png

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
import store from '@/store'
export default {
  name: 'about',
  store,
  data () {
    return {
      msg: store.state.count
    }
  }
}
</script>

<template>
 <div>
   hello info component
   <button type="button" @click="add()">Add to</button>
 </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'Info',
  store,
  methods: {
    add () {
      console.log('dashucoding')
      store.commit('increase')
    }
  }
}
</script>

<style scoped>

</style>

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase () {
      this.state.count++
    }
  },
  actions: {

  }
})

Mode

<script>
import store from '@/store'
export default {
 name: 'Info',
 store,
 methods: {
  add () {
   console.log('add Event form info!')
   // alert('alert form info')
   debugger
   store.commit('increase')
  }
 }
}

image.png

<template>
 <div>
   hello info component
   <button type="button" @click="add()">Add to</button>
 </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'Info',
  store,
  data () {
    return {
      msg: 'hello vue'
    }
  },
  methods: {
    add () {
      console.log('dashucoding')
      debugger
      store.commit('increase')
    },
    output () {
      console.log('in output')
    }
  }
}
</script>

<style scoped>

</style>

image.png

console.log

alert()

debugger

window object binding

<template>
 <div>
   hello info component
   <button type="button" @click="add()">Add to</button>
 </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'Info',
  store,
  data () {
    return {
      msg: 'hello vue'
    }
  },
  mounted () {
    window.vue = this
  },
  methods: {
    add () {
      console.log('dashucoding')
      debugger
      store.commit('increase')
    },
    output () {
      console.log('in output')
    }
  }
}
</script>

<style scoped>

</style>

Please praise! Because your encouragement is the biggest driving force of my writing!

Official WeChat public address

Forced communication group: 711613774

Push communication group