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

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

浏览器本地存储

webStorage 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 相关API: xxxStorage.setItem('key','value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 xxxStorage.getItem('key'); 该方法接受一个键名作为参数,返回键名对应的值。 xxxStorage.removeItem('key'); 该方法接受一个键名作为参数,并把该键名从存储中删除。 xxxStorage.clear(); 该方法会清空存储中的所有数据。 备注: SessionStorage存储的内容会随着浏览器窗口关闭而消失。 LocalStorage存储的内容,需要手动清除才会消失。 xxxStorage.getItem('key');如果key对应的value获取不到,那么getItem的返回值是null。 可以通过JSON.stringify()存储对象,通过JSON.parse()解析对象,JSON.parse(null)的结果仍然是null。

Mar 30, 2022 · 1 min · Archai