![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 65
五花漏
so vegetable
展开
-
[已解决]this.$refs.form.validate()不执行
elementUI原创 2023-03-01 16:41:00 · 1632 阅读 · 1 评论 -
Vue-router中path的设置
Vue-router配置项原创 2023-02-16 17:39:06 · 2075 阅读 · 1 评论 -
[已解决]TypeError: Can not set property ‘xxx‘ of undefined报错情况分析
之前我写过一篇 [已解决]TypeError: Cannot read property ‘xxx‘ of undefined报错情况分析那篇报错说的是Cannot read ——“不能读取未定义的数据”这个报错是Cannot set ——“不能设置未定义的数据”,也就是说你不能给未定义的数据赋值。可以看到:如果一个变量a没有在data中定义,你这样去给它赋值: this.a = 'hello,world',是没有问题的。类似于一个变量未经声明就赋值,都可以看做是在window对象上寻找这个变量原创 2021-05-26 10:25:46 · 63277 阅读 · 9 评论 -
使用canvas绘制登录验证码
<template> <div class="code-canvas"> <canvas id="code-canvas" @click="createCode()" :width="canvasWidth" :height="canvasHeight" ></canvas> </div></template><style scoped>.code原创 2020-12-07 15:13:37 · 443 阅读 · 0 评论 -
细致讲解slot插槽的使用
彻底搞懂slot插槽,图文详解1、什么是插槽Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口。插槽实质是对子组件的扩展,通过``插槽向组件内部指定位置传递内容。slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。2、slot 与 props 的区别3、插槽的使用(1)匿名插槽(单个插槽、默认插槽)(2)具名插槽(3)作用域插槽因为父级模板里的所有内容都是在父级作用域中编译的;子级模板里的所有内容原创 2020-11-19 15:39:48 · 29558 阅读 · 7 评论 -
[已解决]“TypeError: Cannot read property ‘xxx‘ of undefined“报错情况分析
1、如果是vue,先看看你的data写对了没,我有一次手误打成了 date ,检查了一下午才看出来o(╥﹏╥)o2、如果这个数据“xxx”是从后台异步获取的,那就最好在data中先给他个默认值比如,data() { return { obj1: '', obj2: null. obj3: {}, obj4: [] }}mounted(){ // 获取后台数据给obj们赋值等等各种异步操作}或者 当“xxx”是一个嵌套两层的原创 2020-11-09 20:01:21 · 183248 阅读 · 69 评论 -
使用webpack-replace-loader插件进行版本控制
1、webpack-replace-loader一个 webpack 打包时用来替换字符串的 webpack-loader 。2、常规使用(下载、安装、配置)githab-中文文档3、使用场景1 . 在使用 webpack 项目打包的时候,用来将开发环境的请求 URL 替换为 生产环境的 URL 。2 . 项目统一查找调整页面配色样式 color , 将 #00ff00 替换为 #ff0700 。3 . 大型项目中,依照打包策略在相关文件中写入不同内容。以上说白了就是 用webpack-re原创 2020-10-10 09:34:30 · 1367 阅读 · 0 评论 -
按回车发送消息、Alt+Enter换行实现
if (event.altKey && event.keyCode == 13) { //Alt+Enter换行 let sendMeg = $("#msgbox").html() + "\n\n"; $("#msgbox").html(sendMeg) let el = document.getElementById('msgbox'); var range = document.createRange(); range.selectNodeContents(原创 2020-09-16 16:55:09 · 1281 阅读 · 0 评论 -
国际化vue-i18n向语言包中传入参数
模板中<span>{{$t('el.table.total', { pagetotal: 123 })}}</span>js代码中this.$t('el.table.number', { "Number": index + 1 });语言包中table: { total: '共 {pagetotal} 条', number: "第 {Number} 行",}文档写的更详细 vue-i18n格式化...原创 2020-08-25 09:58:13 · 6039 阅读 · 0 评论 -
用vue实现一个搜索框组件
一、需求描述实现一个搜索框,输入关键字,按键抬起后可以实现查询功能,下拉列表展示搜索结果,搜索结果中关键字要用特殊颜色突出显示,默认选中搜索结果的第一项。可以按上下键切换选中项,按回车输出选中项。单击组件之外的地方可以收起下拉列表。二、代码实现<template> <div class="search-wrapper" @click.stop> <div class="search-input" :class="{'is-focus':isFocus}">原创 2020-08-24 09:09:30 · 15592 阅读 · 4 评论 -
Vue项目国际化引入高版本的vue-i18n时与ElementUI组件国际化的兼容问题[已解决]
问题描述:现在有一个大型的vue(“vue”: “^2.5.16”,)项目,引入了高版本的"vue-i18n": "^8.18.2"插件来实现国际化,同时项目中也用到了十几个ElementUI中的组件,现在,ElementUI中的组件国际化不兼容高版本的vue-i18n插件。需求:整个项目都要实现国际化。实际上要做什么操作:项目用到的ElementUI组件国际化语言文件,项目中自己开发的组件也写了国际化语言文件,要做的事就是把这两个资源文件合在一起!解决方案:情况一项目中按需引入了一原创 2020-07-10 11:50:42 · 2363 阅读 · 2 评论 -
vue-i18n国际化插件实现语言切换
需求:在一个vue的单页面项目中实现中英文语言切换。1、安装vue-i18n插件npm install vue-i18n --save安装成功后在package.json文件中查看:2、代码实现在main.js中import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false//1、引入插件 (前提是要先引入 vue)import Vu原创 2020-07-01 13:58:29 · 923 阅读 · 0 评论 -
vue实现一个给直播点赞功能
实现直播观看中,观众的点赞功能。功能描述:最后一次点赞三秒后,把观众点赞的数目提交到后台服务器。话不多说,上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D..原创 2020-06-19 15:51:17 · 1169 阅读 · 0 评论 -
vue-router基本使用
一、 基本用法文中代码可以直接复制下来运行1、安装npm install vue-router --save2、创建组件Home、About<template> <div style="background-color: brown;"> <h1>Home</h1> </div></template><script>export default { name: 'Home', da原创 2020-06-13 16:41:02 · 902 阅读 · 0 评论 -
在Vue中使用QRCode.js 生成二维码
安装qrcodejs2npm install qrcodejs2 --save引入import QRCode from 'qrcodejs2'DOM<div ref="qrCodeDiv"></div>方法bindQRCode() { let qrCode = new QRCode(this.$refs.qrCodeDiv, { width: 100,//二维码宽度,单位像素 height: 100,//二维码高度,单位像素原创 2020-06-08 15:20:39 · 452 阅读 · 0 评论 -
在循环中使用slot插槽时的传值方法、组件中遍历插槽
这几天在写一个list组件,写的时候遇到一点问题。话不多说,上代码。part1:使用 List 组件循环 ListItem组件<template> <div style="border: 5px solid blue;padding: 10px 50px;"> <h2 style="color: blue;">oldfather</h2> <List :dataList="list" v-slot:fath.原创 2020-05-15 16:49:33 · 8528 阅读 · 7 评论 -
Vue修改数组、对象并且触发视图更新的方法以及原理
给 对象数组dataArr 添加 isMax 属性,修改title属性data() { return { dataArr : [{ 'width' : 267, 'height' : 300, 'margin' : 20, 'isShow': true, ...原创 2020-03-20 08:55:44 · 9814 阅读 · 1 评论 -
Vue中v-if和v-for的一起使用时的几种处理方式
在处于同一节点的时候,v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环,然后在每一个v-for 的循环中,再进行 v-if 的条件对比。所以,不推荐v-if和v-for同时使用。1、template<template v-for="(item, index) in list" :key="index"&g...原创 2020-03-19 17:08:17 · 17911 阅读 · 2 评论 -
从零开始,创建一个VUE项目,详细图文详解。
一、步骤详解1、去F盘新建一个文件夹,取名叫MyDemo,打开VScodeE进入MyDemo文件夹。(图1)2、安装脚手架,输入npm install -g vue-cli,回车。(图2)(-g代表全局安装,下次新建项目就不用安装脚手架了,此步骤就可以省略了。)3、新建一个项目。输入vue init webpack first-vue, first-vue 就是你的项目名称,回...原创 2020-03-05 16:56:06 · 2233 阅读 · 0 评论