Panda-6-优快云博客

原创后台项目常用的打包方法

把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 19:27:48 1025

原创在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 19:25:49 415

原创 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 19:22:58 367

原创 vue之keep-aliev

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

2022-02-17 19:18:59 162

原创 vue的prop验证

Prop1 . prop 大小写Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'})<blog-post post-title="hello!"></blog-post>2 .单项数据流所有的 p

2022-02-16 21:30:47 238

原创 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 21:30:38 1293

原创 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 19:56:15 242

原创 vue中的过滤器 filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.Vue.filter('global-filter',(val,...args)=>{console.log(`需要过滤的数据是:${val}`)return val + ' 过滤器追加的数据'})var app = new Vue({el:.

2022-02-13 21:31:58 789

原创 vue自定义指令的使用场景

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

2022-02-13 21:28:52 173

原创 vue的自定义指令

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

2022-02-13 21:27:15 146

原创 vue封装自定义组件

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.

2022-02-11 20:15:08 1516

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

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right修饰键：.ctrl.alt.shift.meta<input @keyup.alt.67="clear"><div @click.ctrl="doSomething">Do something</div>与按键别名不同

2022-02-11 20:11:24 183

原创 MVC和MVVM

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})

2022-02-11 20:09:35 110

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

1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<div>{{message.split('').reverse().join('')}}</div><div>{{reverseMessage}}</div>computed: {

2022-02-10 23:13:09 129

原创 Watch深度监听

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p></div><script src="/node_modules/vue/dist/vue.js"></script><script ty

2022-02-10 21:29:30 240

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

一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）1. 父组件parent.vue代码如下：父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren

2022-02-09 21:28:13 717 1

原创虚拟dom

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

2022-02-07 20:06:03 118

原创 vue双向数据绑定原理

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

2022-02-07 19:18:19 103

原创 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 19:09:47 191

原创 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 19:06:19 143

原创 vue常用的指令

一、vue常用指令：v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容同上v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用不能单独使用否则报错模板编译错误v

2022-02-07 18:52:27 407

原创为什么data是一个函数

一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象Vue

2022-02-07 18:49:15 1240

原创 diff 算法是什么

diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点当节点一旦发生改变会给一个变量效率大大提高...

2022-01-28 17:53:04 236

原创 js数据类型判断的方法

js数据类型判断一共有五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1. typeof基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型

2022-01-20 21:36:20 301

原创浅拷贝与深拷贝手写深拷贝

深拷贝与浅拷贝的区别浅拷贝：只复制第一层的浅拷贝深拷贝：深复制则递归复制了所有层级为什么要使用深拷贝我们希望在改变新的数组（对象）的时候，不改变原数组（对象）数组浅拷贝直接遍历var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } return newArray;}var c

2022-01-20 21:24:49 187

原创 JS数组的方法（面试题）

js数组的方法文章目录join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf()forEachmapfilterevery()some()join()就是把数组转换成字符串，默认的是逗号( ，)书写格式：join(" ")，括号里面写字符串 (“要加引号”),var arr = [1,2,3];console.log(arr.join()); // 1

2022-01-20 21:14:20 269

原创 JS数据类型、栈堆存储、typeof、变量计算-类型转换

js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和 BigInt（es10新增）；引用数据类型: Object包含Object、Array、 function、Date、RegExp。备注：基本数据类型，又称值类型。栈堆存储值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入

2022-01-19 21:08:33 102

原创 js的异步与宏任务(marcroTask)和微任务(microTask)

咱们先看道面试题让写出console.log的打印顺序console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);})console.log(400);// 100 400 300 200 201// 为什么300比200先打印

2022-01-19 19:47:09 163

原创 JS》》一招让你明白什么是垃圾回收机制和内存泄露（面试）

垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变

2022-01-15 20:04:25 125

空空如也

空空如也