专栏首页达达前端(21)打鸡儿教你Vue.js

(21)打鸡儿教你Vue.js

组件化思想:

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

高执行效率

开发单页面复杂应用

组件状态管理(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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 7 个有用的 Vue 开发技巧

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex 当然可以解决这类问题,不过就像 Vuex 官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要...

    夜尽天明
  • Vue实战系列—如何细化Vue项目目录设计(2)

    data:用来模拟我们请求的数据内部主要存放json数据格式的数据,比如评价,商品等 。

    前端大彬哥
  • Vue实战系列—从目录结构谈可扩展架构设计(1)

    好的项目代码结构会大大提升项目的维护性和可扩展性。同时我们可以提供友好的说明,以便其他成员理解项目和快速定位。

    前端大彬哥
  • 第三届Vue.js开发者大会 - 尤雨溪:State of Vue [领完整PPT]

    夜尽天明
  • Vue3.0 组件的核心概念_插槽

    Vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slot 和 slot-scope,并且之后的 Vue 3.0 也会使用新语法,这...

    Nian糕
  • 利用Electron简单撸一个Markdown编辑器

    Markdown 是我们每一位开发者的必备技能,在写 Markdown 过程中,总是寻找了各种各样的编辑器,但每种编辑器都只能满足某一方面的需要,却不能都满足于...

    叶梅树
  • [现场实录] VueConf 2019 尤雨溪演讲总结

    距离参加 VueConf 第一届大会已经很久了,yubo 的介绍一如既往地有意思,是他的努力保持了大会热情的社区氛围!另一个彩蛋就是 Evan You 带了自己...

    夜尽天明
  • vue工具 - vue/cli@3.xx 安装使用流程

    xing.org1^
  • Vue实战系列—项目搭建四步曲(0)

    开篇:想通过输出Vue系列文章,让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

    前端大彬哥
  • 老焦专栏 | 为什么我们要成为全栈工程师?

    最近我身边的几个技术专家都在学习前端技术(VUE)的开发,为什么他们要学习前端技术呢?因为随着软件技术的发展,全栈工程师已然成为未来发展趋势,对大部分技术人而言...

    yuanyi928

扫码关注云+社区

领取腾讯云代金券