vue
shimeifang11
这个作者很懒,什么都没留下…
展开
-
基于vite搭建一个vue3
1、安装pnpmnpm install pnpm -g2、开始创建vite项目pnpm create vite按照步骤创建项目名称、选择框架cd vue3-vite-projectvue-routerpnpm install vue-router@4vuexpnpm add vuex@next安装UI库naive-uipnpm add naive-uiNaive UI安装axiospnpm add axios安装 mock 工具.原创 2022-03-15 14:17:37 · 4397 阅读 · 0 评论 -
vue3属性以及新用法
之前零零散散的用vue3写一些案例,一直也没有做过任何总结,这段时间忙里偷闲写点东西吧。vue3新语法统一写在 <script setup lang="ts">,这种组合式API写法,跟vue2完全不一样【vue2采用option api】。1.ref =》基本数据类型响应 定义的数据需要使用value去获取值const iptValue = ref('html')const list = ref(['css', 'js'])console.log(iptValue.v..原创 2022-03-11 16:19:04 · 5784 阅读 · 0 评论 -
实现截图粘贴上传、拖拽上传
之前上传方式是使用element-ui的el-upload,现在需要添加一个需求功能实现截图粘贴也可以上传。直接上代码:<div> <div>附件</div> //为了第一次截屏,粘贴在对应组件上 <div id="editable" contenteditable="true"></div> <el-upload ref="upload原创 2022-03-10 18:02:50 · 1446 阅读 · 0 评论 -
elementUI多级联动el-cascader动态加载数据实现
vue2+elementUI+webpack项目,由于业务需求,需要一个多级联动的省市区的选择搜索项,由此做了一个搜索的通用组件一开始直接引入elementUI的el-cascader动态加载数据实现<el-cascader :props="props"></el-cascader><script> let id = 0; export default { data() { return { props: {原创 2022-01-24 16:42:00 · 4814 阅读 · 0 评论 -
2021面试题库整理集
一,html与css1,页面导入样式,使用link与@import有什么区别?(1) 从属关系:link是html标签,@import是css提供的(2) 加载差异:页面加载时,link会同时加载,而@import引入的css会在页面加载完成后加载(3) 兼容性,@import不兼容ie5以下浏览器(4) Link可以通过js操作dom插入link标签改变样式,@import不能2,描述块级元素与行内元素的区别?行内元素与块级元素有哪些?Img是什么元素?如何制定元素以块级元素展示原创 2021-11-17 09:19:35 · 187 阅读 · 0 评论 -
vue组件中刷新数据自动滚动到顶部
项目中有个需求,数据变动时,滚动条自动滚到顶部在监听数据调接口时触发一下置顶方法:this.backTop(); // 置顶 backTop() { let scrollTop = this.$refs.detailDrawer.$refs.drawer.pageYOffset || this.$refs.detailDrawer.$refs.drawer.scrollTop || this.$refs.detailDraw.原创 2021-09-16 15:10:32 · 1899 阅读 · 0 评论 -
VUE单页面引入CSS、JS(CDN链接)
<template> <div class="my-page"> <remote-js cdn="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></remote-js> <remote-css cdn="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><.原创 2021-09-15 15:27:54 · 756 阅读 · 0 评论 -
npm install 安装失败
npm install 安装失败一出现这个问题是因为npm版本过高导致的解决:回退一下npm版本npm install npm@6.14.10 -g原创 2021-08-19 11:14:17 · 1049 阅读 · 0 评论 -
vue内存溢出问题
每次更改.vue文件保存之后自动断开连接并提示:解决方法:原创 2021-06-03 19:17:22 · 171 阅读 · 0 评论 -
vue使用el-table动态组件-slot自定义组件【插入某列按钮操作】
1、新建一个动态表格组件,CommonDynamicTable.vue代码如下:<template> <div> <el-table :data="tableData" size="mini" fit border highlight-current-row ref="multipleTable" stripe :header-cell-style=" {background:'rgba(24原创 2020-11-30 19:48:22 · 6460 阅读 · 2 评论 -
vue封装一个简单的toast,使用 Vue.extend+$mount
1、首先创建一个组件Toast.vue,代码如下<template> <div class="toast" v-if="show"> <div class="toast_text">{{text}}</div> </div></template><script>export default { data () { return { text:'原创 2020-05-26 23:41:10 · 252 阅读 · 0 评论 -
Element-ui table表格去掉所有单元格边框
Element-ui table表格去掉所有边框,如下图:// 去掉表格单元格边框.el-table th{ border:none; }.el-table td,.customer-table th.is-leaf { border:none;}// 表格最外边框.el-table--border, .el-table--group{ border: none;...原创 2019-10-11 16:55:55 · 17530 阅读 · 3 评论 -
vue生成二维码的插件
vue生成二维码的两个插件第一种方法 qrcodejs2下载插件qrcodejs2:npm install qrcodejs2 --save<template> <div class="qrcode2"> <!-- 必须是id 和实例化的第一参数对应 --> <div class="qrcode_bg_...原创 2019-08-23 17:57:12 · 992 阅读 · 0 评论 -
vue中router在项目中引入跳转
1、多看看官网:https://router.vuejs.org/zh/guide/#htmlHTMLJavaScript// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来const Foo = { template: '<...原创 2019-08-02 14:25:32 · 1074 阅读 · 0 评论 -
vue-cli3.5.5使用AXIOS请求api
1、项目中安装axios:npm install axios2、在main.js中引入import axios from 'axios'import qs from 'qs'// 请求超时axios.defaults.timeout = 10000// baseurlaxios.defaults.baseURL = BASE_URL// post请求头axios...原创 2019-07-22 14:08:27 · 187 阅读 · 0 评论 -
零基础开始搭建VUE项目
在网上也有很多教程,如何搭建vue项目,但觉得还是记录一下自己搭建的安装全过程吧,略显粗略一、安装1、下载node.js,官网:https://nodejs.org/en/2、cmd运行node -v出现版本号则安装成功。 查看npm版本:npm -v3、安装淘宝镜像(也可不安装,我没用过cnpm命令):npm install -g cnpm --registry=h...原创 2019-07-22 11:39:55 · 112 阅读 · 0 评论 -
使用VScode做VUE项目时VScode安装的插件
原创 2019-07-22 11:11:29 · 2832 阅读 · 0 评论 -
vue中的v-model绑定数据深层次问题
vue有些赋值方式是非响应式的,页面不会刷新,可以参考下面(百度参考):Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength当第一种情况需求时,可以使用this.$set(this.arr,index,newVal)...原创 2019-07-02 16:52:18 · 10654 阅读 · 0 评论