- 博客(33)
- 收藏
- 关注
RSS订阅原创 面试题总结
iframe的优缺点有哪些？优点：①iframe能够原封不动的把嵌入的网页展现出来；②如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点：①会产生很多页面不易管理；②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上
2021-05-20 21:03:38
184
原创 梦学谷
项目开发流程团队协作/开发规范/统一开发规范命名规范 （方法名，变量名 ……）封装规范 (功能，参数，返回值，如何使用 ……)项目规范（主要模块，功能模块 ，组件，路劲，位置……）开发项目每日进度例会 / 检查进度汇报项目拆分领取任务时间预估梦学谷项目这里是团队开发的，我负责的模块是员工管理，首先就是API的封装，和拦截器的配置...
2021-05-07 08:20:30
157
转载 后台管理小结2
左侧导航栏接口中拿的活数据 //菜单栏信息 async getmenu() { let { data: res } = await muney.getList(); console.log(res); this.menulist = res; },动态切换页面 <el-submenu :index="item.path" v-for="(item, index) in m
2021-05-06 10:22:40
105
原创 后台管理系统小结
涉及到不少知识点，关于vue全家桶及其他都用到了，下面是实现功能或者一些想记录的点1.登录（axios实例和拦截器）2.动态侧边栏和面包屑(this.$router.options.routes,meta路由元的使用)3.iconfont的使用4.页面布局和可复用组件5.element-ui,js-cookie,一些工具方法的使用6.vuex模块化和抽离api接口7.es6/7和webpack的一些语法实现思路登录:获取用户表单信息，提交后给后端接口验证，如果匹配则返回一个token,使用
2021-05-06 10:15:41
144
原创 前端小米商城项目总结（2）
之后使用的是组件化开发4.布局and开发首页 —>页面的布局+基本数据的渲染 ，项目页面的头部和底部是贯穿全文的，主要用头部导航去进行页面切换，内容商品上用router.push去跳转，以及使用一些css3动画登陆注册 —>这里用到的正则匹配商品分类 —>使用导航数据和商品数据的获取渲染 ，难点，导航数据跟商品数据的同步切换,使用变量下边同步切换的形式订单列表，我的收藏页面等等…… —>从接口拿出的数据根据路由传递过来的id拿到想要的数据进行渲染购物车
2021-05-06 08:47:01
1367
1
原创 前端小米商城项目总结（1）
项目确定使用框架首先用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。项目进行前开发规范定制团队开发协作 **项目例会** 封装命名项目规范/统一 规范 命名规范 （方法名，变量名 ……） 封装规范 (功能，参数，返回值，如何使用……) 项目规范（主要模块，功能模块 ，组件，路劲，位置……）开发项目
2021-05-06 08:18:26
1932
转载 vue简版源码解析watcher
function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value = this.get(); //初始化获取当前表达式对应的value}Watcher.prototype =
2021-05-06 08:02:03
93
原创 vue源码解析observer
function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(function(key) {
2021-05-06 08:01:07
77
原创 vue源码解析compile
在这里插入代码片```function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去查找对应的元素 然后保存 this.$el = this.isElementNode(el) ? el : document.querySel
2021-05-06 07:59:57
86
转载 vue源码解析MVVM
function MVVM(options) {//给实例新增一个$options属性,.并且把传递过来的配置进行暂存this.$options = options;this.$options.beforeCreate && this.$options.beforeCreate();//在实例上新增一个_data 保存传递过来的data数据var data = this._data = this.$options.data;//保存this 为了之后使用this的时候保证th
2021-05-06 07:54:57
74
原创 axios的封装
第一步：配置axios首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。因为平常elementUI用的比较多，这里也可以使用自己的UI库。import axios from 'axios'import { Message, Loading } from 'element-ui'const ConfigBaseURL = 'https://localhost:3000/' //默认路径，这里也可以使用env来判断环境let loadingIn
2021-05-05 20:58:15
3947
原创 vuex的核心概念和运行机制
vuex有几个比较核心的概念StateGettersMutationsActionsModulesState用来存放数据mutations设置方法，然后通过this.$store.commit(‘方法名’)引用该方法Vuex提出使用单一状态树，什么是单一状态树单一状态树也可以翻译成单一数据源也就是一个项目只建一个store就可以了，不需要建多个...
2021-05-05 20:49:31
47
原创 vue-router钩子函数和执行顺序
vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。1、全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；beforeEach（）每次路由进入之前执行的函数。afterEach（）每次路由进入之后执行的函数。beforeResolve（）2.5新增const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes,});
2021-05-05 20:40:57
473
原创 $nextTick
官方定义：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM理解：Vue在更新DOM时是异步执行的。当数据发生变化，Vue讲开启一个异步更新队列，视图需要等队列中所有数据变化完成之后再进行统一的更新如果没有 nextTick 更新机制，那么 num每次更新值都会触发视图更新，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略使用场景如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()第一个参
2021-05-05 20:30:47
56
原创 修改数据页面不更新的原因和解决方案
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength例如var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的
2021-05-05 19:59:03
158
原创 v-for中的key值的作用
使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只
2021-05-05 19:47:01
226
原创 v-if和v-for的优先级
1：永远不要将 v-if 和 v-for 同时用在同一个元素上。2：当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级小案例：避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 。将:<ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.i
2021-05-05 19:45:51
218
原创 v-if和v-show的区别
他们的区别是：当条件为真时，没有区别，当条件为假时，v-if是通过创建或者删除DOM节点的方式来实现元素的显示与隐藏v-show则是通过css中的display属性来控制元素显示与隐藏v-if会比较适合数据的筛选和初始的渲染，v-show适合元素的切换v-if使用时会判断是否加载，可以减轻服务器上的压力，在需要的时候才会加载，就是有更高的切换成本，v-show是调整DOM元素中的css的display属性，会使客户端操作更加流畅，对于初始渲染的开销成本会更高。如果在使用时需要非常频繁的切
2021-05-05 19:15:28
82
原创 组件中data为什么是个函数
首先第一个生命是渲染的demo中data只在当前页面挂载的div上的app使用，是用来重复使用的，为了防止data的复用，就将其定义成一个函数1.如果它不是一个函数得话，所有组件都会共享同一个data数据，会造成数据污染，如果有一个组件改变的话，另一个组件也会随之变动2.如果它是一个函数得话，所有组件就不会共享同一个data数据，这样就不会造成数据污染，如果有一个组件改变的话，不会影响其他组件，是由data这个独有得函数返回过来的数据...
2021-05-05 19:07:03
75
原创 vue双向数据绑定原理
mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。要点：1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数compile 解析模板指令，将模板中的变量替换成数据，然
2021-05-05 18:58:34
57
原创 Vue传值
组件时vue.js最强大的功能之一，而组件实例的作用的域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一：父子组件传值1、父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量在子组件中通过props来接收数据，props可以是数组也可以是对象，接受的数据可以直接是props:['属性名']或props:{属性名:数据类型}// 父组件<template> <div id = 'app'> <Child :msg='msg'...
2021-04-25 08:03:30
117
原创 keep-alive v-for为何使用key值 slot插槽和vue及prop验证
keep-alive概念keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。场景用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，希望列表页面可以保留用户的筛选（或选中）状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性
2021-04-19 21:40:11
1288
原创 vue自定义组件、指令、过滤器与指令使用场景、、vue-router和原理及脚手架本地开发跨域请求设置
自定义组件组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树功能组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的.
2021-04-16 08:10:35
303
原创 watch、computed和methods的区别、MVVM和MVC以及vue中的事件修饰符
watch、computed和methods的区别· methods即是方法，封装的功能代码块，调用后执行。在重新渲染的时候每次都会被重新的调用；· computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。· watch也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用watch。...
2021-04-14 19:59:14
109
原创 vue双向数据绑定、虚拟Dom、diff算法、组件通信
双向绑定的原理？数据劫持？mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。几个要点：1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个 ...
2021-04-14 08:09:21
544
4
原创 vue指令丶生命周期及周期内data为什么必须是函数
为何组件的data必须是一个函数1、从声明式渲染说起vue文档在声明式渲染中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象，通过 new Vue 创建的 Vue 实例中，我们直接把data上的message属性通过模板渲染到
2021-04-12 21:28:39
146
原创 从输入URL到页面加载完成
1. 什么是跨域跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去2. 常见的跨域场景所谓的同源是指，域名、协议、端口均为相同。http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.ph
2021-04-08 09:11:35
72
原创 JS常用事件
属性 当以下情况发生时，出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内容 1 2 3 onclick 鼠标点击某个对象 1 2 3 ondblclick 鼠标双击某个对象 1 4 4 onerror 当加载文档或图像时发生某个错误 1
2021-04-07 11:07:15
56
原创 ajax和重绘回流
原生ajax请求步骤//第一步，创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();function CommentAll() {//第二步，注册回调函数xmlHttp.onreadystatechange =callback1;//{// if (xmlHttp.readyState == 4)// if (xmlHttp.status == 200) {// var responseText = xmlHttp.response
2021-04-05 21:32:16
109
原创 Js基础2
字符串（string）常用方法1、charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。strObj.charCodeAt(index)说明：index将被处理字符的从零开始计数的编号。有效值为0到字符串长度减1的数字。如果指定位置没有字符，将返回NaN。例如：var str = "ABC";str.charCodeAt(0);结果：652、fromCharCode方法从一些Unicode字符串中返回一个字符串。String.fromCharCode([code1
2021-04-01 21:40:06
117
原创 响应式布局
响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，
2021-03-31 08:01:16
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人