项目更新Vue笔记

script中琐碎知识点

data

数据类型

data：Object | Function
限制：组件的定义只接受 function。

那么vue中组件的定义是什么呢？

1.是一个可以重复使用的Vue是可以复用的Vue实例。
2.new Vue（）是一个Vue实例。
3.组件与实例接收相同的选项，如methods，computed、watch、data以及生命周期钩子等。但是el是根实例特有的。

｀即Vue项目中的.vue文件都可以叫做组件。它不限于component文件夹下的.vue文件，也可以认为这些文件复用度更高。

总结：data在用例中的类型可以是Object | Function
data在vue项目中的类型只能是 Function
函数中包含return出的对象{}

data:function(参数){return对象}  或者  data(){return对象}

代码格式

export default抛出的整体是一个对象，而其中是多个函数，如data()、created()等生命周期是函数；但是methods()是对象
> 对象【key:value】

<script>
export default {
   data: function () {
    return {
      overlay: false,
    };
  },
  methods: {},
};
</script>

其中，data的书写格式有如下几种

data: function () {
    return {
      overlay: false,
    };
  },

  date() {
    // 语句，以 ；间隔
    return {
        // 对象，以 ， 间隔
      overlay: false,
    };
  },

//使用箭头函数
date: () => {
   return{
      overlay: false,
    }
 },

//箭头函数只有一个表达式的时候可以省略关键字return
//为了去掉return，就要形成一个表达式，对象{overlay:false}加上圆括号（）
//由此，可去掉去掉return 和最外层{}，如下：
data: () => ({
      overlay: false,
    }),

methods

数据类型

methods：{ [key: string]: Function }
无论是实例还是项目/组件，数据类型都是函数
注意，不应该使用箭头函数来定义 method 函数

methods:{字符串类型的key:函数Function(参数){函数体}}
methods:{字符串类型的key(){函数体}}

可以认为,当函数无参数时1=2;若有参数使用1[2写法要求无参]

1
addLogin:function(){
     overlay=!overlay;
     }

2
addLogin(){
     overlay=!overlay;
   }

代码格式

methods: {
    goLogin() {
      this.overlay = !this.overlay;
    },
    //另一种
    goLogin:function(){
    	this.overlay = !this.overlay;
    }
  },

生命周期

生命周期图示

ES6箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
x => x * x相当于：function (x) { return x * x;}

箭头函数有两种格式：
①只包含一个表达式，连{ … }和return都省略掉了
②包含多条语句，这时候就不能省略{ … }和return

基础语法
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

(singleParam) => { statements }
singleParam => { statements }
(doubleParam1,(doubleParam2) => { statements }
// 当只有一个参数时，圆括号是可选的：多个参数必须加圆括号
// 没有参数的函数应该写成一对圆括号。 () => { statements }

官方参考文档

业务逻辑

退出登录

逻辑梳理

逻辑需实现：①清除token；②获取到的userInfo置空信息；③回到首页

每次点击登陆后都要置空input框，防止下次登陆数据保留
注意区分’‘与’ ’ 【’‘空字符串，’ ‘有空格的字符串】
=>account/password=’’；

代码展示

   <!-- 登陆成功后，登录按钮消失，出现退出箭头 -->
   <v-btn icon v-if="!userInfo.account">
       <v-icon large v-on:click="overlay = !overlay">mdi-account-circle</v-icon>
	</v-btn>
	<v-btn icon v-else>
       <v-icon large v-on:click="goBack">mdi-exit-to-app</v-icon>
	</v-btn>

    // 退出登陆状态：1.清除token,2.对象userInfo置空清除数据
    goBack() {
      localStorage.removeItem("token");
      this.userInfo = {};
      // 在其他页面时回到首页Home
      this.$router.push({ name:'Home' });
      alert('正在退出');
      // this.$router.go(0);
    },
  },

vuex状态管理模式【$store】

知识点

每一个 Vuex 的核心是 store（仓库），包含着应用中大部分的状态 (state)
store.state 来获取状态对象
store.commit 方法触发状态变更
不能直接改变 store 中的状态。唯一途径就是显式地提交 (commit) mutation

创建vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

逻辑梳理

to-do-list项目中,为了实现【在Show.vue页面输入的信息,自动同步到About.vue页面】，采用vuex状态管理模,共享数据信息.具体实现如下图.

而在GP项目中,用户登录系统后,导航栏bar处已登录个人账号,此时获取到的后端发送的token进而取到*个人信息,也要同步到此时的个人信息页面.在这里,也采用vuex.

代码展示

//Show.vue页面
<template>
  <div>
    <h1>输入的数据</h1>
    <textarea cols="30" rows="10"  v-model="inWord"></textarea><br>
    {{ inWord }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      inWord: "hello world",
    };
  },
  watch:{
      inWord(newValue){
          this.$store.commit('changeInput',newValue)
      }
  }
};
</script>

//store->index.js页面
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
   inputWord:"12345",
  },
  mutations: {
    changeInput(stateWord,value){
      stateWord.inputWord=value;
    }
  },
  actions: {
  },
  modules: {
  }
})

//About.vue页面
<template>
  <div class="about">
    <h1>Vuex同步显示的数据</h1>
    <textarea name="" id="" cols="30" rows="10" v-model="connetVuex"></textarea>
  </div>
</template>

<script>
export default {
  computed: {
    connetVuex() {
      return this.$store.state.inputWord;
    },
  },
};
</script>

vue-router导航守卫【$router】

知识点

逻辑梳理

GP项目中,为了实现【在登陆状态下，才能访问学习进度和教练评价两个页面的功能】，采用全局前置守卫：router.beforeEach
实现路由守卫 ，控制两个子页面的进入状态
页面跳转函数/方法参考

代码展示

// #全局前置守卫，设置没登陆时点击非首页页面，返回Home首页面
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token');
  if (to.name !== 'Home' && !isLogin) {
    next({ name: 'Home' });
    alert("未登录，无法访问！")
  }
  // console.log(to);
  // console.log(from);
  else { 
    // 确保 next 函数在任何给定的导航守卫中都被严格调用一次，所以此时要加else
    next(); 
  }
})