前后端分离项目中常用的Vue技能，持续更新中.....

1. ElementUI表格中的链接实现跳转

<el-table-column align="center" label="链接跳转" width="120">
    <template slot-scope="scope">
   	 	<a :href="'/test/'+scope.row.id">    <!-- 拼接要跳转的url -->
   		 进入
    	</a>
    </template>
</el-table-column>

2. style标签中的scoped属性

<style lang="stylus" scoped>
</style>

scoped参数表示这个标签里的所有样式只在当前这个组件中生效，在其他的组件中不会起作用
可以避免不同css文件中变量的污染。

3. mounted和created的区别

created:在网页加载html前调用，一般是先初始化值后渲染模版

mounted:在网页加载html后调用，一般是先渲染模版后初始化值

参考：Vue生命周期中mounted和created的区别

4. Vue中watch的作用

watch主要起到“监视”的作用，也就是监视数据（或者变量）的变化。

具体使用场景：比如父组件向子组件传值的时候，每次父组件的值一旦变化，子组件需要知道这个变化，这时候就要用watch来监听

watch: {
    status: {                   // 需要监听的变量是：status
        handler(newName, oldName) {
        	alert('status变化了')
        },
   		immediate: true,       // 表示当值第一次绑定的时候立即执行监听函数
    },
}

说明：

设置deep: true 则可以监听到对象中某个属性的变化，不设置只能监听普通变量，例如

watch: {
    'Obj.name': {
      handler(newName, oldName) {
          alert('Obj.name改变了')
      },
      deep: true,
      immediate: true
    }
  }

参考: vue中watch的详细用法

5. 插槽： slot-scope=“scope”

6. 跳转

1. 跳转到名字为Test的组件中

<router-link :to="{ name: 'Test' }">  
     更多
</router-link>

2. 其它

let path = this.$route.query.redirect;
// 下面两个有区别
this.$router.replace(path)                   
this.$router.push({ path: "mediaContent/" + row.id });

参考：Vue中this.$router.replace和this.$router.push的区别

7. Div内部文字使用省略号表示超出部分

css代码：

overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;

参考 : Div内部的内容超出部分显示省略号（仅仅只有一行内容

8. 父组件向子组件传值

父组件部分代码：（向SubComponent组件传status值为例）

<el-tab-pane >
      <SubComponent v-bind:name = "hello"></SubComponent>
</el-tab-pane>

子组件接受值

export default {
    name: "SubComponent",
    props: ['name'],
 }

9. 子组件向父组件传值

子组件：绑定数据（张三 ====>> user)

this.$emit('user', '张三')

父组件

1. 绑定子组件传入的key ： user 到函数getData中

<router-view @user="getData">
</router-view>

2. 在函数中处理数据

getData(msg) {
   this.getUser = msg
},

参考：vue实现父子路由（组件）传值

10. 路由跳转传值

根据组件名字跳转到TestComponent组件，并且传入status参数

<router-link :to="{name: 'TestComponent', params: {status: '0'}}">
     查看详情
</router-link>

TestComponent 配置如下

1. 路由配置：

{
    path: '/testurl/:status',    // :status 接收参数
    name: 'TestComponent ',      // 组件名字，上面就是根据组件名字跳转
    component: TestComponent ,
    props:true,                  // 一定要写
    meta:{isAuth: true}          // meta用来存放自定义的信息，比如这个isAuth用来表明这个路由是否需要鉴权
},

2. 组件中配置

export default {
  name: "TestComponent",
  props: ['status'],
 }

11. 路由切换后，回到网页顶部

基本原理：使用 document控制回到顶部：document.documentElement.scrollTop = 0;

实践：在路由切换的时候，进行控制，如：

router.beforeEach((to, from, next) => {
    document.documentElement.scrollTop = 0;
    next();   // 必须调用
})

参考：【VUE】- 路由切换时，始终回到页面最顶部

12. Vue 中的 beforeEach

