vue
join8
热爱学习 交友
展开
-
Lerna多个npm包管理工具
1、介绍官网:Lerna · A tool for managing JavaScript projects with multiple packages.Lerna 是一个工具,可以优化使用 git 和 npm 管理多包存储库的工作流程。2、使用场景有一个业务组件仓库,里边有N个业务组件 每个业务组件是一个单独的 npm 包 作为一个包管理者 每一次仓库的更新,都意味极有可能需要发一遍包3、处理机制对于包的管理,有两种模式:固定模式(fixed):所有包是统一的版...原创 2022-01-24 11:13:49 · 337 阅读 · 0 评论 -
vue render函数解析
1、使用场景:Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。 render 函数的使用,重点:样式、事件、插槽、指令、props、v-model、函数组件的处理。2、参数说明:// @returns {VNode}createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象,或者 //原创 2021-12-28 18:24:25 · 860 阅读 · 0 评论 -
vue属性事件传递
index.vue页面<template> <div> <h1>props、属性、事件传递</h1> <app-parent test="123" :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent> </div></template><script> imp原创 2021-12-02 10:45:34 · 273 阅读 · 0 评论 -
vue实现一个日历切换功能
1、显示星期几和对应日历2、可以增减年份/月份3、可以选中当前时间效果图<template> <div class="date-pickers"> <input type="text" placeholder="选择日期" @focus="trueDateBox" :value="date" readonly /> <transition name="fad原创 2021-06-29 16:09:15 · 1025 阅读 · 0 评论 -
vue生命周期总结
1、2.0和3.0对比1.1代码示例beforeCreate: function () { console.group('beforeCreate'); console.log("el : " + this.$el); console.log("data : " + this.$data); console.log("message: " + this.message) },created: function () { console.group('.原创 2021-06-04 10:48:33 · 127 阅读 · 1 评论 -
vant 是search组件autofocus属性兼容问题
在使用autofocus属性发现安卓手机只有第一次加载的时候,键盘会弹起来。之后就没效果了,ios手机是不兼容的。解决方案:ios因为安全原因不让进来就弹键盘,那么我们可以在搜索页前一个页面加个input,点击的时候把键盘调起来,然后搜索页面input绑定一个focus事件就可以了。在搜索页mounted的时候,我们调用下onFocus方法onFocus() { document.getElementsByClassName('van-field__control')[0].focus原创 2021-05-26 10:45:54 · 2235 阅读 · 1 评论 -
element-ui table表格固定列
今天一个小伙伴问我,element里面table组件循环列表,怎么固定那些列?其实可以把tableData里面的key组成一个数组,fixed放在里面就可以了,代码如下:<template> <el-table :data="tableData" style="width: 100%" height="250"> <el-table-column v-for="(item,index) in tablerow" :原创 2021-05-21 18:38:59 · 4808 阅读 · 2 评论 -
关于构成vue组件元素的思考
在我们开发中,我经常需要对页面功能进行不同的拆分,可以分为容器组件和展示组件。容器组件包含一个或多个展示组件。一个展示组件包含了模板、脚本以及样式的代码。常见的封装:1、用户改变数据源使页面呈现不同的状态。<div> <my-component data="我是父组件传入子组件的数据"></my-component></div>2、自定义封装,开放一部分slot给父组件,可以使其定制化。<div> <原创 2021-05-09 10:10:41 · 212 阅读 · 1 评论 -
封装element里面form和table组件
在后台开发中,有很多页面都是一个form搜索查询和一个table展示,所以我们可以把这两个封装成组件进行复用。form组件<template> <!--是否行内表单--> <el-form :inline="inline" :model="form" :rules="rules" ref="form" label-width="100px"> <!--标签显示名称--> <el-form-item原创 2021-05-05 19:10:14 · 538 阅读 · 0 评论 -
vue登录权限总结
在h5和后台开发中,我们经常需要权限登录。所以需要总结日常经常需要的几种方式。1、路由方面一般由vue-router和vuex完成路由体系,h5一般通过router.beforeEach()进行拦截,后台一般通过addRoutes添加路由实现菜单控制。1.1router.beforeEach() 判断mate标识页面是否需要登录和store用户登录的标识。//路由配置meta信息const routes = [ { path: '/', name: 'Home',原创 2021-04-25 17:50:23 · 2289 阅读 · 0 评论 -
前端利用exif.js+canvas压缩上传图片
利用canvas作为媒介重新绘画一张图片达到压缩目的,由于ios存在图片翻转问题,所以需要借助exif.js对图片进行处理。注意:base64转成file 用new File()在ios部分机型存在不兼容问题,所以转成blob,再转成file文件。import EXIF from "exif-js"; // 压缩图片 export function changeFile(file,callback) { var Orientation = null; // 选原创 2020-09-22 17:38:40 · 370 阅读 · 0 评论 -
vue子组件watch监听父组件传递的值
<script>export default { props: ["list"], components: {}, watch: { list: function(newVal, oldVal) { this.newList = newVal; //newVal即是list this.filte...原创 2019-11-20 09:44:08 · 2341 阅读 · 0 评论 -
axios post数据请求遇到问题
在请求方式如下图所示,会发现请求方法变成了options,传的数据也没有找到,查询文档发现默认发送的是字符串格式,需要将其转化成URL的格式,以&进行拼接。引入qs之后,问题就解决了...原创 2018-07-24 16:50:42 · 761 阅读 · 0 评论 -
在eventBus传值时遇到的问题
今天在开发中遇到这样一个需求,A跳转到B页面,B页面里面事件触发返回A页面(需要B页面的参数),随之想到用eventBus。B页面触发的方法A页面进行监听结果在A页面发现data.cityid是可以接收到的,但A页面的数据并没发生变化……随后查资料发现在加载新组件时,在新组件挂载之前会销毁上一个组件,然后再挂载新的组件。如下图图片来自所以B页面触发在before...原创 2018-07-26 18:14:11 · 1800 阅读 · 0 评论 -
vue数据绑定数组,改变元素时不更新view问题
写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="change">变数据 </button> &转载 2018-09-04 16:42:19 · 1216 阅读 · 0 评论 -
todolist应用(子父间传值)
<div id="app"> <input type="text" v-model="inputValue"/> <button type="button" @click="handleBtnClick">提交</button> <ul> <原创 2018-09-27 16:06:54 · 174 阅读 · 0 评论 -
vue在main.js引入less文件一直报错问题
今天在main.js中使用 import './assets/style/base/global.less' 引入less文件一直报错,而引入css文件却是可以的。经查找是需要require引入依赖,才可以正确运行 ...原创 2019-02-21 15:08:39 · 3881 阅读 · 0 评论 -
vue文件里面加载iconfont.css文件
今天在vue开发是遇到引入iconfont.css文件错误: 查阅文档后发现,需要加载url-loader,npm install url-loader之后,在webpack.config.js文件loaders引入运行之后成功了。...原创 2018-07-18 18:41:09 · 1582 阅读 · 0 评论