分类：Vue

2021
01-03

vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops组件实例中的prop*/exportfunctioncreate(Component,props){constcomp=new(Vue.extend(Component))({propsData:props}).$mount()document.body.appendChild(comp.$el)comp.remove=()=>{document.body.removeChild(comp.$el)comp.$destroy()}returncomp}方式二importVuefrom'v... 继续阅读 >
2021
01-03

Vue 修改网站图标的方法

1、在stateic下新增favicon.ico文件2、修改index.html文件，如图<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"type="image/x-icon"href="static/favicon.ico"rel="externalnofollow"><title>网站名称</title></head><body><divid="app"></div><!--builtfileswillbeautoinjected--></body></html>3、如... 继续阅读 >
2021
01-03

Vue中inheritAttrs的使用实例详解

Vue中inheritAttrs的使用实例详解 今天举一个例子解释一下inheritAttrs的使用先看代码<body><divid="app"class="vueclass"><my-comtitle="标题"wx-attr1="未定义属性1"wx-attr2="未定义属性2"></my-com></div><scripttype="text/javascript">Vue.component("my-com",{props:{title:String,},inheritAttrs:false,template:`<divwx-attr1="hello"><h1>{{title}}</h1></div>`,})constApp=newV... 继续阅读 >
2021
01-03

element 动态合并表格的步骤

前言element官方的例子太简单了，不满足实际的需求数据肯定是动态的，合并的行数，列数都是动态的，该如何知道每一行的合并数呢需求动态合并表格，数据来源于数据库正文一开始，我的数据源是单独的数组，表格数据合并了几个数据，我根据各个数组的长度，来决定每一行的合并数结果：有些数据是正常的，但有些又合并出错了。计算的方式不对尝试二 dataPretreatment()用这个方法计算出每一行的行数da... 继续阅读 >
2021
01-03

vue导入.md文件的步骤（markdown转HTML）

前言刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈。网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行，想分享给后面的人我的博客上也写了100多篇文章，点击量有上万的也有个位数的，能够帮助到他人这就是写作记录的动力。需求vue项目中可以良好展示markdown（只是展示功能没有编辑功能）痛点问题.md文件类型，直接模块加载（只有字符串... 继续阅读 >
2020
12-30

SpringBoot+Vue 前后端合并部署的配置方法

SpringBoot+Vue 前后端合并部署的配置方法 前后端分离开发项目前端vue项目服务端springboot项目如何将vue的静态资源整合到springboot项目里，通过启动jar包的方式部署服务。前端项目执行npmrunbuild命令进行打包，会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下，如下图此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图：对应的springboot:application.yml需添加：server:port:8080tomcat:uri-encoding:UT... 继续阅读 >
2020
12-30

vue中实现点击空白区域关闭弹窗的两种方法

1.第一种做法首页在外层容器里面取一个名字为main，即ref="main",当bankSwitch为true的时候，弹窗出现<divclass="selectedBorder"ref="main"><divclass="bankItem"v-if="bankSwitch==true">你好我是弹窗里面的内容部分</div></div>所触发的事件如下：首页，先在全局创建一个点击事件:bodyCloseMenus事件作用：当点击main容器的时候（this.refs.main&&!this.refs.main.contains(e.target)），并且弹窗出现的时候（sel... 继续阅读 >
2020
12-30

梳理一下vue中的生命周期

什么是生命周期？生命周期，以个人之浅见，即一个事物从诞生到消亡的一个过程！以人的一生来做类比，其实就可以简单粗暴的将生命周期看作人的一生，人这一出生就开始了一段美好（艰难）的旅程，一生中每个成长的阶段都会对应的去做每个阶段该做的事，比如，上幼儿园，小学，中学，高中，大学，工作（比如我就在辛苦的码字），结婚等等直到百年以后，尘归尘，土归土，这就是人的生命周期！vue也有这样的一个生命周期，也会在执行到... 继续阅读 >
2020
12-30

