09 2020 档案

摘要:vue脚手架配置 在根目录创建vue.config.js 在module.exports中配置devserver的内容 devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target: 阅读全文
posted @ 2020-09-28 21:18 林9九 阅读(214) 评论(0) 推荐(0) 编辑
摘要:#mvvm是双向的 mvvm是Model-View-ViewModel的缩写,M代表:数据,V代表:视图,VM代表:视图模型.model数据模型,view是ui视图,通过viewModel,可以把model的数据反射到view视图上,同时,view修改了数据,也会更新到我们的model 三者的关系: 阅读全文
posted @ 2020-09-28 21:07 林9九 阅读(104) 评论(0) 推荐(0) 编辑
摘要:Methds(梅则死):方法属性 调用一次执行一次 不会缓存; Computed:计算属性 结果会缓存 当依赖值改变时重新计算 Watch:监听属性 结果不会缓存 一个值的改变需要另一个值的改变而改变 阅读全文
posted @ 2020-09-28 20:47 林9九 阅读(125) 评论(0) 推荐(0) 编辑
摘要:keep-alive是什么 是vue的内置组件,能在组件切换过程中将状态保留在内存中,取消组件的销毁函数,防止重复渲染Dom. 当包裹时,会缓存不活动的组件实例,而不是销毁他们 使用组件后即可使用 avtivated()和deactivated()这两个生命周期函数 应用场景 当我们购买商品的时候, 阅读全文
posted @ 2020-09-28 20:44 林9九 阅读(112) 评论(0) 推荐(0) 编辑
摘要:vue3.0和2.0的区别 vue中mixins(混入)的使用 vue中的provide和inject vue自定义过滤器 vue自定义指令 Vue Virtual Dom 和 Diff原理(极简版) vue组件封装 vue中的修饰符 vue双向数据绑定 vue的常用指令 v-if与v-show的区 阅读全文
posted @ 2020-09-28 20:02 林9九 阅读(156) 评论(0) 推荐(0) 编辑
摘要:1.新增摇树优化 把没用的丢掉有用的合并打包 2.默认进行懒观察 在2.0版本中不管数据多大,都会在一开始创建其为观察者,当文件庞大时,对页面的性能会有显著的影响,在3.0版本中他只会对渲染初始可见的数据创建观察者,使3.0的观察者更为高效 3.更准确的变更通知 在2.0中使用vue.set给对象新 阅读全文
posted @ 2020-09-28 08:32 林9九 阅读(2193) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2020-09-24 11:20 林9九 阅读(212) 评论(0) 推荐(0) 编辑
摘要:电商后台管理系统 简单介绍项目 该项目主要是一个电商后台管理系统,主要分为六个大的模块分别为用户的登录退出, 用户管理,权限管理,商品管理,和订单管理以及数据统计这六个模块 运用到的技术栈 有Vue+VueRouter+Element-UI和Axios以即Echarts 项目描述 这个vue项目是利 阅读全文
posted @ 2020-09-23 22:00 林9九 阅读(580) 评论(0) 推荐(0) 编辑
摘要:一、JavaScript: 1. setTimeOut准时吗? 不一定准时,他只是把时间到了放进时间队列里 2. JS快速打乱一个数组 先上代码 sort + Math.random() var arr=[1,2,3,4,,5,6,7,8,9,10]; arr.sort(function(){ re 阅读全文
posted @ 2020-09-23 17:06 林9九 阅读(173) 评论(0) 推荐(0) 编辑
摘要:在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择 你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。 我们可用创建一个文件用来放混入其他组件的内容 如何混入组件呢?我们需要在组件内import 导 阅读全文
posted @ 2020-09-22 21:57 林9九 阅读(406) 评论(0) 推荐(0) 编辑
摘要:首先需要两个盒子 一个盒子是展示盒子里面放整张图片,在这个盒子里还需要套一个半透明的盒子 跟着鼠标移动来预览放大的区域,当然还需要一个用来展现放大镜效果的盒子 无非原理就是把整张照片的一部分放展示在盒子内 其他部分在盒子外隐藏 放大的区域要按照一定的比例展示出来 实现这个效果的难点有这几个 1.鼠标 阅读全文
posted @ 2020-09-22 21:36 林9九 阅读(446) 评论(0) 推荐(0) 编辑
摘要:简单了解provide和inject provide 和 inject 主要为高阶插件。并不推荐直接用于应用程序代码中。 provide 和 inject 因为组件引入的层次过多,子孙想要获取祖先组件的内容不仅麻烦代码结构也容易混乱,这时候我们需要使用provide 和 inject provide 阅读全文
posted @ 2020-09-22 20:42 林9九 阅读(205) 评论(0) 推荐(0) 编辑
摘要:大多项目中都要用到过滤器 过滤器可以实现数据的筛选、过滤、格式化。 虽然vue提供了很多不错的过滤器,但有时候还是不够,但是vue给我们提供了自定义过滤器 我们可以利用管道 符号 或者双花括号和v-bind来完成过滤 我们可以在组件中定义局部过滤器 或者在创建vue实例前在main.js注册全局过滤 阅读全文
posted @ 2020-09-21 21:53 林9九 阅读(143) 评论(0) 推荐(0) 编辑
摘要:除了vue内置的指令比如:v-model和v-show,vue也可以注册自定义指令,就如我们这个项目中要经常使用这个功能,就要考虑使用自定义指令了, 当然自定义指令有两种 全局自定义指令 和 组件内指令 全局指令的方法名是directive 而组件指令要在尾部加一个s 还有在组件内使用时 头部一定加 阅读全文
posted @ 2020-09-21 21:19 林9九 阅读(166) 评论(0) 推荐(0) 编辑
摘要:如果我这个页面可以多次用到这个东西 我会使用vue自定义指令 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 我在项目中比较常用的有 还可以使用全局自定义指令 防抖和节流 输入框自动聚焦 // 注册一个全局自定义指令 `v-focus` Vue.direct 阅读全文
posted @ 2020-09-20 22:00 林9九 阅读(169) 评论(0) 推荐(0) 编辑
摘要:过滤器就是一个数据经过了这个过滤器之后出来另一样东西。 vue中的过滤器分为两种:局部过滤器和全局过滤器 全局过滤器 // global-filter是过滤器名称 // 函数第一个参数是需要过滤的数据. // 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter', 阅读全文
posted @ 2020-09-20 21:39 林9九 阅读(132) 评论(0) 推荐(0) 编辑
摘要:vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图: 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一 阅读全文
posted @ 2020-09-20 21:03 林9九 阅读(196) 评论(0) 推荐(0) 编辑
摘要:vue组件封装 阅读全文
posted @ 2020-09-18 08:10 林9九 阅读(143) 评论(0) 推荐(0) 编辑
摘要:自定义指令 使用Vue.directive()定义全局的指令v-focus 参数1 :指令的名称,注意,在定义的时候,名称前面不需要加 v- 前缀,但在调用的时候,必须在指令名称前加上 v- 前缀来进行调用 参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关 阅读全文
posted @ 2020-09-17 21:34 林9九 阅读(422) 评论(0) 推荐(0) 编辑
摘要:事件修饰符 1.stop 阻止事件继续传播 2.prevent阻止标签默认行为 3.captrue 事件捕获行为 元素自身触发的事件先在此处理,然后交给内部元素进行处理 4.self忽略了事件冒泡和事件捕获的影响只有直接作用在该元素上的事件才会被调用 5.once事件只触发一次 6.passive 阅读全文
posted @ 2020-09-17 21:25 林9九 阅读(139) 评论(0) 推荐(0) 编辑
摘要:面试回答 vue.js是采用数据劫持结合,发布订阅的模式,利用object.definePropety()的settr和getter,在数据发生改变时第一时间通知订阅者,从而触发相应的监听回调来渲染视图.也就是说数据和视图同步,数据改变视图也会改变,当然视图改变数据也会改变 核心 双向数据绑定的核心 阅读全文
posted @ 2020-09-16 21:55 林9九 阅读(258) 评论(0) 推荐(0) 编辑
摘要:1.v-model 多用于表单和input框的元素实现双向数据绑定 2.v-on:click:给标签绑定函数,就是给标签一个点击事件,点击后触发时间,函数需要写在methods里面,也可以将v-on:简化为@我常用的就是@click主要是简单 3.v-bind:动态绑定,及时对页面的数据进行更改,当 阅读全文
posted @ 2020-09-16 21:08 林9九 阅读(164) 评论(0) 推荐(0) 编辑
摘要:v-if与v-show的区别 相同点 都可以控制dom元素的显示和隐藏 不同点 v-if:是使整个dom元素显示或隐藏 v-show:是借助display的none和block实现内容的显示隐藏 场景的使用 v-show:更适合频繁的显示隐藏 v-if:适合在不影响布局的情况下显示隐藏 项目中的案例 阅读全文
posted @ 2020-09-15 21:32 林9九 阅读(138) 评论(0) 推荐(0) 编辑
摘要:Vue生命周期的执行过程(极简版) 1.创建vue实例 2.在创建实例的时候,执行了init(一奶他),init初始化的时候调用了beforeCreate钩子函数 3.同时监听了data的数据,初始化了vue内部事件,进行属性和方法的计算 4.然后调用Create钩子函数,axios大多会在这个周期 阅读全文
posted @ 2020-09-15 21:19 林9九 阅读(236) 评论(0) 推荐(0) 编辑
摘要:一、前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、 阅读全文
posted @ 2020-09-14 23:48 林9九 阅读(202) 评论(0) 推荐(0) 编辑
摘要:#项目概述 根据不同的应用场景,电商系统一般都提供了pc端,移动app,移动web,微信小程序多种终端访问方式,这些都是给普通用户使用的但是我们做的是pc后台管理系统,这是给我们商城后台管理员来使用的,管理员可以基于后台管理系统来管理商品的上架下架,分类,以即商品的详细数据 项目的功能有: 项目使用 阅读全文
posted @ 2020-09-14 15:21 林9九 阅读(433) 评论(0) 推荐(0) 编辑
摘要:js事件监听 事件监听的定义 在Javascript中,浏览器一般分为两大类: ① 基于IE内核的浏览器(版本号小于9的IE浏览器) ② 基于W3C内核的浏览器(版本号大于9的IE浏览器、Firefox、Google等浏览器) 基本语法:基于IE内核浏览器 dom对象.attachEvent(typ 阅读全文
posted @ 2020-09-13 22:00 林9九 阅读(175) 评论(0) 推荐(0) 编辑
摘要:#js垃圾回收和内存泄漏 js垃圾回收 Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 1.标记清除(常用) 工作原理:是当变量进入环境时,将这个变量标记为“进入环境”。当变量离开环境时,则将其标记为“离开环境”。标记“离开环境”的就回收内存。 工作流程: 1.垃圾回收器在运 阅读全文
posted @ 2020-09-13 21:21 林9九 阅读(141) 评论(0) 推荐(0) 编辑
摘要:js设计模式 什么是设计模式 是一套被反复使用,代码经验的总结,简单来说就是用套路来做事情 有三个特点 1.模式有效解决方法 2.模式容易复用 3.模式功能强大 js常见的几种设计模式 1.单例模式 2.工厂模式 3.适配模式 4.外观模式 但是我平时常用的只有两种 单例模式 单例模式是软件设计中较 阅读全文
posted @ 2020-09-13 20:51 林9九 阅读(153) 评论(0) 推荐(0) 编辑
摘要:css3动画 css3里面的animation属性非常强大,但是自己用的比较少,趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习 css3动画用来做什么 主要用来做一些页面的美化,和一些前端简单的动画比如:旋转,变形,若影若现,逐帧动画和x轴y轴的一些直线动画 阅读全文
posted @ 2020-09-13 20:21 林9九 阅读(113) 评论(0) 推荐(0) 编辑
摘要:清除浮动 有了浮动可以让我们更加方便的布局. 但是浮动也可以带来一些负作用 为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动. 清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的. 正所谓万变不离其宗 解决方法第一种 <<<html代码 阅读全文
posted @ 2020-09-11 14:40 林9九 阅读(101) 评论(0) 推荐(0) 编辑
摘要:水平垂直居中 前端常用的盒子布局需要了解 接下来我给大家介绍三种 1.margin和定位 <<<html <div class="box"> <div class="content"></div> </div> <<<js .box{ width: 200px; height: 200px; bac 阅读全文
posted @ 2020-09-11 14:08 林9九 阅读(121) 评论(0) 推荐(0) 编辑
摘要:两,三栏布局 两栏布局–左边定宽,右边自适应: 主要用于 我放一张图你们就明白了 两栏布局代码实现 1.第一种使用margin和浮动实现 代码如下>> <<<html:部分 <div> <h3>宋希</h3> <div class="box"> <div class="left"> <img src 阅读全文
posted @ 2020-09-11 11:38 林9九 阅读(121) 评论(0) 推荐(0) 编辑
摘要:flex 布局教程 flex可以实现垂直和主轴的一些操作简单方便,主要通过一些属性来实现 flex有以下六个属性 flex-direction属性: 属性决定主轴的方向(即项目的排列方向) row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 colu 阅读全文
posted @ 2020-09-11 10:37 林9九 阅读(141) 评论(0) 推荐(0) 编辑
摘要:标准盒模型和怪异盒模型的区别 无非就是一些很小的差距,光看别人的文章难理解,自己动手一写就会 1.标准盒模型(box-sizing:content-box//默认属性 ): 标准盒模型的高度和宽度是和padding和border分开算的,说简单点:比如width设置的100,那他就是100里面什么也 阅读全文
posted @ 2020-09-11 10:29 林9九 阅读(299) 评论(0) 推荐(0) 编辑
摘要:js中数组扁平化处理 经典面试题,项目中可以用到js数组操作的地方很多,js数组扁平化是其中一种 什么是数组扁平化? 数组扁平化就是将一个多维数组转换为一个一维数组 实现的基本方式 1、对数组的每一项进行遍历。 2、判断该项是否是数组。 3、如果该项不是数组则将其直接放进新数组。 4、是数组则回到1 阅读全文
posted @ 2020-09-11 00:22 林9九 阅读(349) 评论(0) 推荐(0) 编辑
摘要:js事件委托 经典面试题 事件委托的概念: 事件委托就是把A的事交给B去干,在js中事件委托也称为事件代理,事件委托就是利用冒泡事件,只把事情交给一个去做,就可以管理一种类型的所有事件,如果子元素拦截了冒泡,那么事件委托也无法实现 事件委托的好处: 提高性能 事件委托的案例: 使用事件委托实现移入加 阅读全文
posted @ 2020-09-11 00:08 林9九 阅读(120) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示