记录使用 Vue 过程中遇到的一些技术点

Windyluna

已于 2023-08-09 14:24:21 修改

阅读量299

点赞数

分类专栏： Vue 文章标签： vue.js javascript

于 2021-10-19 10:24:12 首次发布

本文链接：https://blog.csdn.net/Windyluna/article/details/120778837

版权

Vue 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

vue 学习资料：https://blog.csdn.net/qq_31126175?type=blog

项目文件及文件夹命名规范：https://www.jianshu.com/p/7e397fc3dd5c
时间日期格式化插件：【moment 插件】：
例如：
获取前一个月的日期：moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'); 显示结果为：“2017-08-20 15:35:52”

在这里插入图片描述

1、Vue 刷新当前页面，并重新加载页面数据

使用场景：比如说，在当前页面修改保存之后，需要获取当前页面的最新数据时。

业务场景：在管理后台，在执行完，增，删，改，操作的时候。我们需要刷新一下页面，重载数据。在JQ中我们会用到location.reload()方法，刷新页面；在vue中，这里需要用到一个 provide / inject 这对用例。（其他方法：this.$router.go(0)，会强制刷新，出现空白页面体验不好）

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

实现原理就是通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果，show -> flase -> show

具体代码如下：
（1）首先在我们的根组件APP.vue里面,写入刷新方法，路由初始状态是显示的

<template>
  <div id="app">
    <keep-alive>
    <router-view  v-show="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view  v-if="isRouterAlive"/>
    <Tabbar v-show="$route.meta.showFooter"></Tabbar>
  </div>
</template>


<script>
// 样式重置 common.css
import "./assets/common.css"
import SHeader from './components_c/SearchHeader.vue'
import Tabbar from './components_c/Tabbar'
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  components:{
    SHeader,
    Tabbar
  },

  methods: {
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  }

}
</script>


<style lang="scss" scoped>

</style>

在isRouterAlive 为true的地方使用刷新，然后在其他组件或者页面中调用相应方法就行

（2）然后在子组件中引用
在这里插入图片描述

（3）执行完相应操作之后，调用reload方法
在这里插入图片描述

2、Object.defineproperty 双向绑定属性

应用defineProperty简单实现vue的双向数据绑定: https://www.cnblogs.com/junwu/p/7274034.html

Object.defineProperty(window, "pullution_city_fireDetail", {
        configurable: true,
        get: function () {
          return _this.pageTitle;
        },
        set: function (val) {
          },
      });

应用: 属性保持组件稳定
Object.defineproperty在vue中的作用

3、两个页面传值

(1) 在vue中实现简单页面逆传值的方法
参考： https://www.jb51.net/article/129093.htm
(2)详解vuejs几种不同组件（页面）间传值的方式
参考： https://www.jb51.net/article/115152.htm

4、js判断对象是否为空对象的几种方法

（1）将json对象转化为json字符串，再判断该字符串是否为"{}"

var data = {};
var b = JSON.stringify(data) == "{}";
alert(b); //true

（2）for in 循环判断

var obj = {};
var b = function () {
  for (var key in obj) {
    return false;
  }
  return true;
};
alert(b()); //true

（3）jquery的isEmptyObject方法
此方法是jquery将2方法(for in)进行封装，使用时需要依赖jquery

var data = {};
var b = $.isEmptyObject(data);
alert(b); //true

（4）Object.getOwnPropertyNames()方法
此方法是使用Object对象的getOwnPropertyNames方法，获取到对象中的属性名，存到一个数组中，返回数组对象，我们可以通过判断数组的length来判断此对象是否为空
注意：此方法不兼容ie8，其余浏览器没有测试

var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0); //true

（5）使用ES6的Object.keys()方法
与4方法类似，是ES6的新方法, 返回值也是对象中属性名组成的数组

var data = {};
var arr = Object.keys(data);
alert(arr.length == 0); //true

5、Vue / keep-alive

参考：https://www.jianshu.com/p/4b55d312d297

利用Vue中keep-alive，快速实现页面缓存：
https://zhuanlan.zhihu.com/p/96740001

vue使用keep-alive指令缓存页面和清除缓存：https://blog.csdn.net/JsongNeu/article/details/105129005

注意：使用 keep-alive 之后，更新数据的方法
（1）方法一：写在 activated 中
https://www.cnblogs.com/ivy-zheng/p/13306789.html
（2）方法二：可以通过 this.$set 来更新
例如：原始数据为：

data(){
	return{
		taskInfo:{
			name:""
		}
	}
},

更新数据：
this.$set(this, 'name', wang)

给页面添加 keep-alive
场景：
更新页面数据
场景：
清除当前页面的 keep-alive
场景：

6、vue实现列表点击选中（可多选）的思路：

样式：
在这里插入图片描述

参考：https://www.h5w3.com/75243.html

7、关于vue项目和内嵌iframe页面之间的通信问题

vue 页面向内嵌 iframe 传递事件

// vue页面代码
let frame = document.getElementById("iframeId"); // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage(object, "*"); //  object为传送的对象   *号为接收数据的项目地址

// iframe页面
window.addEventListener("message", function (event) {
  // 传送的数据在event.data里面
});

iframe 页面向 vue 项目页面传递事件

//  iframe页面
window.parent.postMessage(object, "*"); //  object为需要传送的数据对象  *号为接收数据的项目url地址

//主页面
window.addEventListener("message", function (event) {
  //  数据在event.data对象中
});

8、使用window.onerror捕获和报告JavaScript错误

定位报错位置的方法：

参考链接：https://www.jb51.net/article/78765.htm

9、Vue - 监听页面刷新和关闭

参考：https://www.cnblogs.com/500m/p/12109744.html

在 created中注册页面刷新和关闭事件

