CaseyWei

vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件，利用defineEmits方法返回函数触发自定义事件，defineEmits方法不需要引入直接使用。

ref通过 object.defineProperty()的 get 与set 来实现响应式(数据劫持),它内部会自动通过 reactive 转为。.value ，读取数据时模板中直接读取。来实现响应式(数据劫持)，并通过。备注:ref也可以用来定义。ref定义的数据:操作数据。reactive通过使用。对象(或数组)类型数据。对象(或数组)类型数据。

将 bin 文件夹下的 vue 和 vue.cmd 文件改为 vue3 和 vue3.cmd，避免 和全局的 vue 冲突。如果你本地已经装有 vue2.0+，那么安装 vue3 的这些操作请勿全局安装，否则会影响现有 vue2 的环境。此时随便在一个文件夹下运行 vue3 -V 就能看到版本信息了，如果没显示可重启电脑，再运行 vue3 -V。新建 vue3 的环境变量 变量名：vue3 变量值 ：你安装 vue3 的到.bIn 文件路径。现在可以任意新建一个文件夹，创建一个 vue3 的项目了。

5-1图报错.jpg。链接：https://www.jianshu.com/p/44ee417537eb。

Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！

在项目开发过程中会有textarea文本框输入提交后台，在特殊字符和脚本防注入的处理上，采用html转义的简单方法来解决这个问题。这种能解决一般的脚本注入和表单提交解析问题，复杂验证还需自定义增加转义正则来实现。2、使用htmlDecode来解析后台返回回显的转义后的字符。

Vue获取URL图片的宽高

vue获取富文本中的图片链接

如果需要禁止页面的缩放,需要在vue项目中做如下更改:

Vue——绑定图片路径使用相对路径图片显示不出的解决方案

原生app里边一些需要页面需要h5来实现，涉及到app原生与h5交互，记录一下。

vue中改变v-html元素样式

使用/deep/报错，换>>>不报错但是也无效。使用::v-deep代替/deep/或者>>>

this 将会指向 undefined，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误。3.不应该使用箭头函数来定义 `计算属性 (computed)` 里面的函数。5.不应该使用箭头函数来定义 `过滤器 (filters)` 里面的函数。4.不应该使用箭头函数来定义 `监听器 (watch)` 里面的函数。

