vue
小前端半半
这个作者很懒,什么都没留下…
展开
-
vue3中 ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,分享一下个人的理解。原文链接:https://blog.csdn.net/u010059669/article/details/112287552一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态的副本。获取数据值的时候直接获取,不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const sta原创 2022-01-04 16:29:34 · 330 阅读 · 0 评论 -
vue 插槽(slot)v-slot 使用
插槽是什么?官方解释 插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”,父组件可以使用指定内容来补“坑”。基本用法现在,有两个组件,A与B,分别如下:A.vue<template> <div> <p>我是A组件</p>原创 2021-12-03 15:14:24 · 1396 阅读 · 0 评论 -
vite 快速搭建vue,react 项目命令
了解viteVite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。vite官网地址:https://vitejs.cn/guide/ 传送地址兼容问题兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。cmd打开终端,输入node -v查看当前node版本信息1,搭建vite项目命令vue + TypeScriptnpm init vite@latest vite-vue-ts --t原创 2021-11-05 15:51:56 · 627 阅读 · 0 评论 -
数组去重,记录一下
//数组去重 arrUnique(arr, key) { let returnArr = []; if (key) { // 对象数组去重 const obj = {}; returnArr = arr.reduce((cur, next) => { obj[next[key]] ? "" : (obj[next[key]] = true && cur.push(next)); .原创 2021-10-19 11:27:55 · 63 阅读 · 0 评论 -
input只能输入数字或含两位小数的正则
var reg=/^\d+(\.\d{0,2})?$/;\d:首位必须是数字+拼接后面的()拼接的内容\.挨着必须是小数点\d小数点后面必须是数字{0,2}两位有效数字$:匹配任何结尾为之前所写的字符串 即 小数点和两位小数 <el-input v-model="price" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" clearable原创 2021-09-01 14:29:13 · 1126 阅读 · 0 评论 -
vuex模块化管理 state ,mutations ,actions ,getters
因为项目越写越大,之前就是直接在store下的index.js文件直接写状态和数据,然后越写越多,也不方便维护,现在抽时间把项目store分一下模块管理,不懂的同学建议多参考vue官网api1.首先创建Module文件夹,根据自己项目的需求创建自己的模块2.在index.js文件引入你创建好的模块import Vue from "vue";import Vuex from "vuex";import createPersistedState from "vuex-persistedstate原创 2021-07-26 17:15:20 · 179 阅读 · 0 评论 -
ES6数组的合并和取值
ES6数组的合并和取值 工作中遇到一个一维数组的操作,根据id取出二级数组里相应的数据,数据结构类似下面 const list = [ { name:"线控玩具", id:"1", children:[ { id:"a1", name: "线控车"原创 2021-07-23 16:01:41 · 752 阅读 · 0 评论