（21）打鸡儿教你Vue.js

组件化思想：

组件化实现功能模块的复用

高执行效率

开发单页面复杂应用

组件状态管理（vuex）

多组件的混合使用
vue-router

代码规范

vue-router

<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

单向数据流概念

view actions state

Vuex多个视图依赖，菜单导航

不同视图的行为需要变更同一状态，评论弹幕

vue.js开发的状态管理模式
组件状态集中管理

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

组件的状态
改变状态的方法集

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

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

<style scoped>

</style>

<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()">添加</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: {

  }
})

调式

<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')
  }
 }
}

<template>
 <div>
   hello info component
   <button type="button" @click="add()">添加</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>

console.log

alert()

debugger

window对象绑定

<template>
 <div>
   hello info component
   <button type="button" @click="add()">添加</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>

---

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774