vue
*小天屎*
大道理
展开
-
Non-function value encountered for default slot. Prefer function slots
Non-function value encountered for default slot. Prefer function slots问题原因:Vue3 使用h函数 推荐使用函数式插槽,以便获得更佳的性能。解决方式:// 错误return h(xxx, { xxx }, { xxx});// 正确return h(xxx, { xxx }, { default: () => xxx });// 多个插槽return h( xxx, { xxx }, { default: ()原创 2022-04-26 14:34:23 · 1300 阅读 · 2 评论 -
vue3 使用setup 语法糖
1.特性任何在 script setup 声明的顶层的绑定 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用(如果编辑器报错v3使用Vue Language Features (Volar)插件,不要使用v2的Vetur)<template> <button @click="count++">{{ count }}</button> <MyComponent /></template><scri原创 2022-04-24 11:43:27 · 1665 阅读 · 2 评论 -
el-table 判断expand显示
el-table 判断expand显示<el-table :data="tableData" :row-class-name="getRowClass"> <el-table-column type="expand"> <template slot-scope="props"> ... <template> <el-table-column><el-table>// 判断表格是否有子项,无子项不显示展开按钮转载 2022-04-14 16:21:45 · 1288 阅读 · 0 评论 -
Element el-table 自定义show-overflow-tooltip
<el-table-column label="计算规则" prop="calcRule"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" placement="top"> <div slot="content">浮窗内容</div> <div class="oneLine">{{scope原创 2022-04-06 19:53:58 · 1442 阅读 · 0 评论 -
vue 开发命名规范
文件目录src 源码目录|-- api 接口,统一管理|-- assets 静态资源,统一管理|-- components 公用组件,全局文件|-- hooks 公用方法,统一管理|-- router原创 2022-02-10 15:48:17 · 688 阅读 · 0 评论 -
axios拦截器
// axios 拦截器(普通)axios.interceptors.request.use(config => { config.params = { ...config.params, icode: 'F11309C43EB2C21C' } // 追加参数 store.commit('setLoading', true) // loading显示 return config})axios.interceptors.response.use(config => { st原创 2021-12-22 14:24:53 · 130 阅读 · 0 评论 -
vuex中使用axios + ts 请求封装
vuex中axios请求封装import { createStore } from 'vuex'import axios from 'axios'interface ColumnProps { _id: string; title: string; avatar?: string; description: string;}interface GlobalDataProps { columns: ColumnProps[];}// axiosconst getAndC原创 2021-12-09 15:10:51 · 215 阅读 · 0 评论 -
vue各种跳转方式
vue各种跳转方式1.router-link// 不带参数<router-link :to="/home"><router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // 带参数<router-link :to="{ name: 'column', params: { id: column.id }}">跳转</router-link><rout原创 2021-11-05 10:47:35 · 229 阅读 · 0 评论 -
vue3组件的双向绑定(更改父组件props传值的最佳方式)
vue3组件的双向绑定// 父组件<template> <div> // 默认 v-model:modelValue="inputValueProp" modelValue可自定义用于多个监听值(父组件也要更改) <BindingInput v-model="inputValueProp"></BindingInput> {{inputValueProp}} </div></template>&l原创 2021-10-29 16:09:57 · 5351 阅读 · 0 评论 -
uniapp项目使用vue3
uniapp项目使用vue31.首先创建普通uniapp项目2.找到manifest.json文件vue版本选择 选择33.重新运行提示: 请确认您的项目模板是否支持vue3:根目录缺少 index.html在根目录下创建index.html,模板已放在下方<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view原创 2021-08-31 10:36:57 · 23886 阅读 · 0 评论 -
vue3 创建项目
vue 创建项目1.打开cmd cd到你要创建的文件夹下2.输入vue create project ,project就是你的项目名称3.选择自动和手动Default:是自动安装后面的配置Manually:是手动选择(我这里选择手动)*注: 我这里的第一个ts是上一次记录过的配置,第一次安装是没有的4.选择详情配置,看个人项目需求Choose Vue version:选择vue版本Babel: 转码器,可以将ES6代码转为ES5代码(允许我们使用ES6模块化语法)TypeScri原创 2021-08-16 12:49:53 · 120 阅读 · 0 评论 -
npm install 报错 check python checking for Python executable python2 in the PATH
场景:在升级了node环境后项目发生了版本号不匹配报错,决定重新初始化后又有了一下报错Building: G:\nodejs\node.exe F:\test\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=gyp info it worked if it ends with okgyp verb c原创 2021-08-16 09:55:18 · 6185 阅读 · 0 评论 -
vue filter搜索功能实现
<el-table-columnprop="identCode"label="identCode"min-width="120"> <template slot="header"> <el-dropdown :hide-on-click="false" trigger="click"> <span class="el-dropdown-link">唯一码<i class="el-icon-caret-bottom" style="原创 2021-08-05 14:14:09 · 368 阅读 · 0 评论 -
vue将图片链接、本地图片转为二进制文件流
vue将图片链接转为二进制文件流应用场景:用户修改图片后会覆盖以前上传的图片,需将以前的的图片转为文件流与修改的图片一起上传1.需先将图片链接转为Base64imageUrlToBase64(imageUrl) { let image = new Image() // 一定要设置为let,不然图片不显示 image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题 image.src = imageUrl +"&v=" + Ma原创 2021-07-26 08:59:18 · 6857 阅读 · 10 评论 -
vue使用参数直接取到data数据
vue使用参数直接取到data数据upRecvQtyStatus (row, name) { console.log(this._data[name]) // this._data就是data本身 this._data[name] = true console.log(this.recvQtyStatus)}原创 2021-06-28 14:58:22 · 1285 阅读 · 0 评论 -
监听vuex中的数据变化的两种方式
监听vuex中的数据变化的两种方式// 第一种computed: { deputyStatus () { return this.$store.state.componentStatus.deputyStatus },},watch: { deputyStatus (newStatus) { console.log(newStatus) }}// 第二种watch: { '$store.state.componentStatus.deputyStat原创 2021-06-23 16:15:50 · 427 阅读 · 0 评论 -
vuex的封装与使用
vuex的封装与使用1、安装vuex npm install vuex --save2、配置vuex 在src目录下新建文件 modules里是根据功能拆分vuex模块,并在index.js里引入,在main.js引入vuex,具体代码请见下方// index.jsimport Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'import componentStatus from './mod原创 2021-06-15 11:16:42 · 284 阅读 · 0 评论 -
vue 创建项目
vue 创建项目1.打开cmd cd到你要创建的文件夹下2.输入vue init webpack project ,project就是你的项目名称1.Project name :项目名称,如果为我们init的项目名直接回车(此处项目名不能使用大写)2.Project description:项目描述,如果不需要直接回车3.Author :作者4.vue build 构建方式 两个选择 第1个是完整版的 第2个是阉割版的(建议使用1) 1).Runtime + Compiler:re原创 2021-05-28 15:09:30 · 275 阅读 · 2 评论 -
vue中keep-alive的使用
vue中keep-alive的使用场景:keep-alive可以将组件缓存起来,组件不会销毁,data数据不会重新加载,减少加载时间及性能消耗,提高用户体验性<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div></template><script>export defau原创 2021-05-25 13:52:21 · 81 阅读 · 0 评论 -
vue mixin(混入)的使用
场景:分发 Vue 组件中的可复用功能,当一个功能在多个vue页面中使用时,就可以使用mixin来进行复用// Mixinsconst Mixin = { data () { return {} }, created () { this.hello() }, methods: { hello() { console.log('你好,我是mixin') } }}export default Mixin // 页面使用impo原创 2021-05-25 12:39:15 · 115 阅读 · 0 评论 -
async/await 同步方法的使用
async/await 同步方法的使用场景:在我们需要在请求完毕之后再执行下面的方法时,就要使用到async/await created () { this.getBannerList()},methods: { async getBannerList () { await this.$http.get('index/getBanner').then(res => { console.log(res.data) }) console.lo原创 2021-05-24 21:50:02 · 342 阅读 · 0 评论 -
vue面试题自我介绍
2021.5.15 面试准备1.自我介绍面试官好,我叫王荣康,来自山东德州,有过两年半的工作经验,主要擅长的前端技术有vue全家桶,vue3.0,uniapp,ts,微信小程序,微信公众号,擅长的后端技术有tp6,fastadmin,nginx,redis,mysql,phpstudy,宝塔等一些常用技术,个人性格可能会偏内向一点,我更喜欢去学习新的知识,钻研不懂的问题,以上就是我的自我介绍,谢谢!2.面试题vue1.Vue3.0和Vue2.0的区别1.默认进行懒观察 在 2.0里,不原创 2021-05-15 16:33:54 · 2952 阅读 · 0 评论 -
uni-app h5input(file)方式上传文件处理
uni-app h5input(file)方式上传文件处理uni-app input不支持file上传需要使用js创建<view @tap="uploadBtn"> <view v-show="false" ref="input" class="input"></view> <image src="../../../../../static/activities/shortTerm/speech/audio.png"></image> &原创 2021-04-07 15:11:22 · 1959 阅读 · 0 评论