选中复制<template> <el-button type="primary" plain @click="onCopy">复制</el-button></template><script>export default { methods:{ onCopy(){ document.execCommand("Copy"); // 执行浏览器复制命令 this.$message({...

问题：项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，图片都404了。比如：<div :style="{background-image:'url('assets/img/common/bg.png')'}"></div><span :style="{background-

1.安装loader 安装postcss-loader 和 autoprefixer 下载：cnpm install postcss-loader autoprefixer --save-dev2.在webpack.config.js里面设置以下代码：test:/\.css$/,use: ['style-loader','css-loader',{ loader: "postcss-loader", options:{ plugins:[...

设置height: 100%;是无效的，在chrome的Elements中发现height仍然是0px.设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。此时应该在App.vue文件style中添加如下代码： ht

问题： 拿到后端数值就直接赋值了，但是页面却一直没有显示新的数据。解决： 官方文档介绍dataV里面的组件props均未设置deep监听，刷新props时，要直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { …this.someProps }。实例：<template> <div class="update-demo"> <dv-percent-pond .

前言maptalks配合VUE开发地图服务一、maptalks是什么？一个用于集成2D / 3D地图的开源javascript库。maptalks官网maptalks官方实例二、使用步骤1.引入css和js在VUE根目录的index.html引入代码如下（示例）：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"><script type

基于vite初始化项目npm init vite-app <project-name>cd <project-name>npm installnpm run dev项目生成之后，编写一个计数器组件，修改App.vue里面的内容：<template> <button @click="change">count is: {{ count }}</button></template> <script&

使用 ref 来定位 DOM 节点很方便。但是期间遇到了一个问题，就是在生命周期 mounted 钩子函数里面使用 this.$refs.xx，打印出来的却是 undefined？如果在 DOM 结构中的某个 DOM 节点使用了 v-if、v-show 或者 v-for（即根据获取到的后台数据来动态操作 DOM，即响应式），那么这些 DOM 是不会在 mounted 阶段找到的。因为updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updat

一、首先安装jenkins和gitLab（可自行百度查看如何安装jenkins和gitLab），并在jenkins所在服务器安装vue项目打包所需工具，包括node.js；vue-cli脚手架，webpack工具，还需在jenkins服务器安装git工具用于进行git项目下载。安装内容：1、vue部分：(1)Node.js（安装完成后检查node和npm版本是否已安装完成，命令node -v）(2)安装cnpm（命令：npm install -g cnpm --registry=http

使用flvjs库同时播放flv文件，需要分页发现，之前直播流没有断开，很影响性能，网上查阅借鉴下边代码实现断开上页直播流// 销毁播放器实例 closePlayer() { if (this.player.length > 0) { this.player.forEach((item) => { item.destroy(true); item.off('ended', function () {}); .

为什么要监听storage的变化？当我们在使用vue的时候，有时候需要一个两个数据在全局共享，vue虽然提供了vuex模块来解决此问题，但是为了一两个数据的共享引入vuex未免小题大做，所以我们选择使用storage来保存共享数据，但有个问题就是如何监听storage的变化，让我们可以在保存数据的同时，在另外一个路由中监听到变化并执行操作本例子就是演示此方法完整示例怎么监听首先在main.js中给Vue.protorype注册一个全局方法，其中，我们约定好了想要监听的sessionSto

官方文档：https://github.com/bilibili/flv.js安装：npm install --save flv.js组件内引入依赖：import flvjs from 'flv.js'实例：<template> <div> <video id="videoElement" controls autoplay muted width="300px" height="200px"> </video

说明： 实测可以在谷歌、火狐、360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题，ESC按键下可以同步 实例：<!--html--><!-- 全屏显示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="da.

一、先上效果图项目情况：vue+screenfull插件其实文档上写的很清楚：screenfull文档点击页面的全屏图标，使包裹地图的div实现全屏。二、页面结构三、在页面加载时添加监听 mounted () { const element = document.getElementById('map_container'); document.getElementById('full_screen').addEventListener('click

例子1:问题原因：this.$refs.tree.setCheckedKeys(this.defalutArr)，发现使用setCheckedKeys方法无效，换做setChecked方法可以解决获取数据解决：if (res.data.code == 200) { //默认选中的树的数据 setTimeout(() =>{ res.data.data.forEach(value => { this.$refs.rootTree.setCheck

场景：通常项目中在每个请求接口的方法中添加一个请求锁，防止重复请求，但是这样比较low，代码比较冗余，于是添加一个全局的方法，就不用每次请求接口前手动编写请求锁，减少编码和工作量。方法：在axios的请求和响应拦截器里边使用axios的CancelToken方法即可实现。实例：// 封装axios的请求，返回重新封装的数据格式// 对错误的统一处理import axios from 'axios'import errorHandle from './errorHandle'...

vue3.0 -- 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索写在前面：11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多面试中Object.defineProperty是vue这个框架一个出现率很高的考察点，一开始大家对这个..

数组的变化先让我们了解下Object.defineProperty()对数组变化的跟踪情况：var a={};bValue=1;Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(){ return bValue; }});a.b;//1a.b=[].

场景：为了更好的用户体验，用户未填写数据做校验时候直接获取焦点，减少用户点击操作原生JS操作DOM实现使用mounted钩子函数，它表示页面一加载进来就执行函数里面的内容（和window.onload类似）//html部分编号:<input type="text" v-model='newId' id='inputId'>//vue对象var vm = new Vue({el: '#app',data: {newId: '',},// 注意：mounted钩子函.

vue v-lazy官方API：https://www.npmjs.com/package/vue-lazyload1.安装插件npm install vue-lazyload --save-dev2.在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直...

在写父组件子组件相互传递数据的时候，出现The data property "num" is already declared as a prop. Use prop default value instead.这里意思是这个data的属性num已经在prop声明了，使用prop默认的值替代。因为num我在父组件已经创建声明后面又在子组件的data声明和初始化，造成冲突。所以报这个错，然后需要把子组件的那个data函数里的num删除或者换个不重复的名字，便可以解决报错。...

最近新版本有个需求是日期选择器以月份为刻度，只能选择上个月份之前的月份，平时这种业务需求不多，于是实现后记录下～<el-date-picker v-model="declareYearMonth" type="month" placeholder="请选择计佣年月" format="yyyy 年 MM 月" value-format="yyyy-MM" :picker-options="pickerOptions"></el-date-picker>expo...

<th v-for="value in tableColumn" :key="value"></th><tr style="border: 1px solid red;" v-for="(value, key3) in tableRows" :key="value"> <td class="td-center">{{rowsName[key3]}}</td> <td v-for="value in tableColumn" :ke.

使用Vue的v-for的时候出现了错误Uncaught RangeError: Invalid array length问题出在v-for的的数据上，由于提供的数据小于0所致。<tr v-for="n in emptyCount"></tr>在这里我计算了空的tr的数量，将数量控制在12条数据。this.emptyCount = 12 - projectList.length然而我忽略了一个问题，那就是projectList的长度大于12的时候长.

最近做项目，循环出来的数据需要倒序排列，于是需要用到传参计算属性处理一下，做个记录吧<div v-for="(item,index) in list" :key="index"> <label v-for="(chidlItem,index) in reverseArr(item)" :key="chidlIndex" /></div>computed: { reverseArr : function(){ /..

场景：使用element-ui穿透一些组件库样式的时候发现报格式错误，如下图在vue-loader官网看到这样一句话：解决办法：/deep/ 替换成 ::v-deep实例：