Vue
关注
分享
扫一扫
Vue
Misnice
这个作者很懒，什么都没留下…
展开
-
Could not resolve dependency:peer swiper@“^5.2.0“ from vue-awesome-swiper@4.1.1
在安装vue-awesome-swiper时报错：Could not resolve dependency:peer swiper@"^5.2.0" from vue-awesome-swiper@4.1.1node_modules/vue-awesome-swipervue-awesome-swiper@"^4.1.1" from the root projectFix the upstream dependency conflict, or retry原因：swiper的版本太高导致的原创 2022-01-27 17:13:38 · 4278 阅读 · 0 评论 -
Vue在created异步请求数据,在mounted中获取不到
在created中异步请求数据，在mounted中获取不到数据。利用watch监听数据，然后再获取数据。原创 2023-09-13 10:32:12 · 827 阅读 · 0 评论 -
Argument of type ‘HTMLElement | null‘ is not assignable to parameter of type ‘HTMLElement‘. Type ‘
typescript 类型声明原创 2022-09-19 10:20:52 · 1557 阅读 · 0 评论 -
vue报错[vue-router] Duplicate named routes definition
vue报错原创 2022-06-21 18:13:39 · 612 阅读 · 0 评论 -
vue中template标签使用
vue中template标签使用原创 2022-06-09 14:31:20 · 3102 阅读 · 0 评论 -
vue组件中props类型及默认值
简单写法props: { fieldString: String, fieldNumber: Number, fieldBoolean: Boolean, fieldArray: Array, fieldObject: Object, fieldFunction: Function}带有默认值写法 props: { fieldString: { type: String, default: '' }, fieldNumber原创 2021-12-26 16:57:29 · 23241 阅读 · 0 评论 -
Avoid adding reactive properties to a Vue instance or its root $data at runtime
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root dataatruntime−declareitupfrontinthedataoption.报错原因：this.data at runtime - declare it upfront in the dat原创 2021-11-17 10:49:04 · 15939 阅读 · 2 评论 -
处理“start value has mixed support, consider using flex-start instead”编译警告
这个报警是因为之前的CSS弹性盒子模型写法是这样的：div{display: flex;justify-content: start;}但是这种是很早的属性值了，新的属性值应该是flex-start，如下：div{display: flex;justify-content: flex-start;}解决方法：把项目中的 start 改成 flex-start 就可以了...原创 2021-10-20 18:43:13 · 1728 阅读 · 0 评论 -
vue-clipboard2使用介绍
先下载vue-clipboard2npm install --save vue-clipboard2然后引入vue-clipboard2mport Vue from 'vue'import VueClipboard from 'vue-clipboard2'VueClipboard.config.autoSetContainer = true // autoSetContainer需要设置为trueVue.use(VueClipboard)第一种方法：使用指令的方式进行绑定<te原创 2021-08-24 17:33:12 · 697 阅读 · 0 评论 -
elementui中表格的表头设置背景颜色
表格的header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。<el-table :data='list' style="width:100%;" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">...原创 2021-03-03 11:34:43 · 6912 阅读 · 0 评论 -
elementui中input输入框添加回车事件
<el-input v-model="name" placeholder="请输入活动名称" @keyup.enter.native="handleActivityChange" />handleActivityChange是点击回车执行的函数原创 2021-02-25 19:58:16 · 1000 阅读 · 0 评论 -
element el-dialog显示与隐藏后标签里的内容不更新
把el-dialog中的内容用 v-if 重新渲染就可以了<el-dialog :visible.sync="showPrizeDetailVisible" append-to-body title="奖品" width="80%"> <div v-if="showPrizeDetailVisible"> 内容 </div> <div slot="footer" class="dialog-footer">原创 2021-01-18 20:37:50 · 852 阅读 · 1 评论 -
elementui dialog 嵌套遮罩显示异常问题
如果在第一个dialog中又嵌套了一个dialog在第二个dialog标签中添加append-to-body即可解决遮罩显示异常问题原创 2021-01-10 20:25:03 · 360 阅读 · 0 评论 -
vue中使用lodash
一、安装npm install lodash -S二、引入// main.jsimport lodash from 'lodash'Vue.prototype.$lodash = lodash三、使用<script> export default { name: '', mounted(){ this.formData = this.$lodash.cloneDeep(this.list) },原创 2020-09-23 19:08:01 · 1855 阅读 · 0 评论 -
[Vue warn]: Unknown custom element：报错原因及解决方案
vue中报错:vue.common.dev.js:630 [Vue warn]: Unknown custom element: <video-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.原因是标签的组件没有引入，在components中引入一下就可以import VideoPag.原创 2020-09-19 11:50:24 · 39050 阅读 · 1 评论 -
vue中打印多一页空白页
解决方法：打印元素的margin-top为零就就好了原创 2020-09-18 19:16:20 · 3117 阅读 · 0 评论 -
vue中使用vue-print-nb实现打印功能
1.安装vue-print-nb插件npm install vue-print-nb --save2.在main.js中引入import Print from 'vue-print-nb'Vue.use(Print);3.页面中使用<div id="print"> 要打印的标签 <p>文字文字</p></div> <button v-print="'#print'">打印</button&g原创 2020-09-18 17:50:44 · 4642 阅读 · 2 评论 -
vue访问子组件实例或子元素
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过ref这个 attribute 为子组件赋予一个 ID 引用。使用时直接 this.this.$refs.idName 就可以获取到子组件实例举个栗子：父组件中<template> <div id="app"> <div @click="hander">按钮</div> <Child ref="..原创 2020-09-17 15:39:43 · 1102 阅读 · 0 评论 -
vue修改滚动条样式
代码：<style> /deep/::-webkit-scrollbar { width: 8px; height: 8px; background-color: #062d56; } /deep/::-webkit-scrollbar-thumb { background-color: #2a79c0; border-radius: 3px; }</style>实现效果：注意：此代码之适用于谷歌浏览器...原创 2020-09-11 17:50:53 · 358 阅读 · 0 评论 -
vue子组件调用父组件中方法的三种方法
1.在子组件中用this.$parent.fn()来调用父组件的方法父组件中<script> export default { methods: { parentFn() { console.log('父组件的方法'); } } };</script>子组件中<template> <div> <div @click="handleClick()">点击</原创 2020-09-02 11:24:35 · 3454 阅读 · 0 评论 -
vue嵌套路由，二级路由使用介绍
vue-router 嵌套路由，二级子路由项目中如果都是一级路由，路由管理会有些乱。嵌套路由是路由中包含路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。1.嵌套路由的使用场景当项目中有选项卡时，切换选项卡按钮，页面中间部分的内容会变，但是选项卡按钮不会变；页面中间部分内容的变化就可以通过二级子路由实现，中间部分显示的内容就是二级子路由的内容原创 2020-08-14 23:35:23 · 5984 阅读 · 2 评论 -
Duplicate keys detected: ‘0‘. This may cause an update error
报错误原因一个template中有两个一样的v-for<div class="node1" v-for="(item, index) in list" :key="index"> <div>{{item.name}}</div></div><div class="node2" v-for="(item, index) in list" :key="'index"> <div>{{item.name}}<原创 2020-08-13 19:59:57 · 405 阅读 · 0 评论 -
vue路由守卫
在路由配置文件中，给需要守卫的path后面加上meta在路由配置文件中，给需要守卫的path后面加上meta在main.js里面加上//路由守卫router.beforeEach((to, from, next) => { console.log(to,from,next); if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if(localStorage.token){ //判断本地是否存在token next();原创 2020-08-13 16:54:58 · 244 阅读 · 0 评论 -
vue-cli3.0搭建项目流程
第一步：安装脚手架1. 全局安装脚手架 npm install -g @vue/cli2. vue -V:查看版本号。第二步：在终端输入命令创建项目1. 输入 vue create objectName 项目的名字需要小写。2.default (babel, eslint) 默认安装> Manually select features 手动选择安装*****3.? Please pick a preset: Manually select fea...原创 2020-08-11 09:43:24 · 354 阅读 · 0 评论 -
vue插槽作用域
<body><div id = "myApp"> <!-- 组件调用时 one是插槽名--> <child> <div slot="one" slot-scope="item"> {{item.user}} <p v-for="num in item.data">{{num}}</p> {{item}} &原创 2020-08-10 17:49:23 · 282 阅读 · 0 评论 -
vue中v-slot详解，具名插槽和作用域插槽
1、具名插槽具名插槽通常用作在指定的位置输出我们的子元素//组件调用时<Child> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>子组件测试文字</div> </template></Child>//书写组件时<template> <div>原创 2020-08-10 17:39:49 · 1890 阅读 · 0 评论 -
vue中用videojs实现直播功能
直接上代码<template> <div class="strategic-cooperation"> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-progress-holder" ref="viodeRef" poster="" style="w原创 2020-08-06 17:28:11 · 3516 阅读 · 0 评论 -
vue实现下载功能，处理后端返回的二进制文件流
const content = res.data; //后端返回的数据 let url = window.URL.createObjectURL(content) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('id', 'dow...原创 2020-08-06 10:13:53 · 1632 阅读 · 0 评论 -
vue组件传值
一、父组件向子组件传值，通过props传值父组件中在子组件的标签中写上要传的值<template> <div id="app"> <!-- 使用v-bind命令将父组件中的数据绑定到子组件上 --> <Child v-bind:val1="value1" v-bind:val2="value2"></Child> </div></template><script> import原创 2020-08-05 10:55:11 · 224 阅读 · 0 评论 -
vue选择性刷新组件或如何实现优雅的刷新页面
在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。列举个场景，比如修改主体content内容，我想要刷新主体部分的组件，但是不刷新title和aside组件，怎么实现呢？实现方法就是在想要刷新的组件中封装一个方法，当需要刷新页面时直接调用这个方法就可以无痕迹刷新这个组件（页面）！代码：1、在app.vue中封装方法，此时调用可以刷新整个系统原创 2020-07-27 10:22:13 · 662 阅读 · 0 评论 -
vue中 created mounted 动态获取数据渲染后，获取DOM问题
写代码的时候，遇到一个问题，就是在created里面调用接口获取数据，利用v-for渲染DOM后，再在mounted里面调用渲染后的DOM时，一直无法获取到，显示为undefined。按照VUE的生命周期来说created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。mounted模板编译/挂载之后。按道理，在mounted里面是可以获取到created阶段渲染的DOM的。后来通过console.log()来进行判断，发现在mounted里面的代码开始执行时，created阶原创 2020-07-27 10:15:36 · 7191 阅读 · 6 评论 -
vue报错TypeError: Cannot read property ‘Name‘ of undefined的解决方案
一、问题描述使用{{}}双花括号在html页面进行数据绑定时，从一个对象中获取，超过两个.就报错，如下代码报错提示为“TypeError: Cannot read property ‘Name’ of undefined”。var editsmall_v = new Vue({ el: '#editsmall', data: { editSmall : {} }, methods: { }});<div class="form-se原创 2020-07-21 19:00:16 · 24589 阅读 · 3 评论 -
videojs进度条始终为零
1，问题描述视频通过js初始化，视频正常播放时候进度始终不动，同时，控制台报错"No compatible source was found for this media"2，解决方法直接删除模板部分的<source></source>标签原创 2020-07-14 10:56:42 · 1516 阅读 · 0 评论 -
vue无法获取dom元素高度的解决方案
如何dom元素没有设置高度或高度是自适应的，是无法直接获取的高度的，解决方法如下，在获取高度时加个延迟器：outoHeightFn(){ setTimeout(() => { let dom = this.$refs.remark; const height = dom.offsetHeight; if(height < 300){ dom.style.height = '300px'; }原创 2020-06-30 16:14:33 · 4041 阅读 · 4 评论 -
Vue中引入Video.js视频播放器播放m3d8后缀视频
大家都知道video只支持ogg、webm、MP4格式，那么要是m3u8格式的视频可以通过video.js播放；1.安装依赖包npm install --save video.js2.main.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Vide...原创 2020-04-25 16:20:56 · 2009 阅读 · 0 评论 -
vue中阻止click事件冒泡,防止触发另一个事件的方法
使用vue阻止子级元素的click事件冒泡，不用触发父级元素的点击事件，用stop 1 2 3 4 <div @click="test1()"> <div@click.stop="test2()">按钮</div> </div> 这样点击按钮，就不会触发父级...原创 2020-04-24 11:26:37 · 2126 阅读 · 0 评论 -
vue-cli3.0项目配置服务器代理解决跨域
vue.config.js文件中module.exports={ devServer:{ port:8090, host:"127.0.0.1", open:true, proxy : { "/api" : { target : "http://47.111.136.117", changeOrigin : tru...原创 2020-04-22 15:28:38 · 594 阅读 · 0 评论 -
vue组件模板
<template> <div class="classes"> </div></template><script> export default { name: "classes", data () { return ...原创 2020-04-14 15:40:15 · 253 阅读 · 0 评论 -
在vue-cli3.0项目使用服务器代理proxy解决跨域
在vue-cli3.0项目使用proxy跨域 vue项目使用proxy跨域https://blog.youkuaiyun.com/qq_33270001/article/details/85328804原创 2020-04-13 17:23:51 · 961 阅读 · 1 评论 -
Vue Antd
vue-alain 是基于 vue 和 Ant Design of Vue（Ant Design 的 vue 版本） 基础组件库的中后台前端，使用vue vue cli 3.0 typescript antd antd pro Ant Design Vue技术栈，参考并使用了ng-alain相关内容，秉承 Ant Design 的设计价值观。...原创 2020-02-25 13:20:23 · 845 阅读 · 0 评论