Vue
文章平均质量分 84
hailanBlue
这个作者很懒,什么都没留下…
展开
-
父子组件通信,父组件访问子组件详解
父子组件间通信通过props向子组件传递数据通过事件向父组件发送消息props基本用法:在组件中,使用选项props来声明需要从父级接收到的数据props的值有两种方式:字符串数组,数组中的字符串就是传递时的名称 对象,对象可以设置传递时的类型,也可以设置默认值等用一种方式接受数据:建两个页面,app.vue作为父页面,child.vue作为子页面,v-on绑定的属性名称childmovies与data中定义的movies名称可以不一样,也可以定义成一样的,属性chi原创 2020-11-05 17:45:14 · 538 阅读 · 0 评论 -
使用element-ui使用表格展示微信头像
要求:使用element-ui使用表格展示微信头像借鉴的原博:https://blog.csdn.net/qq_41588568/article/details/100196905效果图: <el-table-column label="微信头像" align="center" prop="avaterUrl"> <template slot-scope="scope"> <img :src="scope.row.avat原创 2020-09-09 15:47:01 · 1371 阅读 · 0 评论 -
uni-app实现手机号绑定
要求: 实现手机号绑定图形验证码和发送验证码。用了u-view的控件。<view class="app_container"> <u-form :model="form" ref="uForm" :rules="rules"> <view class="login-list flex border-all"> <view class="login-input"> <u-form-item label="手机号" la原创 2020-09-09 10:02:59 · 1889 阅读 · 0 评论 -
element-ui上传图片的详解
需求:element-ui实现上传头像。效果图:先查看element-ui上传图片的示例:https://element.eleme.cn/#/zh-CN/component/upload<el-form :model="form" :rules="rules" ref="form" label-width="100px"> <div class="deviceinfo-box"> <div class="devicein原创 2020-08-26 10:47:32 · 17532 阅读 · 5 评论 -
element-ui表格选中行高亮的效果
子页面操作对父页面有影响时,操作完子页面,父页面定位到选中行的状态效果图:使用到了官方的方法:在子页面点击“保存”或者“确定”按钮之后刷新父页面,传递参数:this.$parent.getList(true);在父页面方法中添加函数:stCurrentRow(row) { this.$nextTick(function() { this.$refs.monthlyPlanTable.setCurrentRow(row); }) },.原创 2020-08-24 17:30:14 · 2023 阅读 · 0 评论 -
elementui点击确认之后添加确认框
要求:新增数据点击确认之后需要做一个确认框,点击确认以后才能提交数据。用到了element-ui的控件:地址https://element.eleme.cn/#/zh-CN/component/message-box效果图:// 确定按钮操作 submitForm() { this.$refs['form'].validate(valid => { if (this.wrnId) { this.form.wrnId = this.wrnId;.原创 2020-08-20 17:52:38 · 1991 阅读 · 0 评论 -
element-ui表格的基本操作详解记录1
<template> <div class="train-box"> <div class="left-box"> <div class="left-box-btn"> <el-date-picker type="date" clearable v-model="startTime" value-format="yyyy-MM-dd" style="width: 250px" class="left-box-btn-data" .原创 2020-08-19 17:26:24 · 551 阅读 · 0 评论 -
折线统计图实现渐变色
使用了echats插件官网:https://echarts.apache.org/zh/index.html渐变色官网实例:https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch其他官网实例:https://echarts.apache.org/examples/zh/index.html我做的实现效果图:引入echats和上手绘制,请先移步这里,(我也是刚学)https://echarts.a.原创 2020-08-10 11:35:29 · 344 阅读 · 0 评论 -
自定义滚动条
效果图:时间这一列进行上下滚动循环。<div id="map-container"></div>是用来加载地图的。此图片悬浮在地图右上角。 <div id="map-container"> <div class="wrn">告警列表</div> <div id="list" class="marquee_list" :class="{marquee_top:animate}"> .原创 2020-08-10 11:06:48 · 148 阅读 · 0 评论 -
上传图片
要求,点击【新增】按钮,出现弹框,点击【上传图片】实现上传,使用了element-ui为【新增】按钮添加响应函数@click="handleAdd" <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</e.原创 2020-08-07 18:08:15 · 178 阅读 · 0 评论 -
高德地图自定义marker样式
要求:在高德地图上,自定义点标记marker,判断设备是否在线,如果在线在点标记上显示某种数值,效果图如下:地图加载就不做介绍了,下方高德地图的api:https://lbs.amap.com/api/jsapi-v2/summary仿照高德地图的纯文本标记做:https://lbs.amap.com/api/javascript-api/example/marker/text这一段是自定义的方法:var markerContent = '' + `<...原创 2020-08-05 11:17:34 · 4479 阅读 · 1 评论 -
vue和高德地图结合引入图片问题
要求:marker要自定义的背景图片,高德提供了api,下面是链接:https://lbs.amap.com/api/javascript-api/example/marker/custom-icon定义一个底层容器,一定要记得给这个div长和宽,要不然无法显示<div id="map-container" />style:<style lang="scss" scoped> #map-container { width: 100%; h.原创 2020-08-05 10:43:51 · 783 阅读 · 0 评论 -
vue基于uni-app的传参
点击按钮跳转页面时无形参的传参过程总结:<template> <view class="uni-padding-wrap uni-common-mt content"> <view class="uni-flex uni-column"> <view class="video_btn"> <u-button type="warning" size="medium" class="btn_purchase" @click原创 2020-07-23 20:01:18 · 1395 阅读 · 0 评论 -
vue错误
<template> <div class="detail-swiper"> <swiper class="swiper"> <swiper-item v-for="item in topImages"> <img :src="item" alt=""> <!-- src一定要加 :--> </swiper-item> </swiper> </div&g...原创 2020-06-23 09:59:17 · 132 阅读 · 0 评论 -
bilibili学习之axios
vuex以后再更新吧,今天有点困。装载axios,npm install axios --save在main.js导入引用import axios from 'axios'在main.js中使用axios({ url:'http://123.207.32.32:8000/home/multidata', method:'get'}).then(res =>{ console.log(res)})url:'http://123.207.32.32:8000/h原创 2020-06-11 17:28:37 · 270 阅读 · 0 评论 -
bilibili学习之vuex 中的mutations
Vuex的官网链接https://vuex.vuejs.org/zh/vuex也是插件,需要安装npm install vuex --save创建store目录,下面建一个index.js。安装插件 创建对象 导出state、mutations、actions 、getters 、modules都是方法然后在main.js中导入:在APP.vue中写:<template> <div id="app"> <h2>{{ ..原创 2020-06-10 10:27:41 · 134 阅读 · 0 评论 -
bilibili学习之样式
改变图标与顶部的距离:margin-top: 10px;改变文字与图标之间的距离:vertical-align:middle ;原创 2020-06-08 11:20:36 · 182 阅读 · 0 评论 -
bilibili学习之keep-alive
<!--router-view也是一个组件,如果被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存 --> <!-- keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 -->keep-alive有两个重要的属性:include-字符串或正则表达式,只有匹配的组件会被缓存 exclude-字符串或正则表达式,任何匹配的组件都不会被缓存在app.vue中在home.vue中 //act...原创 2020-06-05 13:29:41 · 186 阅读 · 0 评论 -
bilibili学习之改变跳转的title实现方式
利用生命周期函数created()在每个VUE文件中添加以下代码created(){ console.log('created'); document.title = '用户' },可实现跳转之后的title的改变,效果图:方式2:在每个路由的配置中,添加meta(源数据),添加title,{ path:'/about', component:About, meta:{ title:'关于' } },然后调用:router..原创 2020-06-04 16:31:55 · 424 阅读 · 0 评论 -
bilibili学习之参数传递的两种方式
在App.vue中的template填写以下代码,<router-link v-bind:to="{path:'/profile',query:{name:'why',age:18,height:1.88}}">档案</router-link>在profile.vue中通过$route.query调用<h2>{{ $route.query.name }}</h2><h2>{{ $route.query.age }}</h2.原创 2020-06-04 14:50:52 · 336 阅读 · 0 评论 -
bilibili学习之嵌套路由
接前面实现嵌套路由的两个步骤:创建对应的子组件,并且在路由映射中配置对应的子路由在组件内部使用<router-view>标签创建两个vue,里面填写一些内容:在index.js中。配置相关消息,第一步:利用懒加载的方式配置路由相关信息第二步:创建VueRouter对象,传入路由映射配置由于需要在home中展现新闻和消息两个模块,所以路由的映射配置应该写在home的下面,然后在Home.vue中效果图...原创 2020-06-04 13:36:55 · 133 阅读 · 0 评论 -
bilibili学习之路由懒加载
原创 2020-06-04 10:11:01 · 194 阅读 · 0 评论 -
bilibili学习之vue-router动态路由的使用
先创建一个 user.vue在index.js中配置路由需要注意:userId将会在user.vue中用到path:'/user/:userId',在App.vue中然后在user.vue中使用return this.$route.params.userId效果图:原创 2020-06-03 15:08:03 · 221 阅读 · 0 评论 -
bilibili学习之小知识点
配置好路由之后,在地址栏会出现一个#,利用mode将#去掉在index.js中写:mode:'history',将默认的哈希模式改成HTML5的history形式<router-link>的补充:router-link是vue-router中已经内置的组件,最终会被渲染成a标签 router-link中的to属性,用于指定跳转的路径 router-link中的tag属性,可以指定router-link之后渲染成什么组件,<router-link t...原创 2020-06-03 14:53:26 · 242 阅读 · 0 评论 -
bilibili学习之简单router使用
创建一个components目录,下面创建两个.vue,里面内容然后在index.js里面传入路由映射配置关系:component:后面的名字是import的名字,注意。在app.vue,使用路由最后效果:在路径一栏,配置完router应该出现#才对。...原创 2020-06-03 10:28:21 · 136 阅读 · 0 评论 -
bilibili学习之安装router过程且使用
路由的官网链接:https://router.vuejs.org/zh/installation.html我听课处理的过程是:在控制终端输入:npm install vue-router --save完成后,在package.json里查看,如下图:然后创建一个router的文件夹,下面放一个index.js,如图所示:在index.js里面写:第一步:第二步:第三步:在main.js中写入:基本配置完成...原创 2020-06-03 10:00:38 · 113 阅读 · 0 评论 -
bilibili学习之路由-vue-router的基本使用
https://router.vuejs.org/zh/installation.html下载vue-router的地址,下载之后放在项目下面的新建文件夹path里面,<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">&l..原创 2020-06-02 15:26:32 · 221 阅读 · 0 评论 -
bilibili学习组件-创建组件的方式1
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style></style> </head> <body.原创 2020-06-01 17:50:47 · 317 阅读 · 0 评论 -
bilibili动画-使用过度类名实现动画
官网链接:https://cn.vuejs.org/v2/guide/transitions.html在进入/离开的过渡中,会有 6 个 class 切换。 v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to:2.1.8 版原创 2020-06-01 17:23:23 · 393 阅读 · 0 评论 -
bilibili学习之Vue
使用v-cloak能够解决插值表达式闪烁的问题 默认v-text是没有闪烁问题的,v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 v-bind是Vue中提供的用于绑定属性的指令 Vue中提供了v-on事件绑定机制 v-on :mouseover=show 鼠标覆盖事件 注意在VM实例中,如果想要获取data上的数据,或者调用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,this就表示我们new出来的vm实例原创 2020-06-01 10:53:08 · 271 阅读 · 0 评论