Vue 2.0 基础详细

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

data() {    return {        count: 2        copyCount: 1    }}// 使用this.count // 2

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

methods: {    cLog(msg) {        console.log(msg)    }}// 使用this.cLog('调用了函数') // 控制台输出：调用了函数

watch: {    count(value, [oldValue]) {        // value：改变后的值         this.copyCount = value + 1    }}// 当count发生改变时自动触发this.count = 2this.copyCount // 3

import UploadImg from 'xxxx'components: { UploadImg }// template<upload-img>

// NPM下载npm install vue-router// router.jsimport 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.jsimport 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转码，以免显示乱码。

// 用户未能验证身份时重定向到 /loginrouter.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) => {        // ...      }    }  ]})

beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeave

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...export default new Vuex.Store({  state,  getters,  mutations,  actions,  modules})// main.jsimport store from './store'Vue.prototype.$store = store

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

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'

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

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

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

<!-- 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()