Posts

关于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....

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('失败') })....

学习地址: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....

在网易云项目时，在歌手详情页点击相似的歌手跳转到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路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

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

用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解析时又会显示出来，问题得以解决！