- 博客(65)
- 收藏
- 关注
RSS订阅原创 css样式重置
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, l
2022-03-10 09:04:48
222
原创 vue修改数据页面不重新渲染
直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data:()
2022-02-18 07:35:20
577
原创 tree-table 树形表格
首先先下载cnpm i vue-table-with-tree-grid --S还需在main.js中导入import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table', TreeTable)html代码<!-- data数据 必须是树形结构 --><!-- columns 设置属性 --><!-- border边框 --><!-- show-
2022-02-17 20:08:10
1950
1
原创 富文本编辑器
下载依赖cnpm i vue-quill-editor --S在main.js中导入//导入vue-quill-editor（富文本编辑器）import VueQuillEditor from 'vue-quill-editor'//导入vue-quill-editor的样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'
2022-02-17 20:07:00
273
原创 echarts的使用
echarts的地址下载cnpm i echarts@4.6.0 --S图表容器首先，在 HTML 中定义有宽度和高度的容器// 准备具有大小的容器<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));
2022-02-17 20:04:54
108
原创 后台管理项目打包
把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.
2022-02-17 20:02:25
201
原创 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 20:00:04
300
原创 slot插槽
插槽插槽分为匿名插槽，具名插槽，作用域插槽匿名插槽子组件内部，设置 ，就可以使用匿名插槽，数据将方式在插槽对应的位置，如果有多个匿名插槽，将会每个插槽都有一份数据渲染匿名插槽其实也是有名字的，为 default ，通常都是不写的// 组件（父） <Card> <p>hello,world</p> </Card>// 组件内部（子） <div class="cardItem"> <h1&
2022-02-17 19:57:32
165
原创 v-for中为何要使用key
一、Key是什么有两种<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />key的概念key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点1.
2022-02-17 19:56:07
88
原创 vue中的keep-alive
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，和 transition 相似，keep-alive 是一个抽象组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
2022-02-17 19:54:44
105
原创 vue-Router实现原理
前端路由概念路由就是用来解析URL以及调用对应的控制器，在不重新请求页面的情况下，更新页面的视图vue-Router两种模式Hash — 默认值，浏览器#以#后的字符称为hashhistory-- 利用URL中的路径（/home）hash与history的切换在router的index.js文件中，有一个new Router(),里面的mode默认为hash模式，可以在这里更改为history模式const router=new VueRouter({ mode:'
2022-02-17 19:51:18
88
原创 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>12345672 .单项数
2022-02-17 07:49:14
1509
原创 图片上传并显示
js图片上传<img :src="userInfo.avatar">// type="file" 代表要上传的是个文件// accept="image/*" 表示input所能接受的文件类型,我们要上传的是一个图片，所以前面是image开头的 * 代表任何类型的图片都可以 特定类型的话 image/.jpg,.png// change事件是在找到图片之后点击确定/打开的时候才触发的<input type="file" accept="image/*" @change="onCha
2022-02-15 13:37:49
908
原创 vue过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,
2022-02-14 08:03:00
237
原创 vue自定义指令的应用场景
使用场景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件1231. 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus>
2022-02-14 07:56:23
112
原创 vue中封装自定义组件
你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？1答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功.
2022-02-14 07:53:26
3845
1
原创 vue中如何自定义指令directive
什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'st
2022-02-14 07:49:45
124
原创 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>1234与按
2022-02-14 07:43:59
140
原创 MVC和MVVM
mvvm 概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。 以vue为例： view 对应 template，vm 对应...
2022-02-14 07:41:54
142
原创 vue中Computed、methods、watch的区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2022-02-11 07:40:10
281
原创 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 t
2022-02-11 07:34:12
369
原创 组件之间的传值
组件之间的通讯1.父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告） 父组件代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-
2022-02-09 21:20:28
166
原创 浏览器回流、重绘
1. 什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。2. 什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。3. 有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变...
2022-02-07 19:20:51
689
原创 vue中的diff算法
什么是diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点 当节点一旦发生改变 会给一个变量 效率大大提高diff算法的两个特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中当状态变更的时候，重新构造一
2022-02-07 19:15:24
612
原创 Vue中的虚拟dom
一、什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作，经过diff算法得出一些需要修改
2022-02-07 19:02:40
130
原创 Vue的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初
2022-02-07 18:56:14
84
原创 v-if与v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；...
2022-02-07 18:50:49
393
原创 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:48:36
60
原创 重写push方法
解决相同路由跳转时，报错const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; if(location.indexOf('?')==-1) { Separator='?'; } location = location + Separator
2022-02-02 10:06:39
363
原创 Vue生命周期
总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的更新后：Updated() 内存和页面都是新的销
2022-02-02 10:05:05
90
原创 组件的data必须是一个函数
实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})vue组件可能会有很多个实例，采用函数返回
2022-02-02 09:59:51
414
原创 js中的继承
实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点简单易于实现，父类的新增的实例与属性子类都能访问缺点可以在子类中增加实例属性，如果要新增加原型属性和方法需要在
2022-01-28 10:24:02
81
原创 null和undefined的区别
相同点在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(nu
2022-01-26 19:51:25
754
原创 for···in和for···of的区别
for···in和for···of的区别：从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从遍历字符串的角度来说，同数组一样。从遍历对象的角度来说，for··
2022-01-26 19:47:36
119
原创 数组排序的方法
1. 冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>
2022-01-25 08:29:30
2183
原创 数组去重的几种方法
场景将数组var arr = [1,1,'true','true',true,true,15,15,false,false,undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1. Es6中的set方法它类似于数组，但是成员的值都是唯一的，没有重复的值所以用来做去重是很好的let arr = [12,43,23,43,68,12];let item = [...new Set(arr)]
2022-01-25 08:25:24
217
原创 JS数组的方法总结
数组的方法总结push()可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数
2022-01-21 08:59:39
70
原创 深拷贝、浅拷贝
深拷贝与浅拷贝的区别浅拷贝：只复制第一层的浅拷贝深拷贝：深复制则递归复制了所有层级为什么要使用深拷贝我们希望在改变新的数组（对象）的时候，不改变原数组（对象）数组浅拷贝直接遍历function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } return newArray;}var copyArray = copy(array);c
2022-01-20 17:10:04
417
原创 js的数据类型、堆栈内存
数据类型基本数据类型（值类型）： Number、String、Boolean、Undefined、Null引用数据类型: Object。包含Object、Array、function、Date、RegExp堆栈内存栈存储栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针堆内存而堆内存主要负责像对象Object这种变量类型的存储案例// 栈堆内存console.log({}=={})conso
2022-01-20 17:03:04
524
原创 js宏任务和微任务
宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await注意：微任务比宏任务的执行时间要早console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);
2022-01-20 16:58:34
47
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人