vue
关注
分享
扫一扫
明阳mark
这个作者很懒，什么都没留下…
展开
-
vue-nuxt里面asyncData使用
@Component({ components: { Detail }, async asyncData({ route, $axios }) { let checkListId = parseInt(route.params.id); let criteria: CheckListCustomerCriteria = { page: 1, pageSize: 10 } let page = await fetchCustomerItemBy原创 2020-11-16 10:53:19 · 2160 阅读 · 0 评论 -
vue-typescrip环境修改dom节点样式
手风琴效果点击后收缩htmljs原创 2020-09-03 13:02:43 · 197 阅读 · 0 评论 -
vue框架根据antd封装的走马灯组件
文章目录CheckPhotos.vuePhotosBoard.vue引用CheckPhotos.vue<template> <div class="check-photos-box"> <div v-if="allPhotoSrcs.length==0"> 暂无附件 </div> <div class="singlePhotoGroup" v-else-if="allPh原创 2020-08-28 09:33:44 · 1479 阅读 · 1 评论 -
vue照片动态src显示不出来原因
在src前面要require包起来原创 2020-08-27 13:43:57 · 777 阅读 · 0 评论 -
vue禁止粘贴
最近项目遇到了一个关于控制用户粘贴的功能，简单研究了下，提出以下方案：使用Jquery获取的DOM对象绑定paste方法具体如下：1.安装jquerynpm i jquery -S修改项目中build/webpack.base.config.js// 顶部引入webpackconst webpack = require('webpack'); ... module.exports = { ... // 添加plugin配置 plugins: [原创 2020-08-17 09:52:00 · 973 阅读 · 0 评论 -
reduce累加
getSumKm(actualKeyPoints: PatrolPlanOwnerDetail[]) { return actualKeyPoints.reduce( (acc: number, currentPoint: PatrolPlanOwnerDetail) => { return acc + currentPoint.completePathLength; }, ...原创 2020-05-19 10:37:15 · 375 阅读 · 0 评论 -
vue之css判断
基本样式:class="{active:nowIndex===0}"复合样式:class="[{warn:record.currentMonthActualDays < record.currentMonthExpectDays},'cursorPointer']"原创 2020-05-09 13:57:54 · 3071 阅读 · 0 评论 -
vue样式属性变量表示
<a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="[headerName]" :style="{ lineHeight: '64px',textAlign: 'right' ,width:'800px', float: 'right'}" > ...原创 2020-04-26 13:30:22 · 1253 阅读 · 0 评论 -
lite-server服务器
安装npm i lite-server-g原创 2020-03-20 15:26:57 · 504 阅读 · 0 评论 -
vue自动匹配控件
<el-radio-group v-model="currentFunction" class="currentFunction"> <el-radio-button label="Summary">概述</el-radio-button> <el-radio-button label="Camera">摄像头</el-radio-b...原创 2019-07-22 13:51:53 · 407 阅读 · 0 评论 -
vue按钮切换
使用button显示隐藏就可以切换了，主要是状态控制<el-button type="text" :class="{ 'selected-type': isSamplingIssues }" @click="listSamplingIssue">水样采集</el-button><el-button type="text" :class="{ 'selected-t...原创 2019-07-25 17:07:27 · 1226 阅读 · 0 评论 -
elementUI
手风琴的title想变为动态的，不能用普通方法<el-collapse-item :title="warningAlertTile"> <WarningAlertList/> </el-collapse-item>js里面的写法 warningAlertTile(){ let warningAlertCount = this.warningA...原创 2019-07-19 15:58:36 · 209 阅读 · 0 评论 -
vue安装js库
刚开始安装hls.js视频播放库按照官方文档npm install --save hls.js发现在vue里面没有找到，然后改了npm install --save-dev @types/hls.js原创 2019-07-18 15:09:57 · 345 阅读 · 0 评论 -
vue配合elemenUI做自定义切换单选框
elementUI的单选框切换可以自定义切换需求： store里面的变量state改变让单选框选择改变<el-radio-group :value="currentWarningAlertState" @input="changeWarningAlertState"> <el-radio-button :label="null">全部</el-radi...原创 2019-07-18 15:06:34 · 734 阅读 · 0 评论 -
前端获取uri的字段
使用一个js库 urijsvue安装urijs需要安装两个库可以查询npm官网npm install @types/urijsnpm install urijs这样vue框架就自动引入uri库了使用前端请求<a :href="'/admin/flight?droneSN=' + row.sn + '&droneName=' + row.name " target="...原创 2019-07-10 19:48:47 · 799 阅读 · 0 评论 -
vue步骤框代码
<template> <el-dialog :visible="checkModelShow" @close="cancel" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" class="init-dialog"...原创 2019-06-28 15:50:12 · 354 阅读 · 0 评论 -
vue异步请求(ts语法)
<a @click="oneKeyDelete"></a> oneKeyDelete() { this.$confirm(`确认删除?`).then(async () => { let url = "/api/bombBombBomb/"; await axios.delete(url); ...原创 2019-06-27 09:50:15 · 1576 阅读 · 0 评论 -
vue.js模板的定义和使用
这里以点赞模板为例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .liked { backg...原创 2019-05-25 19:03:31 · 684 阅读 · 0 评论 -
Vue入门
传参 <p v-text="msg"></p> <p v-html="msg"></p> <button @click="test()">test1</button> //无参 <button @click="test2('abc')">test2</button> // 传abc <b...原创 2019-05-26 18:54:26 · 107 阅读 · 0 评论 -
关于vue的生命周期
顺序 //1、初始化阶段 beforeCreate () { console.log("beforeCreate()"); }, created () { console.log("created()"); }, beforeMount () { console.log("beroreMount()"); ...原创 2019-05-30 19:33:48 · 89 阅读 · 0 评论 -
关于vue的动画效果
vue的动画需要先写transition并且指定name<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*显示隐藏的过度 用1秒时...原创 2019-05-30 20:11:23 · 99 阅读 · 0 评论 -
moment使用
下载去官网下载传送门使用转换unix时间戳var date = moment(1448896064621).format('YYYY-MM-DD HH:mm:ss');console.log(date)原创 2019-05-28 16:26:51 · 2706 阅读 · 0 评论 -
Vue和js小技巧
获取标签 $refs<p ref="content">ganmyds.com</p><button @click="hint">提示</button> new Vue({ el: '#test', methods: { hint () { alert(this.$ref...原创 2019-05-30 21:31:09 · 119 阅读 · 0 评论 -
vue框架配置跨域
module.exports = { devServer: { open: false, host: 'localhost', port: 8081, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { ...原创 2019-05-28 14:15:00 · 505 阅读 · 0 评论 -
关于vue的事件
绑定监听使用很简单： @click就可以了注意，如果不写参数，那么js会默认传一个参数$event，例如<button @click="test3">test3</button> test3(event){ alert(event.target.innerHTML); //这样就可以获取到这个标签的内容了 }还有一种情况，就是我们有传参数的情况，要获...原创 2019-05-29 20:14:00 · 99 阅读 · 0 评论 -
关于vue的双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="test"> <form...原创 2019-05-29 21:11:26 · 78 阅读 · 0 评论 -
箭头函数的使用
需求： 每过1秒显示隐藏教育<div id="test"> <button>destory vm</button> <p v-show="isShow">教育</p></div>错误案例 new Vue({ el: '#test', data: { isShow: t...原创 2019-05-29 21:38:18 · 245 阅读 · 0 评论 -
vue自定义指令使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="test"> <p v-...原创 2019-06-02 16:16:50 · 126 阅读 · 0 评论 -
vue插件声明和使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="test"> <p v-m...原创 2019-06-02 17:10:28 · 462 阅读 · 0 评论 -
Vue脚手架使用
安装npm install -g vue-cli //全局安装脚手架，确定有没有全局安装打开cmd输入vuevue init webpack vue_demo //使用webpack模板初始化项目 vue_demo是自定义项目名 不能含大写字母这个时候会有很多选项? Project name vue_demo //是否使用这个项目名称? Project description A Vu...原创 2019-06-02 18:06:54 · 416 阅读 · 0 评论 -
iview收缩框
<Collapse v-model="value1" style="background: #fff;" simple> <Panel name="1" :hide-arrow="true"> <Row> <i-col span="2"...原创 2019-06-03 16:07:05 · 530 阅读 · 0 评论 -
vue按键修饰符
自定义submit事件<form v-on:submit.prevent="onSubmit"></form>.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：阻止表单提交的默认事件...原创 2019-05-14 13:37:56 · 126 阅读 · 0 评论