Vue 2.0 基础

Vue 2.0 基础

知识点

1. 特点
2. 实例
3. 基本语法
4. 生命周期
5. 路由管理Vue-Router
6. 状态管理Vuex
7. Http请求库Axios

---

特点

1.是一个MVVM框架

由MVC架构衍生，分为View(视图层)、ViewModel(数据视图层)、Model(数据层)，MVVM 最标志性的特性就是 数据绑定，实现数据驱动视图，视图同步数据。

2.数据也是单向的，称之为单向数据流

数据总是从父组件传递到子组件中，子组件无权(不建议)直接修改父组件中的数据。

3.不兼容ie8及其以下浏览器

响应式原理式利用了es5的Object.defineProperty，而该API不支持IE8

---

实例

// Vue单页面实例
<template>
    标签...
</template>
<script>
    export default {
      data () {},
      methods: {},
      computed: {},
      watch: {}
    }
</script>
<style>
    样式...
</style>

选项 Options

data

函数，用于定义页面的数据

data() {
    return {
        count: 2
        copyCount: 1
    }
}

// 使用
this.count // 2

computed

对象，计算属性，用于简化复杂逻辑处理

// 计算属性不接受参数，会缓存依赖数据，必须要有return
computed：{
    doubleCount: function () {
      return this.count *= 2
    },
}

// 使用
this.doubleCount // 4

methods

对象，用于定义页面的函数

methods: {
    cLog(msg) {
        console.log(msg)
    }
}

// 使用
this.cLog('调用了函数') // 控制台输出：调用了函数

watch

对象，属性侦听，用来监听某数据的改变并做出对应操作

watch: {
    count(value, [oldValue]) {
        // value：改变后的值 
        this.copyCount = value + 1
    }
}

// 当count发生改变时自动触发
this.count = 2
this.copyCount // 3

components

对象，注册组件到页面

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

---

基本语法

常用指令

v-html

渲染HTML

v-if

判断语法，控制显示/隐藏，通过是否渲染DOM来控制

v-show

控制显示/隐藏，与v-if类似，但v-show是通过display属性控制

v-model

双向数据绑定，一般用于表单，默认绑定value属性

v-bind

简写 :class

用于动态属性绑定

v-on

简写 @click

用于事件绑定

v-for

遍历语法，支持数组、对象及字符串

生命周期

beforeCreated

创建Vue对象

created

data初始化，此时可以对实例做些预操作

beforeMounted

el和data初始化

mounted

挂载el和data，此时可以调用http请求

beforeUpdated

更新DOM前，此时可以进一步地更改状态，不会触发重渲染过程

updated

更新修改后的虚拟DOM到页面，此时应避免改动操作，以免造成无限循环更新

beforeDestory

页面销毁前，此时可以做一些重置操作，比如清除定时器 和 dom事件等

destoryed

页面销毁，此时Vue实例已被删除，所有操作均无效

---

路由管理Vue-Router

官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

路由配置

// NPM下载
npm install vue-router

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定义页面路由（路径、组件）
export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // 路由组件懒加载
    { path: '/bar', component: '/pages/bar'}
})

// main.js
import router from './router.js'
new Vue({
  el: '#app',
  router, // 挂载路由到Vue实例
  render: h => h(App)
})

// page.vue
<!-- 要重点区分开两者的关系 -->
this.$router // 访问路由器，内置push、replace的路由方法
this.$route // 访问当前路由，内置path、query等路由属性

// app.vue
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

路由跳转

申明式路由

<router-link :to="...">
<router-link :to="..." replace>

编程式路由

this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace(...)   // 与push区别在不插入history记录
this.$router.go( [Number] n )   // 在 history 记录中向前或者后退多少步

// 路由传参携带中文时建议先使用encodeURLComponent转码，以免显示乱码。

---

路由守卫

导航守卫｜Vue-Router官方文档

全局守卫

对配置的所有路由均生效，但优先级低与内部路由。

全局前置守卫（常用）

// 用户未能验证身份时重定向到 /login
router.beforeEach((to, from, next) => {
  // to 即将要进入的路由对象，from 来源路由，next 钩子函数，是否放行
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫（了解）

router.beforeResolve((to, from, next) => {
  // ...
})

全局后置钩子（了解）

router.afterEach((to, from) => {
  // 该路由守卫不接受 next 钩子函数
  // ...
})

路由独享守卫（了解）

该守卫仅对配置的路由生效，这些守卫与全局前置守卫的方法参数是一样的。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内部守卫（了解）

可以在路由组件内直接定义以下路由导航守卫，仅对当前组件生效。

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

组件内的守卫 ｜ Vue-Router官方文档

---

状态管理器Vuex

配置

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

Vue.use(Vuex)
...

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

// main.js
import store from './store'

Vue.prototype.$store = store

五大核心属性

state

数据源，不要直接修改state状态

// store.js
const state = {
    name: 'zzz'
}

<!--page.vue-->
// 1.直接调用
this.$store.state.name // 'zzz'
// 2.辅助函数映射
computed: {
    ...mapState(['name'])
}
this.name // 'zzz' 

mutations

改变state状态的唯一途径

const mutations = {
    updateName(state, newName) {
        state.name = newName
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.commit(updateName, 'zzh') // state.name: 'zzh'
// 2.辅助函数映射
methods: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // state.name: 'zzh'

actions

存放异步操作，异步触发mutation改变state

const actions = {
    asyncUpdateName(context) {
        // 异步操作，例如发起http请求去获取更新后的name，假设name=xxx
        ...
        context.commit('updateName', res.name) // state.name: 'xxx'
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.dispatch(asyncUpdateName)
// 2.辅助函数映射
methods: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

getters

数据源处理，类似计算属性

const getter = {
    formatName(state) {
        return state.name + '2021'
    }
}

<!--page.vue-->
// 1.直接调用
this.$store.getter.formatName() // 'xxx2021'
// 2.辅助函数映射
computed: {
    ...mapGetters(['formatName'])
}
this.formatName() //  // 'xxx2021'

modules

模块化，让每个模块单独管理一套自己的state、mutations、actions和getters。

// 模块内部
this.$store.state.name  // 内部访问无须使用命名空间
// 模块外部
this.$store.state.login.name  // login是模块命名空间
...
其他属性类似

modules｜Vuex官方文档

---

Axios

基于 promise 封装的Http请求库，官方推荐

<!-- api.js -->
import axios from 'axios'

// 创建并配置实例
axios.create({
    baseURL: 'http://www.baidu.com',    // 请求基准地址
    timeout: 1000   // 请求超时时间
    ...
})

// 请求拦截器
axios.interceptors.request.use(request => {
    request.headers['Content-Type'] = 'application/json'
    ...
})
// 响应拦截器
axios.interceptors.response.use(response => {
    ...
    return response.data
})
// 配置请求
export default {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
import api from './api.js'

Vue.prototype.$api = api

<!-- page.vue -->
this.$api.getId().then(res => {
    ...
}).catch()