Panda-6
码龄4年
关注
提问 私信
  • 博客:41,723
    41,723
    总访问量
  • 58
    原创
  • 1,097,447
    排名
  • 18
    粉丝

个人简介:super

IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:海南省
  • 加入CSDN时间: 2020-06-26
博客简介:

好好学习,天天向上!

查看详细资料
个人成就
  • 获得84次点赞
  • 内容获得9次评论
  • 获得142次收藏
创作历程
  • 52篇
    2022年
  • 6篇
    2021年
成就勋章
TA的专栏
  • vue
    10篇
  • 前端
    21篇
  • js
    10篇
  • 打包
    2篇
  • vuex
    1篇
  • axios封装及调用
    1篇
  • rem
    1篇
  • ajax
    1篇
  • 跨域
    1篇
  • gitee上传
    1篇
兴趣领域 设置
  • 编程语言
    javascript
  • 开发工具
    gitidea编辑器
  • 前端
    javascriptcss前端框架
创作活动更多

如何做好一份技术文档?

无论你是技术大神还是初涉此领域的新手,都欢迎分享你的宝贵经验、独到见解与创新方法,为技术传播之路点亮明灯!

342人参与 去创作
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

后台项目常用的打包方法

把main.js文件删除在src文件夹下建两个文件main-prod.js、main-dev.jsmain-prod.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import '@/assets/reset.css'import TreeTable from 'vue-table-with-tree-grid'Vue.com
原创
发布博客 2022.02.17 ·
1004 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

在vue中数据变动视图不更新

直接添加属性的问题<template><div><p v-for="(value,key) in item" :key="key">{{ value }}</p><button @click="addProperty">动态添加新属性</button></div></template><script>export default {data:()=>{ item:{
原创
发布博客 2022.02.17 ·
404 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue之$nextTick

概念在下次 DOM 更新循环结束之后执行延迟回调```什么时候会用到$nextTick有时候我们想要在created中获取到dom元素,就可以使用$nextTick()created(){let that=this;that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素});}如果想要在修改数据后立刻得到更新后的
原创
发布博客 2022.02.17 ·
358 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue之keep-aliev

概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,和 transition 相似,keep-alive 是一个抽象组件,它自身不会渲染成一个 DOM 元素,也不会出现在父组件中作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性参数include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
原创
发布博客 2022.02.17 ·
157 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue的prop验证

Prop1 . prop 大小写Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'})<!-- 父组件中 kebab-case 的 --><blog-post post-title="hello!"></blog-post>2 .单项数据流所有的 p
原创
发布博客 2022.02.16 ·
223 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue中v-for为什么要有key

一、Key是什么开始之前,我们先还原两个实际工作场景当我们在使用v-for时,需要给单元加上key<ul><li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key,手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么,key的作用又是什么?key是给每一个vnode的唯一id,也是di
原创
发布博客 2022.02.16 ·
1268 阅读 ·
0 点赞 ·
0 评论 ·
3 收藏

vue-router基础 传参 跳转

一、Vue路由基础用法:1 .安装npm install vue-router --save2 .main.js中//Vue路由:引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由:引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from
原创
发布博客 2022.02.14 ·
234 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue中的过滤器 filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.Vue.filter('global-filter',(val,...args)=>{console.log(`需要过滤的数据是:${val}`)return val + ' 过滤器追加的数据'})var app = new Vue({el:.
原创
发布博客 2022.02.13 ·
777 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue自定义指令的使用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的 DOM 变动,还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时inserted: function (el) {// 聚焦元素el.focus()}})<input v-focus>2 下拉菜单点击
原创
发布博客 2022.02.13 ·
171 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

vue的自定义指令

一、 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数 `v-xxx`// -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'
原创
发布博客 2022.02.13 ·
136 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue封装自定义组件

你封装过组件吗??说一下组件封装????你在项目中是如何封装组件的?????…以上问题是面试官,最常问到的问题?那么你应该如何回答呢?答: 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组.
原创
发布博客 2022.02.11 ·
1485 阅读 ·
1 点赞 ·
0 评论 ·
5 收藏

vue的修饰符都有哪些(面试题)

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right修饰键:.ctrl.alt.shift.meta<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>与按键别名不同
原创
发布博客 2022.02.11 ·
180 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

MVC和MVVM

mvvm概念:MVVM是 Model-View-ViewModel 的缩写,分别对应着:数据,视图,视图模型。Model是我们应用中的数据模型,View是我们的UI视图层,通过ViewModle,可以把我们Modle中的数据映射到View视图上,同时,在View层修改了一些数据,也会反应更新我们的Modle。简单理解就是双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。以vue为例:view 对应 template,vm 对应 new Vue({…})
原创
发布博客 2022.02.11 ·
108 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

在vue中Computed,Methods,Watch三者的区别

1.计算属性Computed模板内使用js表达式是很方便的,设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
原创
发布博客 2022.02.10 ·
125 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Watch深度监听

watch可以让我们监控一个值的变化,从而做出相应的反应。 <div id="app"> 用户名:<input type="text" v-model='name'> <p>你的名字是:{{name}}</p></div><!-- 引入vue --><script src="/node_modules/vue/dist/vue.js"></script><script ty
原创
发布博客 2022.02.10 ·
231 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue2 父传子、子传父、兄弟通信

一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)1. 父组件parent.vue代码如下:父传子在父组件的子组件标签上绑定一个属性,挂载要传输的变量。在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren
原创
发布博客 2022.02.09 ·
699 阅读 ·
1 点赞 ·
1 评论 ·
2 收藏

虚拟dom

概念通过js创建一个Object对象来模拟真实DOM结构,这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,通过vue中的render()函数把虚拟dom编译成真实dom,在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM创建真实DOM成本比较高,如果用 js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的
原创
发布博客 2022.02.07 ·
113 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步:compile(模板解析器)解析模板指令,将模板中的变量替换成数据,然后.
原创
发布博客 2022.02.07 ·
98 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Vue生命周期执行过程

简单粗暴的答案直接走起:答: 总共分为8个阶段。创建前/后,载入前/后,更新前/后,销毁前/后。创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,$el还没有。载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.m
原创
发布博客 2022.02.07 ·
187 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

v-if 和v-show 的区别

一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的三、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗例如:v-if:在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据刚开始没有值,此时我们页面也会进行渲染空数据就会报错。我们可以
原创
发布博客 2022.02.07 ·
122 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏
加载更多