(21)打鸡儿教你Vue.js

原创
2019/07/03 16:29
阅读数 0

组件化思想:

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

高执行效率

开发单页面复杂应用

组件状态管理(vuex)

多组件的混合使用
vue-router

代码规范

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

单向数据流概念

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>

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()">添加</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')
  }
 }
}

image.png

<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>

image.png

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

吹逼交流群

本文同步分享在 博客“程序员哆啦A梦”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部