weixin_44090040的博客

【代码】async/await。

在vue中, 接收并下载文件流可以通过将其转成blob对象或者arraybuffer，添加到a标签或者iframe标签中来模拟下载.

【代码】vue-lazyload 图片懒加载的原理与使用。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

vue项目中通过使用screenful插件实现全屏。

一、在Vue项目中引入三维地图1.安装对应的包//安装mars3d主库npm install mars3d --save //安装mars3d插件（按需安装）npm install mars3d-space --save2.为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用<template> <div :id='`tong3d-container${mapKey}`' :class="['tong3d-contai

一、在Vue项目中引入二维地图1.切换到公司的仓库下载地图插件npm config set registry http://nexus.toops.club/repository/npm-zui/npm i tongmap-gl2.在页面上加载二维地图<template> <div style="width: 100%; height: 100%"> <!-- 加载二维地图 --> <tong-gl-map :optio

/* * @Descripttion: * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2021-10-15 18:13:28 * @LastEditors: zhangfan * @LastEditTime: 2021-10-20 11:09:13 */'use strict'// Template version: 1.3.1// see http://vuejs-templates.gi

<!-- * @Descripttion: 手写一个下拉框 * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2021-09-28 18:14:16 * @LastEditors: zhangfan * @LastEditTime: 2021-10-19 15:47:07--><template> <div class="select-box"> &

<animate-number from="0" :to="onLineNumber" :key="orgListKey" duration="1500" easing="easeOutQuad" :formatter="formatter" ></animate-number> export default { name: "mapLeft", data() { return { orgListKey: new .

在字符串中使用${}拼接变量:title="`设备名称：${videosItem.terminalNumber}`"注意不是单引号，而是两个 ` 号（esc下面的按键

封装全局axios，封装请求http.js/* * @Descripttion: * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-12-08 15:48:34 * @LastEditors: zhangfan * @LastEditTime: 2020-12-08 15:57:38 */import axios from 'axios'; // 引入axiosimport QS fr

监听路由 当参数发生改变的时候 重新获取数据呀 watch: { $route(to, from) { //重新获取数据 this.getProduct(); } },

<!-- * @Descripttion: Vuex的辅助函数使用 mapState mapMutations mapGetters mapActions * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-05-18 14:05:13 * @LastEditors: zhangfan * @LastEditTime: 2021-07-02 15:52:49--><

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。以前子组件修改父组件的值的方法：<!-- * @Descripttion: .sync 修饰符 父组件 * @version: * @Author: zhangfan * @email: 2207044692@qq.com *

一. 安装npm install vue-wechat-title --save二. 使用在main.js中引入import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)在router>index.js中添加meta对象配置titleconst router = new Router({ routes: [ ... { path: "/goodsDesc",

首先，在assets下css里创建了两个文件，一个theme.less，就是控制样式的函数，一个color.less，用来调用函数传值。// theme.less文件// 实现换肤的样式函数/* 1.主色调，整体项目的主要颜色。 2.首页的背景颜色。 3.字体颜色。主要是和主色调来配合使用。 4.表格滑过的颜色。 5.表格选中的颜色。 6/7.首页每一项渐变的颜色，待定。*///将项目中所有需要更改样式的css全部提取出来写在这个函数中，将其他地.

npm i vue-pdf --save<template> <pdf src="./static/relativity.pdf"></pdf></template> <script>import pdf from 'vue-pdf' export default { components: { pdf }}</script><template> <div class="

1.组件自身的递归调用，就是在当前组件中，调用组件自己2.当我们使用vue.js官方提供的调试工具调试时，可以看到组件的名称，更好地定位3.最后一种应该是使用比较多的情况，就是当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。...

<el-form-item label="单位角色："> <el-input class="row-padding-bottom" v-model="filters.type" clearable @input="change($event)"> </el-input></el-form-item>change(e){ this.$forceUpdate();},

<!-- * @Descripttion: appid管理技术后台（正式环境） * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2021-04-12 15:27:34 * @LastEditors: zhangfan * @LastEditTime: 2021-04-27 10:08:15--><el-switch class="switch" v-model=".

<!-- * @Descripttion: this.$set的正确使用 * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-05-18 14:05:13 * @LastEditors: zhangfan * @LastEditTime: 2021-04-25 17:47:12--><template> <div> <el-table :

我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<!-- * @Descripttion: this.$set的正确使用 * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-05-18 14:05:13 * @LastEditors: zhangfan * @LastEditTime: 2021-04-25 11:20:51--><temp

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button id="btn">点击</button> </body> <script> const btn=document.getElementById('btn'

npm install --save vue-clipboard2import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)<button v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</button>data(){ retur

<h3 id='myh3' ref='myh3'> </h3> methods:{ getElement(){ console.log( this.$refs.myh3.innerText) } }//组件也可以使用ref,让父组件调用子组件里的方法和属性值<login ref='mylogin'> </login> methods:{ getElement(){ //父组件调用子组件里的属性值.

<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="currentTabComponent"></component>

// 复制 copy(value) { let value = value; let oInput = document.createElement("input"); oInput.value = value; document.body.appendChild(oInput); oInput.select(); // 选择对象; // console.log(oInput.value) document.execC

// vue.config.js module.exports = { runtimeCompiler: true,}

<!-- * @Descripttion: * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-05-13 14:52:34 * @LastEditors: zhangfan * @LastEditTime: 2021-01-29 14:27:02--><template> <div> <h1>标题:{{ title }}&lt.

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）v-for优先级比v-if高如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环<template v-if="isShow"> <p v-for="item in items"></template>如果条件出现在循环内部，可通过计算属性computed.

- Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。- Object.freeze()存在的意义如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增,对于纯展示的大数据，都可以使用Object.freeze提升性能。

vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者...

通过proxyTable将接口代理到本地在开发的时候，需要请求同局域网内的接口，发现直接使用http://对方的ip地址/接口路径，会出现类似下图的跨域报错打开config/index.js，在dev中找到proxyTable proxyTable: { // 下面是接口的路径，我的接口 地址是http://ad.why.com/login '/api': { // 需要转发代理的域名 target: 'http://ad.why.com', // 如果是http

在vue实际项目中，很多时候会在mounted或者created请求数据接口然后渲染到页面上，但是这两个生命周期都是只会在第一次进入页面后执行，再次进入该页面时，由于vue-router的机制，会缓存已经加载过的页面数据这样会大大提高效率，所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据，跳转到这个页面，修改的数据并没有变化。created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created.

@vue/cli3.0增加一个可视化项目管理工具，全局安装完成cli3.0之后，可以直接在cmd输入命令：vue ui 启动即可，地址默认是localhost:8000

routerrouter为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.router.push，和router−link跳转一样，this.router.push，和router-link跳转一样，this.router.push，和router−link跳转一样，this.router.push会往history栈中添加一个新的记录。routeroute相当于当前正在跳转的路由对象。。可以从里面获..

1、安装less在项目的根目录下打开命令行工具，执行命令：npm install less less-loader --save-dev安装完成后打开 build目录，修改 webpack.base.conf.js 中的相关配置：在 module.exports 中找到 module 中的 rules 数组添加如下代码：module.exports = { ... ... module: { rules: [ {...}, {...}, {

前言混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。一、组件和混入的区别单纯组件引用： 父组件 + 子组件 >>> 父组件 + 子组件mixins： 父组件 + 子组件 >>> new父组件二、混入 (mixin)的作用多个组件可以共享数据和方法，在