vue 基础

1. 动态路由

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    ...
  {
    path: '/detail/:id',
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    component: () => import(/* webpackChunkName: "detail" */ '@/views/Detail.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

<!-- views/Detail.vue -->
<template>
  <div>
    <!-- 方式1： 通过当前路由规则，获取数据 -->
    通过当前路由规则获取：{{ $route.params.id }}

    <br>
    <!-- 方式2：路由规则中开启 props 传参 -->
    通过开启 props 获取：{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['id']
}
</script>

---

2. vue的自定义事件

let vm = new Vue()

// 注册事件(订阅消息)
vm.$on('dataChange', () => {
  console.log('dataChange')
})
vm.$on('dataChange', () => {
  console.log('dataChange1')
})

// 触发事件(发布消息)
vm.$emit('dataChange')

2.1 兄弟组件通信过程

// eventBus.js 
// 事件中心 
let eventHub = new Vue()

// ComponentA.vue 
// 发布者 
addTodo: function () { 
  // 发布消息(事件) 
  eventHub.$emit('add-todo', { text: this.newTodoText });
  this.newTodoText = ''; 
}

// ComponentB.vue 
// 订阅者 
created: function () { 
  // 订阅消息(事件) 
  eventHub.$on('add-todo', this.addTodo); 
}

2.2 模拟vue自定义事件的实现

---

3. Hash和History模式的区别

3.1 表现形式的区别

• Hash模式：https://music.163.com/#/playlist?id=31029
• History模式：https://music.163.com/playlist/31029

3.2 原理的区别

• Hash模式是基于锚点，以及onhashchange事件
• History模式是基于HTML5中的 History API
  • history.pushState() IE10以后才支持
  • history.replaceState()
  • history.go

3.3 History模式的使用

• History模式需要服务器的支持
• 单页应用中，服务端不存在http://www.testurl.com/login这样的地址会返回找不到该页面
• 在服务端应该除了静态资源外都返回单页应用的index.html

3.4 总结

Hash模式	History模式
URL中#后面的内容作为路径地址	通过history.pushState()方法改变地址栏
监听hashchange事件	监听propstate事件
根据当前路由地址找到对应组件重新渲染	根据当前路由地址找到对应组件重新渲染

---

4. 数据驱动

4.1 数据响应式

• 数据模型仅仅是普通的javascript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率

4.2 双向绑定

• 数据改变，视图改变；视图改变，数据也会随之改变
• 我们可以使用v-modal在表单元素上创建双向数据绑定

4.3 数据驱动是vue最独特的特性之一

• 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

---

5. vuex

5.1 简单使用

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: ''
  },
  mutations: {
    SET_USERNAME(state, payload) {
      state.username = payload
    }
  },
  actions: {
    ASYNC_SET_USERNAME({ commit }) {
      return new Promise(resolve => {
        setTimeout(() => {
          commit('SET_USERNAME', '张三')
        }, 1000)
      })
    }
  }
})

5.1.1 使用

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  created() {
    // 第一种写法
    console.log(this.$store.state.username)
    this.$store.commit('SET_USERNAME', '李四')
    this.$store.dispatch('ASYNC_SET_USERNAME')

    // 使用辅助函数
    console.log(this.username);
    this.SET_USERNAME('李四')
    this.ASYNC_SET_USERNAME()
  },
  computed: {
    ...mapState(['username'])
    /* ...mapState({
      username: state => state.userName // 取别名方式
    }) */
  },
  methods: {
    ...mapMutations(['SET_USERNAME']),
    /* ...mapMutations({
      SET_USERNAME: 'SET_USERNAME'
    }) */
    ...mapActions(['ASYNC_SET_USERNAME'])
    /* ...mapActions({
      ASYNC_SET_USERNAME: 'ASYNC_SET_USERNAME'
    }) */
  }
}
</script>

5.2 模块化

// store/modules/user.js
const state = {
  username: ''
}

const mutations = {
  SET_USERNAME(state, payload) {
  }
}

const actions = {
  ASYNC_SET_USERNAME({ commit }) {
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

5.2.1 使用

<script>
export default {
  created() {
    // 第一种写法
    console.log(this.$store.state.user.username)
    this.$store.commit('user/SET_USERNAME', '李四')
    this.$store.dispatch('user/ASYNC_SET_USERNAME')

    // 使用辅助函数
    console.log(this.username);
    this.SET_USERNAME('李四')
    this.ASYNC_SET_USERNAME()
  },
  computed: {
    ...mapState(['user/username'])
    /* ...mapState({
      username: state => state.user.userName
    }) */
    // or
    // ...mapState('user', ['username'])
  },
  methods: {
    ...mapMutations(['user/SET_USERNAME']),
    /* ...mapMutations({
      SET_USERNAME: 'user/SET_USERNAME'
    }) */
    // or
    // ...mapMutations('user', ['SET_USERNAME'])
    ...mapActions(['user/ASYNC_SET_USERNAME'])
    /* ...mapActions({
      ASYNC_SET_USERNAME: 'user/ASYNC_SET_USERNAME'
    }) */
  }
}
</script>