created() {
  window.addEventListener('beforeunload', e =>this.test(e))
}

事件，将你的逻辑方法加进去

methods: {
  test(e) {
    console.log('刷新或关闭')
    // ...
  }
}

卸载注册的事件

destroyed() {
  window.removeEventListener("beforeunload", (e) => this.test(e));
},

10、PC端页面适配（理解）

理解：https://blog.csdn.net/quhongqiang/article/details/86245246#comments_18812093

11、vue中引入特殊字体库

拿到设计师给的格式文件：.otf | .woff | .ttf 格式文件
在 assets 文件夹下创建文件夹：
/assets/fonts/font 特殊字体库（/assets/fonts/iconfont 图标字体库）
新建一个font.scss
在这里插入图片描述
在font.scss 文件中引入字体文件

@font-face {
  font-family: 'Digital dream Fat';
  src: url('./Digital-dream-Fat-Skew-Narrow.ttf');
  font-weight: normal;
  font-style: normal;
}

/** 锐字真言**/
@font-face {
  font-family: 'ZhenyanGB';
  src: url('./Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DIN';
  src: url('./Din-Medium.otf');
  font-weight: normal;
  font-style: normal;
}

在 main.js 文件中引入

import '@/assets/fonts/font/font.scss'

在项目中使用：

.time-con {
  font-family: Digital dream Fat;
}

12、JS三元运算符：

表达式 (expr1) ? (expr2) : (expr3)
运用：

<BasePrimarytitle
  :theme="overInfo && overInfo.name ? overInfo.name : ''"
  :paddingBottom="20"
  :isNumber="true"
  :num="overInfo.value"
></BasePrimarytitle>

扩展：Js多元嵌套运算符

var state = 2;
var select = (state == 1 ? "第一" : (state == 2 ? "第二":(state == 3 ? "第三" : "第四")))
console.log(select)

运用：

<BaseSubTitle
  :theme="
    currentActive == 2
      ? '第一'
      : currentActive == 3
      ? '第二'
      : currentActive == 4
      ? '第三'
      : '第四'
  "
  class="mg-left20 mg-big"
></BaseSubTitle>

13、vue父组件接收多个子组件参数的同时接收自定义参数解决方案

很多时候用 $emit 携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。

子组件提交自定义事件并携带多个参数

handleChange(value,valueObj) {

  this.$emit("handleParLibraryName",value,valueObj);

}

父组件接收子组件的参数并接收自定义参数 index：

@handleParLibraryName="(value,valueObj)=>handleParLibraryName(value,valueObj,index)">

14、在写静态页面的时候，常常会遇到一些 label:value 的形式的信息展示，如：

在这里插入图片描述
技巧写法：
使用 Object.hasOwnProperty.call()
代码：

<template>
  <div>
    <div class="list-item" v-for="(item, index) in dataList" :key="index">
      <div class="label">{{ item.label }}</div>
      <div class="value">{{ item.value || "--" }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dataList: {
        name: {
          label: "姓名",
          value: "",
        },
        company: {
          label: "单位",
          value: "",
        },
        sex: {
          label: "性别",
          value: "",
        },
        phone: {
          label: "手机号",
          value: "",
        },
      },
    };
  },
  methods: {
    getData() {
      // info 为后端返回的接口数据：
      let info = {
        name: "wag",
        company: "米欧某公司",
        sex: "女",
        phone: "18523652365",
      };

      // 匹配
      for (const key in this.dataList) {
        if (Object.hasOwnProperty.call(this.dataList, key)) {
          this.dataList[key].value = info[key] || "";
        }
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  .label {
    width: 140rpx;
  }
}
</style>

15、在Vue 文件中引入组件

在这里插入图片描述

17、vue - pc 端的轮播 swiper

vue-awesome-swiper

18、在项目中使用公司内部的某个插件或者组件库时，如果不能npm 下载该依赖，可以去查看下这个文件：`.npmrc` 这个文件

查看这个文件可以看到使用的源的地址：
在这里插入图片描述

19、Vue组件间传值（超全，跨代）父传子，子传父，爷传孙，孙传爷

参考地址：https://blog.csdn.net/SJJ980724/article/details/120829650

20、Vue中的transition组件

参考：https://juejin.cn/post/7028443579018117150

21、vue组件：自定义组件，使用 model：

参考1：https://blog.csdn.net/qq_36437172/article/details/109445212
参考2：https://www.cnblogs.com/lhuser/p/11269546.html

在这里插入图片描述

22、vue 动态组件与slot插槽

参考：
https://blog.csdn.net/wxxuejishuangxia/article/details/93758884

23、在vue中如何使用 jsx，并使用 v-model 等自定义指令

参考：https://www.jianshu.com/p/7fc3b382f7f9

24、vue 自定义指令

参考：https://juejin.cn/post/6844904174036090893

在 packages/directives/hidden.js 中

export default {
    name: 'hidden',
    bind: function(el, binding) {
        if (binding.value) {
            el.style.display = 'none';
        }
    },
    update: function(el, binding) {
        if (binding.value) {
            el.style.display = 'none';
        } else {
            el.style.display = '';
        }
    }
}

在 main.js 或者 index.js 中注册：

import directives from './directives'

const install = function (Vue, opt = {}) {
    //注册指令
    Object.keys(directives).forEach(key => {
        Vue.directive(directives[key].name || key, directives[key])
    })
    
};

export default install;

运用：
在 .vue 文件中

<template>
    <base-select
		v-hidden="true"
		v-model="searchForm.provinceOrCountry"
		:options="regionTypeOptions"
		width="90px">
    </base-select>
</template>

<script>
export default {
    directives: {
        'hidden': hidden
    },
    props:{}
}
</script>