![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 54
今天代码敲了吗
这个作者很懒,什么都没留下…
展开
-
vue中的inject和provide
在Vue中,provide 和 inject 是用来实现祖先组件向子孙组件传递数据的一种高级组件通信方式。provide 可以在祖先组件中定义数据,而 inject 可以在子孙组件中接收这些数据。这种传递方式不受组件层级限制,非常适合于跨多层级的组件通信。原创 2024-04-17 11:02:14 · 323 阅读 · 0 评论 -
Vue项目中ESLint配置(VScode)
Vue项目中ESLint配置原创 2022-06-23 13:14:05 · 13181 阅读 · 1 评论 -
vue moment 获取前一天的,前一个月,前一年的日期
vue moment获取前一天的,前一个月,前一年的日期该方法是已moment.js为基础的,使用时请先检查是否有moment.js获取前一天的日期 moment().subtract(1, 'day').format('YYYY-MM-DD')获取前一个月的日期 moment().subtract(1, 'month').format('YYYY-MM-DD')获取前一年的日期 moment().subtract(1, 'year').format('YYYY-MM-DD')如果你想原创 2022-02-22 08:04:23 · 18400 阅读 · 0 评论 -
vuejs2.x 封装组件,并发布到npm
vuejs2.x 封装组件,并发布到npm创建项目创建组件编写每个组件对应的配置文件最外层index.js文件夹配置配置文件 package.json配置文件webpack.config.js打包测试发布创建项目封装vue的插件用webpack-simple很合适,vue init webpack-simple name 此命令创建我们的项,因为webpack-simple创建的项目文件不会很复杂,操作起来更方便创建组件src下新建components文件夹用于存放所有开发的组件 -> 为每原创 2021-09-07 14:17:54 · 351 阅读 · 2 评论 -
vue 自定义树组件并能拖拽
vue 自定义树组件并能拖拽(目前只限于二级拖拽)安装拖拽组件依赖树结构样式使用拖拽组件 vuedraggable效果图安装拖拽组件依赖npm i -S vuedraggable树结构样式<template> <div> <ul class="pic-list clearfix"> <template v-if="list"> <div class="one-li"> <d原创 2021-08-03 13:27:41 · 1444 阅读 · 0 评论 -
Vue 页面跳转到指定位置
Vue 页面跳转到指定位置页面跳转页面scriptstyle进阶版:随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面<template> <div class="groups" id="groups"> <!-- 导航 --> <div class="group-list"> <div v-for="item in groupList"原创 2021-07-20 13:24:35 · 2906 阅读 · 1 评论 -
VUE 根据不同命令打出不同环境的包
VUE 根据不同命令打出不同环境的包第一步 配置全局变量第二步配置package.json来启动不同的命令第三步引用第一步 配置全局变量在项目根目录创建配置文件:.env.test在.env文件中定义变量需要以 VUE_APP_ 作为前缀,最好都是大写。根据不同的需求定义多个变量NODE_ENV = 'production'VUE_APP_API = ""VUE_APP_TYPE = ""第二步配置package.json来启动不同的命令"scripts": { "dev":原创 2021-04-21 11:11:49 · 362 阅读 · 0 评论 -
Vue 使用 fraola——vue-froala-wysiwyg
vue-froala-wysiwygfroala官网安装npm install vue-froala-wysiwyg --save在main.js全局配置import 'froala-editor/css/froala_editor.pkgd.min.css'import 'froala-editor/css/froala_style.min.css'import 'froala-editor/js/froala_editor.pkgd.min.js'import 'froala-edit原创 2021-04-20 09:13:54 · 2029 阅读 · 1 评论 -
vue 腾讯地图(多个坐标,坐标选中效果)
vue 腾讯地图(多个坐标,坐标选中效果)封装成组件 map.vue<template> <div class="locationMap"> <div id="container" ref="mapContainer"></div> <div v-show="loading" class="loading"> <van-loading color="#07c160">原创 2021-01-28 16:20:39 · 1421 阅读 · 0 评论 -
Vue 百度地图baidu-map多点显示
Vue 百度地图baidu-map多点显示安装baidu-map$ npm install vue-baidu-map --save引入main.jsimport BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY'})代码我这是把它封装成了组件,也可以直接做成一原创 2020-12-23 08:14:23 · 2117 阅读 · 2 评论 -
Vue 使用Vant制作H5开始时间至截止时间选择器
Vue 使用Vant制作H5开始时间至截止时间选择器selectDateOrName.vue<template> <div> <template v-if='dateFilter'> <van-cell is-link @click="showPopup('start')" title="开始时间" :value="formatStartDat原创 2020-12-18 13:56:45 · 1416 阅读 · 0 评论 -
Vue Vant点赞效果
Vue 点赞效果 <div class="clickLike"> //我使用了vant中的图标,大家可以使用别的图片或者其他组件的Icon来替代 <van-icon name="like-o" size="16" @click="likeClick" :color="num?'#F1050A':''" />原创 2020-12-17 13:16:43 · 1933 阅读 · 1 评论 -
Vue 使用IView自定义验证码组件
Vue 使用IView自定义验证码组件<template> <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit"> <FormItem prop="phone"> <Input v-model="form.phone" placeholder="请原创 2020-12-01 11:08:44 · 937 阅读 · 0 评论 -
Vue 使用websocket
Vue 使用websocket methods: { initWebSocket() { let url =''wss://localhost:8080'' this.websocket = new WebSocket(url) // 连接错误 this.websocket.onerror = this.setErrorMessage // 连接成功 this.websocket.onopen = this.setOnope原创 2020-11-11 16:53:21 · 589 阅读 · 0 评论 -
Vue 返回上一页页面不刷新
Vue 返回上一页页面不刷新场景:首页点进列表页时要刷新数据,信息页返回列表页时不刷新数据首先在router.js中配置 { path: '/home', name: 'home', meta: { title: '首页', }, component: () => import('./views/home/index.vue'), }, { path: '/info/:id', name: 'info', meta: {原创 2020-11-04 13:21:52 · 2171 阅读 · 0 评论 -
Vue iView table高度随浏览器窗口大小变化
Vue Iview table高度随浏览器窗口大小变化在mounted中监听<template> <div class="tables"> <Table class="table" :height="tableHeight" :columns="columns" :data="list" :loading="loading" :border="tru原创 2020-10-28 15:04:24 · 905 阅读 · 0 评论 -
Vue 自定义返回顶部按钮
Vue 实现返回顶部按钮<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <d原创 2020-10-10 10:48:08 · 2850 阅读 · 15 评论 -
Vue router路径跳转
Vue 路径跳转方法一<div @click="openPage(`/index`),{name:'2'},{type:'2'}"></div>//path,跳转的路径;query,query的参数,params,params的参数 openPage(path, query = {},params={}) { let routeUrl = this.$router.resolve({ path, query,params }); window.o原创 2020-09-21 09:55:55 · 1131 阅读 · 0 评论 -
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡)checkBoxCard.vue<template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </div> </div></template><原创 2020-08-10 10:53:57 · 2320 阅读 · 2 评论 -
vue 给数组添加新对象并赋值
vue 给数组添加新对象并赋值方法一适用于数组就只有一组listData: [{name:"张三",age:18}],//直接添加对象listData.sex="男"方法二适用于数组就有多组信息listData:[],list:[{"张三","李四"}]//比如想把另外一个数组中编列出来的值加入到这个数组中 for (let index = 0; index < this.listlist.length; index++) { this.listData原创 2020-06-11 09:38:53 · 38242 阅读 · 2 评论 -
Vue 计算属性,监听器,过滤器
Vue 计算属性,监听器,过滤器计算属性监听器过滤器计算属性和监视器的区别计算属性和过滤器的区别计算属性computed计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新。计算属性适合一个变量或者多个对象处理后返回一个结果值,也就是多个变量的某一个发生改变,我们监控的这个值也会改变。计算属性也依赖缓存,如果数据发生改变就会重新计算,如果不发生改变用之前的缓存结果。计算属性有两种方法,get和set.监听器watch方法会实时监听属性的变化,并且改变属性的值。watch也具有缓存,如果监听原创 2020-06-01 13:38:41 · 466 阅读 · 0 评论 -
Vue 自定义消息通知组件
Vue 自定义消息通知组件阅读前阅读后话不多说上代码<template> <div class="myCollect pageBg"> <div class="deleteall" @click="readall"> <span>全部已读</span> <!-- <span class="icons icon-yuedu" />--> </div>原创 2020-05-27 08:50:48 · 2207 阅读 · 1 评论 -
VUE 给自定义的组件绑定点击事件
VUE 给自定义的组件绑定点击事件在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效。先给cardinfo这个组件绑定一个点击事件 <cardinfo :content="content" :from="from" :ProPortrait="ProPortrait" />一般都是这样给点击事件,可是有时候这个事件是没用的,因为这个事件是引用组件页面的事原创 2020-05-26 10:30:20 · 11416 阅读 · 0 评论 -
Vue 在标签中,按照条件添加样式
Vue 在标签中,按照条件添加样式使用``在里面进行判断,默认都拥有fonts的样式,如果read为true则显示isread的样式,如果为false则不显示 <div :class="`fonts ${read && 'isread'}`">123</div>原创 2020-05-21 14:08:20 · 4498 阅读 · 0 评论 -
Vue 按照创建时间和当前时间显示(刚刚,几小时前,几天前。。。)
Vue 按照创建时间和当前时间显示(刚刚,几小时前,几天前)在methods中创建方法showtime,传入要跟当前时间要对比的时间 showtime(time) { let date = typeof time === "number" ? new Date(time) : new Date((time || "").replace(/-/g, "/")); let diff = (new Date().getTim原创 2020-05-20 10:07:38 · 4967 阅读 · 1 评论 -
VUE 自定义组件,调用组件
VUE 自定义组件,调用组件在做项目的过程中我们会遇到很多重复性的功能或者页面布局,我们可以把这些可以进行多次使用的代码进行封装,变成组件。这是一个头部卡片组件在制作页面时经常会用到类似这种的卡片头部样式,可能参数不同,但是排布,样式是一样的<template> <div class="title"> <div class="heda"> <img v-if="userPortrait" class="原创 2020-05-18 10:16:12 · 1668 阅读 · 0 评论 -
Vue v-for遍历数组方式
Vue v-for遍历数组方式方法一适用于数组中只有值而没有对象的遍历<div class="view-member"> <span v-for="(name, index) in info" :key="index"> {{ name}} </span></div>info:["张三","李四"]方法二适用于数组中有多个对象的遍历<div v-for="item in listData" :key="item.原创 2020-05-09 14:04:14 · 3272 阅读 · 0 评论 -
vscode快建创建vue模板
vscode快建创建vue模板第一步:进入vscode界面,使用快捷键Ctrl+shift+p,输入sni,找到首选项:配置用户代码片段第二步:点击首选项:配置用户代码片段,并输入html.json,并点击进入(可以选择新建全局或者文件夹下的片段,文件命名无所谓)第三步:将如下代码覆盖进html.json文件中在这里插入代码片{ "vh": { "prefix"...原创 2020-04-24 14:52:46 · 1476 阅读 · 0 评论 -
最新版,使用VSCode创建第一个VUE项目
使用VSCode创建第一个VUE项目一、基本概念1.VSCode2.Vue二、软件安装1.安装Node.js2.安装VSCode三、创建Vue项目1.打开终端扩展如果输入http://localhost:8080报错,可能是你的端口号8080被占用了,你可以打开你创建的文件夹里的index.js修改端口号一、基本概念1.VSCodeVisual Studio Code (简称 VS Code...原创 2020-04-08 11:30:36 · 4048 阅读 · 0 评论