- 博客(42)
- 收藏
- 关注
RSS订阅原创 数组方法 | vue修改数组
push() 方法（在数组结尾处）向数组添加一个新的元素unshift() 方法（在开头）向数组添加新元素pop() 方法从数组中删除最后一个元素shift() 方法会删除首个数组元素splice() 方法可用于向数组添加新项：sort 数组排序reverse 反转数组 reverse() 方法反转数组中的元素。
2025-01-01 13:34:42
521
原创 vue 常用特性 ( 计算属性 | 侦听器 | 过滤器 )
在 Vue 组件中，可以通过 computed 选项来定义计算属性。计算属性是一个对象，其键是计算属性的名称，值是一个函数，该函数返回计算属性的值。
2024-11-19 19:01:14
723
1
原创 vue生命周期 (创建阶段 | 挂载阶段 | 更新阶段 | 销毁阶段 )
vue生命周期 (创建阶段 | 挂载阶段 | 更新阶段 | 销毁阶段 )
2024-11-19 18:18:25
907
3
原创 vue 模板语法 ( 插值表达式 | 属性绑定 | 双向数据绑定 | 指令 | 按键修饰符 )
插值表达式属性绑定双向数据绑定样式绑定1. 使用 v-bind:class 绑定类名2 使用 v-bind:style 绑定内联样式3 使用计算属性动态生成样式对象或类名数组4. 组合使用 v-bind:class 和 v-bind:style注意事项指令 v-cloak指令按键修饰符一、常用按键修饰符二、系统按键修饰符三、注意事项
2024-11-16 20:29:33
1587
2
原创 展示默认路由
当两个路由切换，默认显示的路由 path 为 空 就行。const router = new VueRouter({ routes:[ { path:'/', component: Layout, children:[ { path:'', component:Table
2021-12-09 16:29:11
533
原创 报错：Cannot read properties of undefined (reading ‘$createElement‘)
报错：Cannot read properties of undefined (reading '$createElement')原因：路由 routes的component多了一个s
2021-12-09 15:48:02
2427
2
原创 css3 linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。/* 从上到下，蓝色渐变到红色 */linear-gradient(blue, red);渐变轴为45度，从蓝色渐变到红色 linear-gradient(45deg, blue, red);从右下到左上、从蓝色渐变到红色 linear-gradient(to left top, blue, red);从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束linear-gradient(0deg, blue, gre
2021-12-07 14:38:50
217
原创 全局安装脚手架模块包
Vue官方提供了@vue/cli包 可以创建脚手架项目全局安装@vue/cli模块包yarn global add @vue/cli / npm install 包名 -g 查看是否安装成功 vue V安装全局包会在计算机中配置全局命令：安装node 有了npm命令 安装yarn 有了yarn命令 安装@vue/cli 有了vue命令创建脚手架项目vue create vuecli-demo 注意：项目名不能有大写字母，中文和特殊符号。项目介绍：Main.js w
2021-12-06 11:11:08
117
原创 虚拟DOM
template的模板标签 --> 虚拟DOM --> 真实DOM虚拟DOM 是保存在内存中 节点信息 的一个js对象const dom ={type:'p',attributes:[{class:k}],children:{type:'i',Attributes:[],text:''}}
2021-12-06 11:08:53
100
原创 vue-router的使用步骤
1：定义路由并导出import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router =new VueRouter({ routes:[ { path:'/login', component:Login } ]})export default router2：在main.js中导入，并挂
2021-12-03 17:16:38
242
原创 插槽的理解
插槽slot<navigation-link url="/profile"> Your Profile</navigation-link><navigation-link>的模板中：<a v-bind:href="url" class="nav-link"> <slot>默认内容</slot></a>具名插槽<div> <main> <
2021-12-03 16:40:18
208
原创 vue结合element-ui的导出
导出是利用file的一个对象blob; axios.get('', { params: { "data": data }, responseType:'blob', }).then((response) => { //创建一个blob对象,file的一种 let blob = new Blob([respo
2021-12-03 12:00:35
517
原创 组件的懒加载
{ path: '/路径', name: 'name', component: function (resolve){ return require(['@/components/路径'],resolve) } },{ path:'路径' name:'name', Commponent: ()=> import('@/路径') }
2021-12-01 10:52:52
703
原创 vue事件修饰符
<!-- 阻止事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><f.
2021-12-01 10:43:25
161
1
原创 v-for遍历对象的property
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> data: { object: { title: 'How to do lists in Vue', author: 'Janee', publishedAt: '2016-04-10' } }<di...
2021-12-01 10:42:10
594
原创 vue中class与style的绑定
###### 对象语法V-bind:class 指令可以与普通class 共存 V-bind:class 可以有多个```<div class="satic" v-bind:class="{active:isActive,'text-danger':'error'}"></div>data:{ isActive:true, error:false,}``````<div v-bind:class="classObj"></div.
2021-12-01 10:38:13
565
原创 vue3的store
vue3 在js中使用store import {useStore} from 'store'const store = useStore()vue
2021-11-30 23:09:14
2366
原创 数组转树形结构
// 数组转树形结构/** * 把平铺的数组结构转成树形结构 * * [ * {id:"01", pid:"", "name":"老王" }, * {id:"02", pid:"01", "name":"小张" } * ] * 上面的结构说明： 老王是小张的上级 */export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 con.
2021-11-25 10:55:17
150
原创 ajax请求方式
Axios 的请求方式1：get请求axios.get(url[,config])axios.get('/list?articel=0').then(function(resolve){}).catch(function(error){})axios.get('/list',{params:{articel: 0}}) .then(resolve => { }).catch( error => {})2: post请求axios.p
2021-11-24 09:59:06
1274
原创 报错：不允许路由跳到当前所在的位置
1： vue 项目 报错原因：不允许路由跳到当前所在的位置解决：import Router from 'vue-router'const routerPush = Router.prototype.pushRouter.prototype.push = function push (location) { return routerPush.call(this, location).catch(err => err) }...
2021-11-24 09:54:01
382
原创 viewer.js的使用
在vue中使用viewer.js 浏览图片 缩小旋转1: 安装：npm install v-viewer2: 引入：import Vue from 'vue'import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)viewer.setDefaults({Options:{}})3:使用指令形式<div v-viewer={options选项在}&
2021-11-24 09:49:50
1166
原创 this的理解
this指向：默认绑定，隐士绑定，显示绑定，new绑定。this指向window几种情况：1：指向windowfunction fn(){console.log(this) //window}2:setTimeOut(function () {console.log(this)//window},0)function Person(){ this.name = 'Smiley'; this.sayName=function(){ c...
2021-11-23 22:05:14
69
原创 前端面试整理二
vue组件传值 非父子组件之间传递数据 父子 祖孙 兄弟 3.1 引入第三方 new vue 定义为 eventBus 在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods 中的方法名) 在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方...
2021-11-22 23:34:46
208
原创 前端面试整理一
H5C3:Localstorage、sessionStorage、cookie 的区别 Cookie http请求携带 大小4k 只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭 同源窗 口共享 Localstorage 大小5M 始终有效 同源窗口共享 ...
2021-11-22 23:26:58
200
原创 webpack小记
定义：webpack是一个第三方模块包，用于解析并打包代码。作用：支持所有类型文件的打包；支持less/sass => css ；支持ES6,7,8 => ES5 ；压缩代码，提高加载速度。webpack的准备工作：1：初始化包环境 ，生成package.json文件记录下载的包 yarn init / npm init2：安装依赖包 yarn add webpack webpack-cli -D D记录在开发环境3：在package.json自定义打包命令， “s...
2021-11-21 23:07:27
99
原创 vue3 表单插件 vee-validate
1：安装校验插件vee-validatenpm i vee-validate@4.0.32：导入校验组件import { Form, Field } from 'vee-validate'3：定义校验规则export default { // 校验account account (value) { if (!value) return '请输入用户名' return true }, password (value) { if (!value)...
2021-11-21 22:56:30
2322
原创 vue的生命周期
Vue生命周期：一个Vue实例从创建到销毁的过程。 Vue组件也可以看成一个Vue实例。Vue实例做了什么： 将模板内容编译，替换掉原有的html节点 1：模板内容：由template选项确定。 2：编译：将模板编译成真实的DOM,渲染/挂载到html中。 3：原有的html节点：由el选项确定。methods的方法不能与data的属性重名 props的属性不能与data的属性重名beforeCreate:...
2021-11-21 22:54:28
102
原创 Vue 数据双向绑定原理
数据劫持: 就是通过Object.defineProperty 去操作 数据的get和set实现一个数据监听器Observer,能够对数据对象的所有属性进行监听new Vue({ data:{ x:0 }}) 监听的就是这个data订阅者模式:一对多,data的一个数据变化, 页面上用到这个数据的地方 都更新var data ={name: "zs"}observe(data)function ob...
2021-11-21 22:54:00
192
原创 vue3新特性
vue3移除API1：$on移除 vue3默认不支持eventBus模式2：filter 语法 vue3直接移除{{msg}} methods替换3：.sync 基于prop双向绑定 v-model
2021-06-03 18:15:49
739
原创 员工管理
/** * 把平铺的数组结构转成树形结构 * * [ * {id:"01", pid:"", "name":"老王" }, * {id:"02", pid:"01", "name":"小张" } * ] * 上面的结构说明： 老王是小张的上级 */export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {..
2021-05-25 17:09:42
99
原创 elementui组件随笔记
常见的vue技术栈组件库移动端：Vant Cube-UI NutUIpc端：element-ui Ant Design of Vue iView小程序：uniapp组件解决问题的方法 1：官网 常见问题 /社区 2：issue 面对面想组建的作者提问 3: 百度elementui组件**表格组件**<el-form ref="form" :model="form" label-width="80px" :rules="rules"&g...
2021-05-25 17:09:06
93
原创 登录模块思路
登录模块1：表单校验elementui的from表单，rules校验 兜底校验2: 发送请求> utils/request.js中获取axios实例 设置基地址 基地址在环境变量中配置 不同环境 基地址不同> 在api/user.js 引入request 写请求数据方法> 在request.js中设置请求拦截器，响应拦截器> 请求拦截器判断vuex的token是否有值，有值则请求头带tokenservice.interceptors.r..
2021-05-25 17:08:43
601
原创 随笔记
vue-element-adminvue-element-admin 是一个后台前端解决方案 基于vue+ elementUi实现本地运行体验$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取$ cd vue-element-admin # 切换到具体目录下$ npm install # 安装所有依赖$ npm run dev # 启动开发调试模式 查看package.json文件的scripts可知晓...
2021-05-25 16:38:31
78
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人