日常笔记——vue

一、v-for循环数据

错误写法：

<template>
<div id="app">
	<ul class="nav navbar-nav">
		<li v-for="(item,index) in navs" :key="index">
		    <router-link to="'/'+{{item.nurl}}">{{item.title}}</router-link>
		</li>
	</ul>
</div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            navs: [{
                    'title': 'User',
                    'nurl': 'ulist'
                },
                {
                    'title': 'Grade',
                    'nurl': 'glist'
                }
            ]
        }
    }
};
</script>
<style scoped>
</style>

运行程序之后会报错，在错误的最后发现一线‘生机’

最后终于成功：

<ul class="nav navbar-nav">
	<li v-for="(item,index) in navs" :key="index">
	    <router-link :to="'/'+item.nurl">{{item.title}}</router-link>
	</li>
</ul>

二、vue安装组件与使用

以安装axios为例：
首先查看项目目录下的package.json文件，搜索axios关键字提示没找到，在项目目录下执行：

npm install axios

执行完成后发现package.json文件中多了几行代码，说明已经安装成功了。

"dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

使用时先在main.js引入并且全局注册：

import axios from 'axios'		//引入
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios

三、axios返回值this.XXX赋值时报错（Cannot set property ‘XXX’ of undefined）

this.$axios({
     method: 'get',
     url: 'http://localhost:3000/users?_expand=grade',
 }).then(function (res) {
     this.uarr = res.data;
 });

主要原因是：在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
解决方法：
1、用ES6箭头函数，箭头方法可以和父方法共享变量

this.$axios({
     method: 'get',
     url: 'http://localhost:3000/users?_expand=grade',
 }).then((res) => {
     this.uarr = res.data;
 });

2、在请求axios外面定义一下 let that=this

let that = this;
this.$axios({
    method: 'get',
    url: 'http://localhost:3000/users?_expand=grade',
}).then(function(res) {
    that.uarr = res.data;
});

四、路径中的@

在 build\webpack.base.conf.js 文件下查看@代表的路径

在extensions中配置文件后缀，在代码中引入该类型文件时不用再写后缀名
alias是起别名的意思，这里@代表src目录

五、vue组件之间传值方式

转载，微信公众号：「前端工匠」 作者：浪里行舟

六、 vue router中beforeEach钩子

beforeEach函数有三个参数：
to ：即将进入的路由；
form ：即将离开的路由；
next ：跳转的路由，name为跳转路由的名字，还可以用query传参
踩坑 ： 下面的代码会让程序陷入死循环

router.beforeEach((to, from, next) => {
    if (!Cookies.get('token')) {
        next({
            name: 'login'
        });
    } else {
        next();
    }
})

正确的写法：

router.beforeEach((to, from, next) => {
    if (!Cookies.get('token') && to.name == 'login') { //没有登录过
        next();
    } else if (!Cookies.get('token') && to.name != 'login') { //无token并且将要去的页面时login
        next({
            name: 'login'
        });
    } else if (Cookies.get('token') && to.name == 'login') { //有token并且将要去的页面时login
        next({
            name: 'form'
        });
    } else {
        next();
    }
})

七、用watch监听路由的变化

<template>
  <div id="app">
    <!-- 左侧菜单栏 -->
    <van-nav-bar :title="title" v-if="showbar">
      <van-icon name="bars" @click="topIcon()" size="35px" slot="left" />
    </van-nav-bar>
    <van-popup
      v-model="show"
      position="left"
      :overlay="true"
      :close-on-click-overlay="true"
      :style="{ height: '100%' }"
    >
    <van-collapse v-model="activeNames">
      <van-collapse-item title="一级菜单 " name="1" size="large">
        <van-cell title="用户信息" is-link to="userinfo" @click="itemClick('用户信息')" />
        <van-cell title="表单" is-link to="form" @click="itemClick('表单')" />
        <van-cell title="列表" is-link to="list" @click="itemClick('列表')" />
      </van-collapse-item>
    </van-collapse>
    </van-popup>
    <!-- 左侧菜单栏 -->
    <!-- 路由 -->
    <router-view></router-view>
    <!-- 路由 -->
  </div>
</template>

在项目中，login页面不用显示左侧菜单栏和头部信息，页面的跳转都是用路由控制的，所以通过监听路由的方式控制左侧菜单栏和头部信息的显示和隐藏。

watch: {
    '$route'(value){
      if(value.name == 'login'){
        this.show = false;
      }else{
        this.show = true;
      }
    }
  }