Vue
火腿肠烧烤大赛冠军
F=-F
展开
-
Vue双向绑定监听哪些数据
先说一下结论:所有双向绑定的数据只有在data(){return{}}中声明的/$set设置的数据才会被双向绑定抓取监听其余数据均不可以script标签下声明(没有监听)函数中声明(没有监听)直接新增属性(没有监听)通过$set实现监听(可以监听)...原创 2021-08-31 14:55:19 · 126 阅读 · 0 评论 -
Vue原理-Vue-Router
网页Url组成部分hash特点hash路由修改hash的方式:监听、修改hash值:history路由原创 2021-08-23 21:52:17 · 82 阅读 · 1 评论 -
Vue原理-组件渲染/更新过程
总体渲染过程组件初次渲染模板在双向绑定监听只监听用到的值更新过程异步渲染原创 2021-08-23 20:28:23 · 187 阅读 · 0 评论 -
Vue原理-模板编译
模板编译with语法编译模板(其实都差不多就是变成js函数)vue中变量语义:插值:等同于h函数 返回vnode属性和动态属性:条件:事件:v-model:总结使用render代替template原创 2021-08-22 20:10:36 · 72 阅读 · 0 评论 -
Vue原理-虚拟DOM和diff算法
vdom和diffvdomjs模拟DOMdiff算法diff算法概述比较方式:diff源码解读处理DOM返回vnode(包含老dom)patch函数path如果是空的就创建一个新的再关联一下如果tag和key都相同则这层不做比较:(都不传key也是相等的undefined)不同直接删除重建:pathVnode设置生命周期通Vue:同时设置新elm为旧的elm(告诉它该和谁比对)判断时children还是test:text对比:原创 2021-08-22 19:04:35 · 271 阅读 · 0 评论 -
Vue原理-双向绑定
组件化基础数据驱动视图MVVMVue响应式proxyobject.defineproperyt双向绑定的实现准备data:监听对象属性:重新定义属性,监听:触发更新:object.definePrototype的缺点监听数组变化由于object.defineprototype无法监听数组重新定义数组原型当这个类型是数组是抓取重新操作:...原创 2021-08-22 17:34:12 · 87 阅读 · 0 评论 -
Vue基础知识-高级特性使用
vue高级特性自定义v-model子组件:父组件:$nextTick界面更新了 但是异步渲染导致获取的childNode长度是上一次的长度更新之后获取则长度正常了slotslot基本使用父组件子组件:作用域插槽(父组件使用子组件的内容)父组件:子组件:具名插槽父组件:子组件:动态组件然后记得在data中创建nexttickname变量来接收组件的名称异步组件keep-alive同时还有一个白名单一个黑名单一个自己的生命周期m原创 2021-08-21 20:01:18 · 105 阅读 · 0 评论 -
Vue基础知识-基础使用
computed与和watchcomputed与watch的区别computed:computed的缓存是指 data不变就不会重新计算computed一个v-model的值需要get和setwatch:监听引用类型要深度监听(deep:true)拿不到oldVal问题(指针都是指向一个地址,所以拿不到。oldVal和val一样)class和style动态使用class:style注意是驼峰写法:条件渲染v-show为display:nonev-if只有一个节点循环原创 2021-08-21 15:58:20 · 152 阅读 · 0 评论 -
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘)
next()放行next(’/XXX’)无限拦截beforeEach((to, from, next) => { beforeEach(('/XXX', from, next) => { beforeEach(('/XXX', from, next) => { beforeEach(('/XXX', from, next) => { beforeEac... // 一直循环下去...... , 因为我们没有使用 next() 放行原创 2021-06-18 10:45:47 · 1774 阅读 · 0 评论 -
Vue接口封装
首先根据接口写好对应页面的请求内容如图尽量保证js文件名称与页面文件名称相同(易于查找)根据文件目录动态引入/导出接口提高便捷性/** * 自动引入当前文件夹下所有module * require.context(directory, useSubdirectories = false, regExp = /^.//); * @param {String} directory 读取文件的路径 * @param {Boolean} directory 匹配文件的正则表达式 * @param原创 2021-05-12 18:01:24 · 626 阅读 · 4 评论 -
Vue高德地图api使用指南(动态渲染信息窗体)
项目中用到了高德地图API,写完后感觉功能/结构都很散乱,自己整理一下留以备用地图动态渲染样式(卡片内容可自定义)地图API的引入直接采用古老的方式index.heml中引入jsindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-05-06 13:55:28 · 1312 阅读 · 1 评论 -
npm包发布流程
1.写好自己的代码2.代码根目录npm init3.按照提示完成类似以下内容的输入package name: (test-projects)version: (1.0.0)description: this is my test-project for npm publishentry point: (index.js)test command: hello world.git repository: (https://github.com/loushengyue/test-projec原创 2021-04-13 16:38:13 · 165 阅读 · 0 评论 -
vue的深度监听(对象数组同理)
昨天在做项目时遇到了一个问题在Vue中监听obj.name时新增了一个属性 但是发现属性并没有变化后来查询了官方文档发现Vue不允许动态添加prototype来执行深度监听如下:<template> <div class="about"> <h1>{{dataList.name}}</h1> <h1>{{dataList.id}}</h1> <h1>{{dataList.type}}&l原创 2021-04-13 14:11:58 · 402 阅读 · 0 评论 -
js补零操作
formatDate(date) { return `${date.getFullYear().toString().padStart(2,'0')}-${ (date.getMonth() + 1).toString().padStart(2,'0') }-${date.getDate().toString().padStart(2,'0')} ${date.getHours().toString().padStart(2,'0')}:${date.getM...原创 2021-04-07 09:43:20 · 375 阅读 · 0 评论 -
Vue中使用hasOwnProperty
Object.prototype.hasOwnProperty.call(cardItem.fields.assignee, ‘avatarUrls’原创 2021-03-30 10:13:07 · 2040 阅读 · 0 评论 -
JS实现localstorage搜索历史记录
由于localstorage不支持数组所以需要parse、stringfy来处理 let id = '123'; let history = []; localStorage.getItem("searchHistory")?history= JSON.parse(localStorage.getItem("searchHistory")) :history=[]; console.log(history); if(history.length !原创 2021-03-29 10:28:16 · 579 阅读 · 0 评论 -
javascript执行顺序轻解
很久之前就看到javascript的宏任务和微任务但是一直都没有详细了解过,今天无聊索性就整理一下吧~首先明确一点:javascript是单线程语言也就是一条高速公路,所有的多线程都是模拟出来的。javascript的事件循环机制同步任务优先执行,执行结束后执行异步任务,然后在执行下一个同步周而复始。setTimeout1.仅仅是在所规定的时间后将其任务放入队列,依旧会等待同步任务执行2.HTML标准定时器内最低是4毫秒,写0也是4,类似字体大小最小为12pxsetInterval1.基本原创 2021-01-18 22:34:15 · 164 阅读 · 0 评论 -
Vue路由传参方式
命名路由发送参数:this.$router.push({ name: 'news', params: { userId: 123 }})接收参数:{{this.$route.params.userId}}查询参数发送参数:this.$router.push({ path: '/news', query: { userId: 123 }});接收参数:{{this.$route.query.userId}}二者区别:1.命名路由搭配params,刷新页面参数会丢失2.查询参数搭原创 2021-01-13 23:03:13 · 128 阅读 · 0 评论 -
vue中时间戳转时间
在vue中把时间戳转成时间,(如果是10位数需要乘1000,如果13位就不用)timestampToTime(value) {let date = new Date(value);let y = date.getFullYear(); // 年let MM = date.getMonth() + 1; // 月MM = MM < 10 ? (‘0’ + MM) : MM;let d = date.getDate(); // 日d = d < 10 ? (‘0’ + d) : d;原创 2020-12-24 17:01:39 · 929 阅读 · 1 评论 -
socket请求及心跳检测
<script>export default { data() { return { websock: null,//建立的连接 charId: s.uuid(),//随机生成的UUID lockReconnect: false,//是否真正建立连接 timeout: 28*1000,//30秒一次心跳 timeoutObj: null,//心跳心跳倒原创 2020-12-24 13:41:06 · 962 阅读 · 0 评论 -
路由的生命周期
总结路由的生命周期(背下来):会触发离开的钩子 beforeRouteLeave如果进入到新的页面 beforeEachbeforeEnter 进到路由的配置中beforeRouteEnter 组件进入时的钩子解析完成 beforeResolveafterEach 当前进入完毕当属性变化时 并没有重新加载组件 会触发beforeRouteUpdate方法组件渲染完成后 会调用当前beforeRouteEnter回调方法原创 2020-12-14 14:14:27 · 1081 阅读 · 0 评论 -
Vuex小白理解
vuex包括:1.state :::::::存储状态2.mutation 用store.commit来改变state的存储状态3.action :::::actions像一个装饰器,提交mutation,而不是直接变更状态。(actions可以包含任何异步操作)4.getters :::相当于state的计算属性5.modules 派生出自己的模块 使用时候根据不同的小仓库来调用其实无论是vue还是react其实还是提倡单向数据流去管理状态vue为UI控件提供了双向原创 2020-12-11 16:44:44 · 186 阅读 · 0 评论 -
keep-alive数据刷新问题
有时候实时数据需要刷新但由于缓存会显示之前的数据 用户点击之后会报错:处理方式如下:(1)在vuex中设置状态,动态绑定 include 值,在登录的时候缓存需要缓存的组件,在退出的时候,清除需要刷新的组件(效果很理想,也顺带解决了加载数据时,数据闪现的情况) 或者exclude写入不缓存的(2)放在actived中获取数据(3)tips:beforeRouteEnter --> created --> mounted --> activated --> deactiv原创 2020-12-11 10:22:56 · 1847 阅读 · 0 评论 -
computed与watch得区别
1.如果一个数据依赖于其他数据的简易计算处理的,那么使用computed比较合适。2.如果需要在某个数据变化时做一些事情,使用watch来观察这个数据变化原创 2020-12-03 16:29:54 · 112 阅读 · 0 评论 -
易理解的Promise封装
//promise英文中叫做承诺//成功resolve 失败reject 正在过程中 pending 没人接的时候var obj = { status: '', value: ''}function Apromise(fn) { obj.status = 'pending' obj.value = '' function resolve(value) { if (obj.status === 'pending') {原创 2020-12-03 09:46:30 · 182 阅读 · 0 评论 -
最全Vue双向绑定及其讲解 一步一步debug包教包会
实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()【defineProperty】来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。就必须要实现以下几点:1.监听器Observer:监听变化2.解析器Compile: 根据指令模板替换数据,以及绑定相应的更新函数3.Watcher: 订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数4.mvvm入口函数,整.原创 2020-12-02 20:16:15 · 195 阅读 · 1 评论 -
搞定前端面试官-Vue的生命周期(包过)
生命周期概念:从创建到销毁的整个过程经历:开始创建、初始化数据、编译模板、挂载Dom、渲染、更新渲染、销毁。每一个组件或者实例都会经历一个完整的生命周期:初始化、运行中、销毁 。正餐:(为方便阅读已对重点进行加粗处理)1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作2.挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使原创 2020-10-15 14:06:33 · 541 阅读 · 0 评论 -
Vue常用易忘记API
vue presistedstate 将vuex中数据存入localstorage (避免刷新后消失)原创 2020-11-27 09:41:12 · 121 阅读 · 0 评论 -
vuex数据持久化使用(防刷新)-vue presistedstate的使用
Vuex数据持久化转载 2020-11-24 11:21:25 · 705 阅读 · 0 评论 -
promise深究
想要了解promise就要先了解为什么要用promise以及他解决了什么问题同步异步就不讲了 从之前解决异步的方法讲起即(回调地狱)前人如何解决异步问题from红宝书 这应该是比较权威的讲解了这个是一个书中的案例 拿来说最不错了 为了能让之后的程序精准的在所需要值计算出来之后立即执行就把他放在这个函数的回调函数中去这样你等我 我等你 一层又一层 即形成了所熟知的回调地狱之前处理错误的方式 写好异步回调函数 根据try catch捕捉,异步操作返回值存在时间太短 ,successCallbac原创 2020-11-19 11:47:17 · 199 阅读 · 0 评论 -
Vue中key的作用
在v-if中Vue正常节点类型相同就不会重新渲染元素(比如你注册之后转到登录不需要再次输入账号密码)加key之后会重新渲染dom(包括生命周期)在v-for中形成唯一标识如下例子清晰明了:没有key的时候:像插入f需要将c变成f d变成c。。。。。有key的时候:可以直接插入G...原创 2020-11-18 11:17:57 · 130 阅读 · 0 评论 -
搞定前端面试官- 来,你说一下闭包
个人理解:父函数的子函数被夫函数返回,无论什么时候他都可以访问父函数内的变量。(即使父函数被销毁)ps:特点:外部可以访问函数内部变量。可以保存局部变量。可以避免使用全局变量,防止全局变量污染。ps:缺点:内存泄漏 每运行一次父函数都会生成一个新的闭包。其他人的理解口诀:闭包找到的是同一地址中父级函数中对应变量最终的值。...原创 2020-11-05 20:00:25 · 200 阅读 · 0 评论 -
Vue中如何使用console.log打印
1.使用window.console.log()2.更改配置:原创 2020-11-09 09:26:21 · 7413 阅读 · 1 评论 -
新手能看懂的async/await
一些初学者的理解欢迎大佬阅读指正一、async与await的特点**(1)内置执行器**async函数的执行,与普通函数一模一样,只要一行。asyncReadFile();(2)更好的语义。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。(3)更广的适用性。async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。(4)返回值是 Promise原创 2020-11-07 15:06:07 · 444 阅读 · 0 评论 -
前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
px像素 固定单位%相对单位 相对于最近的父元素emem:大小相对于font-size例:font-size=100 10em =1000默认 1em=16px,自己有字号大小就相对于自己如果没有就往上找由于fontsize经常发生改动 所以项目中并不常用rem(root em)rem:相对于根元素(html)的字号大小默认 1rem=16px,依旧相对于像素所以需要找一个根据用户界面可变的单位vw(viewport width)vw:视口宽度,相对于窗口(视口)满屏原创 2020-11-06 17:35:34 · 2627 阅读 · 1 评论 -
开发中的bug-[Vue warn]: Unknown custom element: <mycom1> - did you register the component correctly? For
组件是不是写错了如果是驼峰命名用的时候需要改成中华线例如:myName用的时候需要写成my-name原创 2020-11-05 20:38:21 · 252 阅读 · 0 评论 -
JS中的require、import、default、export
刚开始学的时候经常弄混总结一下:懒人:(1) require(导入)是Commonjs的规范与module.exports(导出)搭配使用.(2) import(导入)是es6为js模块化提出的新的语法与export(导出)搭配使用.(3) 一个文件/模块中只能有一个export default且一次只能导出一个,但可以有很多export和import.并且通过export方式导出,在导入时要加{ },export default则不需要{ }(4) commonjs运行时加载es6是编译时输出原创 2020-11-04 19:41:50 · 974 阅读 · 0 评论 -
Vue手把手教你写Modal
原理:就是引用一个子组件,用到slot 然后在样式中加入动态效果父组件传值 通过所传内容判断组件样式。需要用modal的父组件:<template > <div> 我是商品页面 <modal title="提示" sureText="查看购物车" btnType="1" modalType="middle" v-bind:showModal="showModal" v-on:su原创 2020-11-04 17:56:03 · 1009 阅读 · 0 评论 -
Vue插槽详解样例
聪明人一看就懂系列:父组件:<template > <div> <child> <template v-slot:haha>hello</template> <!-- <template>你好</template> --> <template slot-scope="scope"> <!-- 获取的值只能在组件中使用 -->原创 2020-11-04 16:39:49 · 497 阅读 · 1 评论 -
前端开发数前期据模拟的三种方法
一、本地创建JSON在本地创建json然后引用 类似:{ "status": 0, "data": { "id": 12, "username": "admin", "email": "admin@51purse.com", "phone": null, "role": 0, "createTime": 1479048325000, "updateTime": 1479048325000 }}然后通过axios正常访问:最后需要改原创 2020-11-03 20:12:55 · 148 阅读 · 0 评论