Vue实现简易购物车页面

Vue实现简易购物车页面 VUE实现简易购物车效果，供大家参考，具体内容如下简易的购物车小demo引用了一下bootstrap3，的表格<sectionid="gouwuche"><tableclass="tabletable-hover"><thead><tr><th><inputtype="checkbox"@change="handlechange"v-model="isAllChange"@click='inshow()'/>全选</th><th>商品信息</th><th>单价</th><th>数量</th><th>金额</th><th>操作</th></tr></thead><tbody><trstyle="height:50px... 继续阅读 >
2020
12-30

利用Vue实现简易播放器的完整代码

看b站某马学习，实现一个属于自己的播放器HTML+CSS+JS<sectionid="xwyy"><!--主体区域--><sectionclass="box"style="margin-top:30px;"><divclass="nav"><divclass="nava"><h1>小王音乐</h1></div><!--搜索框--><divclass="navb"><inputtype="text"autocomplete="off"v-model.lazy="query"@keyup.enter="searchMusic"placeholder="搜索想听的歌"/></div></div><divclass="boxa">... 继续阅读 >
2020
12-29

vue+element UI实现树形表格

vue+element UI实现树形表格 本文实例为大家分享了vue+elementUI实现树形表格的具体代码，供大家参考，具体内容如下一、在component文件夹下新建如下treeTable文件夹，里面有2个文件：eval.js:将数据转换成树形数据/***@Author:jianglei*@Date:2017-10-1212:06:49*/'usestrict'importVuefrom'vue'exportdefaultfunctiontreeToArray(data,expandAll,parent=null,level=null){lettmp=[]Array.from(data).forEach(function(record){... 继续阅读 >
2020
12-29

vue实现树状表格效果

vue实现树状表格效果 本文实例为大家分享了vue实现树状表格的具体代码，供大家参考，具体内容如下1.初始化配置安装模块：npmivue-table-with-tree-grid-Smain.js文件importZkTablefrom'vue-table-with-tree-grid'Vue.component(ZkTable.name,ZkTable);2.使用<templatelang="html"><divid="example"><zk-tableref="table"index-text="#":data="data":columns="columns":stripe="props.stripe":border="props.border":show-h... 继续阅读 >
2020
12-29

Vue实现随机验证码功能

本文实例为大家分享了Vue实现随机验证码功能的具体代码，供大家参考，具体内容如下步骤1：创建一个名为identify.vue的子组件<template><divclass="s-canvas"><canvasid="s-canvas":width="contentWidth":height="contentHeight"></canvas></div></template><script>exportdefault{name:'SIdentify',props:{//默认注册码identifyCode:{type:String,default:"1234"},//字体最小值fontSizeMin:{type:Numbe... 继续阅读 >
2020
12-29

vue实现简易的双向数据绑定

主要是通过数据劫持和发布订阅一起实现的双向数据绑定数据更新时,可以更新视图视图的数据更新是,可以反向更新模型组成说明Observe监听器劫持数据,感知数据变化,发出通知给订阅者,在get中将订阅者添加到订阅器中Dep消息订阅器存储订阅者,通知订阅者调用更新函数订阅者Wather取出模型值,更新视图解析器Compile解析指令,更新模板数据,初始化视图,实例化一个订阅者, 将更新函数绑定到订阅者上,可以在接... 继续阅读 >
2020
12-29

vue中配置scss全局变量的步骤

在写项目的过程中，如果用的是scss来编写样式代码，常常需要定义各种变量，例如主题色、主字号之类的，因此我们会把这些变量写到一个单独的_variable.scss文件内，但是每次都要在vue单文件内引入这些变量未免太繁琐了，所以有没有办法可以默认把变量文件作为全局文件进行引入呢？答案是肯定的，可以用下面的方法进行配置，可以根据当前使用的框架和环境来进行方法的选择。一、使用vue-cli（即vue-cli2）脚手架时1.首... 继续阅读 >