个人总结基本用法,十分钟学会vue~

vue很流行,我觉得得益于它的易用性~废话不多说,开始表演~(以下为伪代码)

“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；

 

1.安装npm,初始化项目等等略~直接使用,满足日常最基本操作,其他百度~

2.创建基本路由(并做基本判断):

const router = new Router({
  //经典模式(去除#)
  mode: 'history',
  //根路径
  base:"api",
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    }
  ]
});
router.beforeEach((to, from, next) => {
  //判断是否需要验证token
  if (to.matched.some(record => record.meta.requireAuth)) {
    //有则往下进行,没有重定向到登录页
    if (localStorage.getItem("test_token")) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
});

3.简单封装axios,并作判断:

import axios from 'axios'
import qs from 'qs'

const service = axios.create({
  baseURL: 'http://localhost:8888/',
  timeout: 5000,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

service.interceptors.request.use(
  config => {
    if (config.method === 'post') {
      //转换为表单提交kv参数
      if (config.data) {
        config.data = qs.stringify(config.data)
      }
    }
    if (localStorage.getItem("test_token")) {
      config.headers['token'] = localStorage.getItem("test_token")
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code != '0000') {
      //登陆失败,1s后跳转到登录页(window.location加不加href区别)
      setTimeout(function () {
      window.location='login'
    },1000)
      return res
    } else {
      console.info("登陆成功")
      return res
    }
  },
  error => {
    console.error("请求出错")
    return Promise.reject(error)
  }
)

export default service

4.view层引用自定义组件展示:

<template>
  <div>
    <login_vue ref="lo" @click="gologin"></login_vue>
  </div>
</template>

<script>
  import login_vue from '../login';

  export default {
    name: "login",
    //引入的自定义组件
    components: {login_vue}
  }
</script>

5.父子组件间传值:

1.父组件访问子组件变量及方法:
(1)使用ref
引用的子组件:
<child ref="childRef"></child>
使用方式:
this.$refs.childRef.name   //访问子组件变量
this.$refs.childRef.say()   //访问子组件方法

(2)使用props:
子组件中声明props数组:
props:[childName]
引用的子组件(绑定参数):
<child :childName="name"></child>
name为父组件的参数,进行赋值等操作;


2.子组件访问父组件变量及方法
(1)使用$parent
直接使用this.$parent.xx即可访问父组件,和ref类似
(2)使用$emit
首先在父组件中引入子组件并绑定方法:
<child @childMethod="parentMethod"></child>
然后在子组件中使用
this.$emit("childMethod","可带参数")访问父类方法parentMethod

6.使用vuex进行全局状态变量的统一使用:

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    myUser: {
      name: "gy",
      age:"27"
    }
  },
  mutations: {
    module(state, newName) {
      state.myUser.name = newName;
    }
  },
  getters: {
    getUser: (state) => {
      return state.myUser;
    }
  },
  actions: {
    updateName(context, newName) {
      context.commit('module', newName)
    }
  }
});
export default store;

大概意思时:state存储了一个全局变量,getters用来访问变量,mutations用来处理变量,actions用来执行mutations(并且支持异步,例如延时执行等);

解决的痛点就是如果引入多个组件,那么他们如果有共同的状态也可以认为他们data有共同参数,那么就可以使用这个vuex进行管理,省略相互传值;

注意点是getters这里取出来的是state中的对象,如果取得是对象具体变量,那么后面展示时候无法做到实时变化;

<template>
  <div>
      <child1></child1>
      <child2></child2>
      <div>父组件:{{name}}</div>
  </div>
</template>

name:this.$store.state.getUser.name

//如果在以上两个子组件中都有使用this.$store.state.getUser获取全局变量

//那么执行更改actions时:
      change: function () {
        this.$store.dispatch('updateName', "变更后的名字")
      },
//则父子组件中变量都会发生相应更改

 

未完待续~