Vue2.0学习小结

关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 为什么要有这个关系? 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步:定义混合 const mixData={ data(){...} }, const mixMethods= { methods:{...} } 第二步:使用混入 (1).全局混入:Vue.mixin(xxx) (2).局部混入:mixins:[xxx'] 插件 功能:用于增强vue 本质:包含install方法的一个对象,install的第一个参数是vue,第二个以后的参数是插件使用者传递的数据。 定义插件: 对象.install = function (Vue, options) { //1....

Apr 2, 2022 · 6 min · Archai

ES6之Promise用法小结

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值。其目的主要是解决以往回调中嵌套回调的"嵌套地狱"问题,使代码可读性更好,更美观! 基本用法 对于一个标准的Prommise,其基本写法为: new Promise(function (resolve, reject) { //do something... //success resolve('success') //fail & reject // reject('rejected') *resolve和reject只能出现一个 }).then( function (value) { //if succeed,do something... }, function (reason) { //if fail & reject,do something... } ) 如果采用ES6的箭头函数写法,则为: new Promise((resolve, reject) => { resolve('success') //reject('rejected') }).then( value => {}, reason => {} ) 始终牢记,前一个Promise()必须是在后面一个.then()中处理, 如果前一个Promsie()中没有改变状态,即没有resolve()/reject()方法,后面的.then就不会针对这个Promsie()处理 Promise错误处理 Promise()中的错误处理有两种方式,.then()和.catch() .then() 特点: “一一对应”,即一个then()对应处理上一个Promise 用法: new Promise((resolve, reject) => { // 12+p // throw new Error('fail') reject('失败') })....

Aug 18, 2020 · 3 min · Archai

Ajax学习小结

学习地址:https://www.bilibili.com/video/BV1WC4y1b78y,主要通过express的简单功能来搭建本地的服务,进而更好地学习Ajax 发送Ajax请求的方式 原生Ajax //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化 xhr.open([type], [url])//xhr.open("GET","https://www.x.com") //3.发送 xhr.send() //4.处理返回结果 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //...do something console.log(xhr.status)//状态码 console.log(xhr.statusText)//状态字符串 console.log(xhr.getAllResponseHeaders)//所有请求头信息 console.log(xhr.response)//响应体 } } } 说明: readyState: 返回一个 XMLHttpRequest 代理当前所处的状态 值 状态 描述 0 UNSENT 代理被创建,但尚未调用 open() 方法。 1 OPENED open() 方法已经被调用。 2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。 3 LOADING 下载中; responseText 属性已经包含部分数据。 4 DONE 下载操作已完成。 因此,xhr....

Aug 10, 2020 · 3 min · Archai

Vue路由地址改变,页面却不刷新?

在网易云项目时,在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时,出现地址栏query参数变化,而页面却没有实时更新的现象,经过搜索找到以下解决方案: 方案一:watch监听路由 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二:给router-view添加一个不同的key 给router-view添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述:同一path的页面跳转时路由参数变化,但是组件没有对应的更新。 实际原因:主要是因为获取参数写在了created或者mounted路由钩子函数中,路由参数变化的时候,这个生命周期不会重新执行。

Apr 16, 2022 · 1 min · Archai

《聪明人和傻子和奴才》

《聪明人和傻子和奴才》 这篇散文诗作于1925年12月26日,鲁迅最初将其发表于1926年1月4日《语丝》周刊第60期。 奴才总不过是寻人诉苦。只要这样,也只能这样。有一日,他遇到一个聪明人。 “先生!”他悲哀地说,眼泪联成一线,就从眼角上直流下来。“你知道的。我所过的简直不是人的生活。吃的是一天未必有一餐,这一餐又不过是高粱皮,连猪狗都不要吃的,尚且只有一小碗……” “这实在令人同情。”聪明人也惨然说。 “可不是么!”他高兴了。“可是做工是昼夜无休息的:清早担水晚烧饭,上午跑街夜磨面,晴洗衣裳雨张伞,冬烧汽炉夏打扇。半夜要煨银耳,侍候主人耍钱;头钱从来没分,有时还挨皮鞭……。” “唉唉……”聪明人叹息着,眼圈有些发红,似乎要下泪。 “先生!我这样是敷衍不下去的。我总得另外想法子。可是什么法子呢?……” “我想,你总会好起来……” “是么?但愿如此。可是我对先生诉了冤苦,又得你的同情和慰安,已经舒坦得不少了。可见天理没有灭绝……” 但是,不几日,他又不平起来了,仍然寻人去诉苦。 “先生!”他流着眼泪说,“你知道的。我住的简直比猪窠还不如。主人并不将我当人;他对他的叭儿狗还要好到几万倍……” “混帐!”那人大叫起来,使他吃惊了。那人是一个傻子。 “先生,我住的只是一间破小屋,又湿,又阴,满是臭虫,睡下去就咬得真可以。秽气冲着鼻子,四面又没有一个窗……。” “你不会要你的主人开一个窗的么?” “这怎么行?……” “那么,你带我去看去!” 傻子跟奴才到他屋外,动手就砸那泥墙。 “先生!你干什么?”他大惊地说。 “我给你打开一个窗洞来。” “这不行!主人要骂的!” “管他呢!”他仍然砸。 “人来呀!强盗在毁咱们的屋子了!快来呀!迟一点可要打出窟窿来了!……”他哭嚷着,在地上团团地打滚。 一群奴才都出来了,将傻子赶走。 听到了喊声,慢慢地最后出来的是主人。 “有强盗要来毁咱们的屋子,我首先叫喊起来,大家一同把他赶走了。”他恭敬而得胜地说。 “你不错。”主人这样夸奖他。 这一天就来了许多慰问的人,聪明人也在内。 “先生。这回因为我有功,主人夸奖了我了。你先前说我总会好起来,实在是有先见之明……。”他大有希望似的高兴地说。 “可不是么……”聪明人也代为高兴似的回答他。

Apr 9, 2022 · 1 min · Archai

Vue在页面直接展示模板语法{{xx}}

用vue.js写成的页面中,可能出现由于外部请求导致的页面展示阻塞现象,进而导致模板语法{{xxx}}直接展示在页面上,这其实跟页面加载的流程有关,整个页面加载的流程是: 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以,当HTML加载的时候,就会把{{}} 当成文本加载出来,只有当vue初始化完成后,才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案: 方案一(不推荐):在head里面加入引入vue的script标签 如果把引入vue的script放到head里面,那页面就不会出现{{}},因为在body之前,vue就已经引入进并且加载完成了。 方案二:v-text|v-html 使用v-text插入文字,使用v-html插入HTML结构,替换原本使用的模板语法{{xxx}} 方案三:template 使用<template>标签包裹要渲染的HTML结构,那么只有vue解析时才会展示出该结构 方案四:v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉,那么我们可以利用CSS的属性选择器,给有v-cloak属性的元素设置display:none样式,那么,在加载HTML时自然不会显示{{xxx}},而在vue解析时又会显示出来,问题得以解决!

Apr 7, 2022 · 1 min · Archai