每次通过vue-router进行页面跳转，都会触发beforeEach这个钩子函数，这个回调函数共有三个参数，to，from，next这三个参数，to表示我要跳转的目标路由对应的参数，from表示来自哪个路由，就是操作路由跳转之前的，即将离开的路由对应的参数，next是一个回调函数，一定要调用next方法来resolve这个钩子函数。

例如：下面用一个登录拦截的例子来看用途

router.beforeEach((to, from, next) => {
  // 如果已经有Token（表示已经登录了）,可以到任何地方
  if (window.sessionStorage.getItem("tokenStr")) {
    	next();
  } else {
  	// 如果要访问的资源需要登录才能访问，则跳转到登录页面，并且登录成功后直接重定向到要访问的页面
    if (to.meta.isAuth) {
      Message.error('还没登录，请先登录！');
      next('/login?redirect=' + to.path);
    } else {
    // 访问的资源没有登录要求，直接访问
      next()
    }
  }
})

参考：vue-router中的beforeEach

13. v-bind的使用

作用：用于将data中定义的数据渲染到页面，但是页面中修改的数据不能回传到data域中。（单向绑定）

例如：由于img里面的数据需要动态获取，也就是要从data中获取，这个时候可以使用v-bind:src或者:src来获取，单纯使用src是拿不到数据的。

<img v-bind:src=picUrl>

export default {
  name: "TestComponent",
  data() : {
  	return {
  	    picUrl : "http://xxxxxxxx.jpg"
  	}
  }
 }

14. v-model的使用

v-bind只能单向绑定，也就是只能 data ==> 页面

为了能够让页面中用户的修改的数据回传到data中，也就是做到 页面 ==> data ，这个时候就需要使用 v-model ，并且它只能作用在表单元素中，比如input、radio、等等，它的数据流向是： data ==> 页面 和 页面 ==> data

例如：

<radio v-model="role" >英雄</radio>

export default {
  name: "TestComponent",
  data() : {
  	return {
  	    role : "英雄"
  	}
  }
 }

15. v-on 的使用

v-on主要用来绑定事件，比如鼠标点击事件： v-on:click=“testClick” 等价于 @click=“testClick” ，然后在method中定义testClick方法来处理。

16. 自定义分页器

1. 使用ElementUI中的pagination

2. 如果需要强制修改样式，需要使用/deep/ ，原因：vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

3. 自定义组件为中文：【Vue】element-ui分页器组件改为中文_Tree_wws的博客-CSDN博客

在main.js中修改如下内容：

import Vue from 'vue'
import ElementUI from 'element-ui'
//导入中文
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(ElementUI, {
  locale: zhLocale,
});
zhLocale.el.pagination = {
  goto: '跳至',
  pagesize: '条/页',
  total: `共计 {total} 条`,
  pageClassifier: '页',
};

17. css中position的使用

position定位：

• 当前元素为 relative ，则使用偏移量后，元素相对自己移动
• 当前元素为absolute：
  • 若其祖先元素没有设置position，则相对html根元素来移动
  • 若其祖先元素有设置position，则根据最近的设置了position的元素来改变偏移量。

一般来说，absolute使用较少

18. 普通函数与箭头函数=>

箭头函数指向其定义环境，this的指向无法通过其他方式改变；
function指向其直接调用者，一般来说最通常的是window对象，对象属性则指向改对象。
遇到过一个问题：axios报错Uncaught (in promise) TypeError: Cannot set properties of undefined (setting ‘wenben‘)

19. 解决跨域问题

注意：需要根据vue2 还是 vue3选择不同的解决方案：
参考：vue怎样解决axios请求出现前端跨域问题（实例详解）

20. 前端时间格式调整

将前端的格式2022-11-22T12:23:00.000+00:00转换为正常的yyyy-MM-dd格式

• 方法一：在后端中使用注解

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
 private Date createTime;

参考：vue时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss

21. vue自定义弹窗

思路：

1. 使用v-show根据条件设置元素是否弹出
2. 设置一个遮罩层，让底色变暗

几个报错问题的解决方案

1. “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

不错的资料

狂神说 Vue笔记