![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
m0_49471668
这个作者很懒,什么都没留下…
展开
-
cssBootstrap栅格布局的四种大小xs,sm,md,lg,xl
前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现。col-*-*visible-*-*hidden_*_* 中间可为xs,xsm,md,lg等表示大小的单词的缩写右边为1-12之内、用于元素所占列数columns的数值xs extra small超小sm smallmd meddlelg largexl extra large超大col-*对应所有设备 col-sm-平板--屏幕宽度等于或者大于576pxcol-md-桌面显示屏--屏幕宽度大于或者等于768pxcol-lg-大桌原创 2022-06-26 22:41:57 · 21914 阅读 · 0 评论 -
VUE项目中的配置文件.env .env.development .env.production
.env 无论是开发环境(本地)还是生产环境(部署到服务器)都会执行.env.development 只会在开发环境时执行.env.production 只会在生产环境执行Vue项目启动时会首先加载.env环境; 后台node环境会根据变量来判断加载.env.development还是.env.production;如果.env.development或者.env.production里面的变量和.env里面的变量重叠;后执行的会把前面的覆盖掉常用于配置变量; 注意:它们属于配置文件;每次修改都要重新启动;原创 2022-06-16 23:33:50 · 429 阅读 · 0 评论 -
vue 表格嵌套表单验证,填写了其中一个后另一个提示为必填项,俩个不填为非必填,
<el-col :span="6"> <el-form-item label="证书名称:" prop="fileName" :rules="RecordOperation.upload[i].classHour?[{required: true, message: '请输入证书名称', trigger: 'blur'}]:[{required:false}]"> <el-input .原创 2022-05-31 17:08:50 · 1245 阅读 · 0 评论 -
el-upload多个文件,动态增加+预览word 、excel、ppt、pdf、png、jpg文件
el-upload多个文件,动态增加<template> <span> <el-row v-for="(v, i) in RecordOperation.upload" :key="i"> <el-col :span="6"> <el-form-item> <el-input v-model.trim="v.fileName" ..原创 2022-05-24 15:37:21 · 2356 阅读 · 0 评论 -
Vue , Element-ui实现 pdf文件禁止预览直接下载
ue实现pdf文件禁止预览,直接下载此功能很常见,但是网上其他案例教程太过繁琐,在此用最快简单的方式实现一般情况下,后端返回的pdf文件是以文件流的形式返回,直接打开的话任何浏览器会解析PDF文件,直接显示的预览效果,而我们需要的是禁止预览直接下载后端返回的文件流,一般是乱码的实现方式:1:安装downloadjs 下载插件依赖npm install downloadjs2:引入所需要的页面,如果想全局使用,可以再main.js中引入import download from 'd原创 2022-05-24 15:34:40 · 1063 阅读 · 0 评论 -
js获取字符串最后一位的方法 js分割字符串 数组对象中每个对象添加⼀个字段
js获取字符串最后一位的方法js分割字符串对于目标字符串如果是存在【分割符】作数据分割的数据可以使用此方式去分割字符串。例如:“1|2|3|4”以【|】作分割符的数据,String.split("|")。数组对象中每个对象添加⼀个字段将数组对象中每⼀个对象添加⼀个字段let arr = [ {name: 'lilei',age: '25'}, {name: 'nike',age: '23'}, {name: 'alisa',age: '23'}]使⽤Array.原创 2022-05-23 17:47:29 · 220 阅读 · 0 评论 -
vue element 轮播图
Vue项目中【封装复用】使用elementUI中的Carousel 走马灯实现轮播图效果 - 简书原创 2022-05-18 17:27:48 · 656 阅读 · 0 评论 -
vue3获取实时时间
<script setup>const state = reactive({ date: '', time: '', week: '', showIndex: 0 }) // 获取时间接口 const getTime = async () => { var myDate = new Date() let month = (myDate.getMonth() + 1).toSt.原创 2022-05-07 10:51:47 · 2887 阅读 · 0 评论 -
vue项目中与内嵌iframe传值
vue项目作为父级,内嵌一个iframe给iframa传值的写法 //html结构 <button @click="fatherpost">给iframe传值</button> <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"> </iframe> //挂载在原创 2022-04-28 16:18:33 · 644 阅读 · 0 评论 -
vue3<script setup>语法糖中父组件调用子组件方法
// 父组件<template> <child ref="childRef"></child></template><script setup>import { ref } from "vue";// 引入子组件import child from "./child.vue";// 获取子组件const childRef = ref(null);const fun = () => { childRef.value.chi.原创 2022-04-27 09:12:22 · 1706 阅读 · 1 评论 -
Vue3 中插槽(slot)的用法
Vue3(其实从2.6开始)中引入了一个新的指令v-slot,用来表示具名插槽和默认插槽基础示例<!-- default slot --><foo v-slot="{ msg }"> {{ msg }}</foo><!-- named slot --><foo> <template v-slot:one="{msg}"> {{ msg }} </template>原创 2022-04-26 16:08:48 · 1827 阅读 · 0 评论 -
给 el-dialog 增加拖拽功能
使用vue3的自定义指令给 el-dialog 增加拖拽功能 - 前端教程原创 2022-04-23 15:16:16 · 1633 阅读 · 0 评论 -
vue3配置全局参数(挂载全局方法)以及组件使用方法
vue2的方式1. 全局挂载Vue.property.xxximport Vue from "vue";import axios from "axios";Vue.prototype.$http= axios;new Vue({ router, store, render: (h) => h(App),}).$mount("#app");2. 组件使用this.$http.xxx();vue3的方式1. 全局挂载app.config.glob..原创 2022-04-22 11:26:22 · 3864 阅读 · 0 评论 -
vue3子组件触发父组件方法
子组件<template> <div @click="confirm ">啦啦啦啦</div></template><script setup>import { defineEmits } from 'vue'const emit = defineEmits(['editConfirm'])const confirm = () => { emit('editConfirm', '要传递的数据') // 之前子组件修改.原创 2022-04-21 14:42:30 · 698 阅读 · 0 评论 -
虚拟dom
虚拟dom虚拟dom是在vue2.0加入的本质是js对象(具备跨平台特质)js能跑虚拟dom就能跑虚拟dom在vue中做了什么vue的渲染过程 ,浏览器只认识(html,css,js),有个转化的过程render函数负责将template中的内容转化为真实的dom生成虚拟dom,也就是一个js对象,最后再变成真实dom,浏览器最终呈现缺点:会增加vue初始渲染时间优点:更新的时候用来做对比虚拟dom是如何提升vue渲染效率1.局部更新(节点数据)2.将直接操作原创 2022-04-21 00:29:15 · 374 阅读 · 0 评论 -
vue组件执行子vuex函数
console.log(store.commit('user/BIND_LOGOUT'))路径/要调用的函数原创 2022-04-20 23:26:33 · 83 阅读 · 0 评论 -
vue2 和vue3区别
slot变为v-slotnative变为enter原代码 <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="settings">基本设置</el-dropdown-item> <el-dropdown-item @click.native="password" >修改密码原创 2022-04-20 22:27:49 · 315 阅读 · 0 评论 -
export ‘createStore‘ (imported as ‘createStore‘) was not found in ‘./store/index.js‘ (possible expor
目录报错:原代码:修改后代码:在组件使用报错:export 'createStore' (imported as 'createStore') was not found in './store/index.js' (possible exports: default)原代码:store中index.jsimport {createStore} from 'vuex'import app from './modules/app'import user fro原创 2022-04-20 22:06:09 · 1997 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id: header
Do not use built-in or reserved HTML elements as component id: headervue组件名称与html5标签名称冲突,vue组件命名不要和已有标签重复原创 2022-04-20 21:23:54 · 303 阅读 · 0 评论 -
vue3中使用vuex
在vue3中使用vuex_淮北才子的博客-CSDN博客_vue3使用vuex原创 2022-04-20 20:37:46 · 107 阅读 · 0 评论 -
[Vue Router warn]
[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.Use slot props instead:就是vue-router不再使用原来的写法,用slot插槽代替原因:检查vue-router的版本一般是4.x以上的都改用了新的写法解决:改成<router-view v-slot="{ Com.原创 2022-04-20 20:24:14 · 1338 阅读 · 0 评论 -
vue3项目
1.安装vue-router路由npm install vue-router@4 --save2.路由使用在src下新建router.js文件import {createRouter,createWebHashHistory} from "vue-router"const Login = () => import( /* webpackChunkName: "login" */ '@/views/users/Login.vue');const routes=[ {原创 2022-04-20 16:21:41 · 94 阅读 · 0 评论 -
Vue3学习
组合式APIsetup函数ref函数注意: ref一般用到基本数据类型reactive和ref不同的地方,取数据时不需要。valueconsole.log(obj)toReftoRefs计算属性--computed在vue3中需要引入...原创 2022-04-20 08:03:32 · 351 阅读 · 0 评论 -
生产环境配置host
将本地换成远程地址原创 2022-04-19 20:19:54 · 146 阅读 · 0 评论 -
vue2和vue3共存并分别创建项目
一.安装vue-cli脚手架(1)先创建两个文件夹vue2和vue3(2)进入vue3文件夹,在地址栏输入cmd回车,使用vue3必须把农庄@vue-cli版本在4.5.0以上,默认安装最新版本输入npm install @vue/cli注意:不要加-g,不然就是全局安装了(3) 安装vue2脚手架这里需要安装指定版本的vue-clinpm install vue-cli@2.9.6(4)查看是否安装成功分别进入D:\vue\vue3\node_mod原创 2022-04-19 19:33:13 · 2507 阅读 · 3 评论 -
链接放上参数,在页面访问
// 给url传参数function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) {.原创 2022-04-15 16:39:45 · 121 阅读 · 0 评论 -
树的宽度可调
index.js<template> <div class="box" :style="{height:screenHeight - 110 + 'px'}" > <el-row> <el-col :span="scale" :style="{height:screenHeight - 110 + 'px'}" class="left" > ..原创 2022-04-15 16:23:40 · 1264 阅读 · 0 评论 -
Vue导出表格 调用后端接口
在http.js文件夹中:export function downFile(url, data, filename) { axios.post(url, data, { responseType: 'blob' }) .then(data => { let blob = new Blob([data.data]); console.log(data); let url = window.URL.createObjectURL(blob);原创 2022-03-31 16:32:59 · 1520 阅读 · 0 评论 -
MVC和MVVM的区别
MVC是Model View Controller 是模型-视图-控制器的缩写,是一种软件设计典范。用一种业务逻辑,数据,界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和定制化界面及用户交互的同事,不需要重新编写业务逻辑。Mvc被独特的发展起来用于映射传统的输入,处理和输出功能在一个逻辑的图形化用户界面的结构中MVC的思想:一句话描述就是Controller负责将model的数据用View显示出来换句话说就是在Controller里面把Model的数据赋值给ViewMode原创 2022-03-25 19:52:04 · 1786 阅读 · 0 评论 -
ElementUI select下拉框实现可输入文字的效果
加上filterableallow-createdefault-first-option三个参数即可原理:使用allow-create属性即可通过在输入框中输入文字来创建新的条目 注意此时filterable必须为真 本例还使用了default-first-option属性,在该属性打开的情况下,按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位效果:...原创 2021-08-25 10:00:57 · 4014 阅读 · 1 评论 -
vue-cil时间过滤器filter全局引入
1.新建filters文件夹,在文件夹新建index.jsexport function DateformaDate(value) { //创建一个时间日期对象 var padaDate = function (value) { return value < 10 ? "0" + value : value; }; var date = new Date(); var year = date.getFullYear(); //存储年 v原创 2022-03-17 17:15:14 · 167 阅读 · 0 评论 -
vue.js 获取当前时间
html代码 <div class="item-right"> {{ date | formaDate }} </div>js 代码 <script>var padaDate = function(value) { return value < 10 ? "0" + value : value;};export default { data() { return { .原创 2022-03-17 16:45:39 · 492 阅读 · 0 评论 -
axios请求加上Cookie
axios.defaults.withCredentials=true原创 2022-03-04 15:33:20 · 1067 阅读 · 0 评论 -
vue使用history模式下 部署 tomcat 时刷新页面就会出现404,找不到资源的问题
vue使用history模式下 部署 tomcat 时刷新页面就会出现404,找不到资源的问题.可以简单理解History模式跟Hash的区别就是URL不带#号,History需要后台配置支持参考:解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题_小破孩的博客-CSDN博客_vue部署到非根目录...原创 2022-03-04 10:41:54 · 1090 阅读 · 0 评论 -
多页面配置
1.vue.config.js配置 pages:{ index:{ entry:"./src/main.js", template:"./public/index.html", filename:"index.html", title:"AMControl" }, AMControl:{ entry:"./src/pages/AMControl/main.js", template:.原创 2022-03-03 19:04:25 · 405 阅读 · 0 评论 -
vue多页面配置
vue 多页面跳转配置与实现(看了就会,一步一步作)_小小码农呀的博客-CSDN博客_vue多页面跳转原创 2022-03-02 19:25:16 · 838 阅读 · 1 评论 -
打印出来是promise,就可以使用async和await进行优化
打印出来是promise,就可以使用async和await进行优化修改后:打印出来的为confirm点击取消报错加上catch不再报错原创 2022-02-17 18:04:50 · 861 阅读 · 0 评论 -
javaScript原型与原型链
prototype:此属性只有构造函数才有,它指向的是当前构造函数的原型对象。 __proto__:此属性是任何对象在创建时都会有的一个属性,它指向了产生当前对象的构造函数的原型对象,由于并非标准规定属性,不要随便去更改这个属性的值,以免破坏原型链,但是可以借助这个属性来学习,所谓的原型链就是由__proto__连接而成的链。 constructor:此属性只有原型对象才有,它默认指回prototype属性所在的构造函数。 原型的几个要点:1、所有的引用类型(数组、对象、函..原创 2022-02-17 17:01:06 · 105 阅读 · 0 评论 -
vue-router 切换tab标签关闭时缓存问题方案
问题:使用keepalive后关闭tab标签后再打开,打开的是缓存的页面,参考上一篇关于tab的笔记要求:切换时打开的是缓存的页面,关闭后重新打开的是新的请求的页面解决方法使用keep-alive的include属性根组件<keep-alive :include="catch_components"> <router-view ></router-view> </keep-alive>原创 2022-02-14 15:06:42 · 2222 阅读 · 4 评论 -
input 监听输入框
<el-input class="name" v-model="instrument" style="width: auto;" placeholder="仪器查询" v-on:input="InputSearch($event)" ></el-input&g...原创 2022-01-20 14:17:21 · 700 阅读 · 0 评论