vue学习
一夜枫林
特别欣赏一种人,他们的知识储备和信息密度都远高于我,可还是愿意听我说那些没有营养的废话。我总觉得,温柔博学浪漫是人身上最难得的特质。懂得向下兼容,到哪都是宝藏。
展开
-
js对时间日期判断今天昨天明天
【代码】js对时间日期判断今天昨天明天。原创 2022-10-18 10:11:58 · 2761 阅读 · 2 评论 -
js判断日期格式
let dateNew = 2022.5.23; //2022-05-23, //2022/5/23let str1= "-";let str2= "/";let str2 = ".";var dateArray;if (dateNew.indexOf(str1) > -1) { dateArray = dateNew.split(str1);} else if (dateNew.indexOf(str2) > -1) { dateArray = dateNew.s原创 2022-05-23 17:09:45 · 2113 阅读 · 0 评论 -
js获取日期
笔记js获取当月最后一天号var lastDay= ((lastDay=new Date).setMonth(lastDay.getMonth()+1) - (+new Date))/1000/60/60/24;console.log(lastDay) //30原创 2021-09-08 14:55:47 · 107 阅读 · 0 评论 -
常用的css小妙招,建议新手收藏
input修改光标颜色<input type="number">input{ caret-color: rgba(0, 255, 0, 1.0);}div背景透明色<div>背景颜色</div>div{ height: 100px; width: 100px; background: red; opacity: 0.5; //值为: 0.1 -- 0.9}文字隐藏,只会隐藏内容,不会影响元素<div>文字隐原创 2020-12-24 17:01:43 · 225 阅读 · 4 评论 -
Vue筛选数字是否有小数点
Vue筛选数字后面是否有小数点,如果有就保留两位,没有就不操作。filters: { toFixed(num) { if (!isNaN(num)) { return ((num + '').indexOf('.') == -1) ? num : num.toFixed(2); } },},原创 2021-08-17 17:33:19 · 2538 阅读 · 0 评论 -
input 再次获取焦点
<input type="text" :focus="volume" @blur="focus=false">this.volume = false;this.$nextTick(() => { this.volume = true;});uni.hideKeyboard(); uniapp 开发中可用于隐藏键盘原创 2021-04-09 14:30:30 · 334 阅读 · 0 评论 -
简述Vue的双向数据绑定的理解
Vue实现双向数据绑定的原理:就是利用了Object.Property()这个方法,重新定义了对获取属性值(get)和设置属性(set)的操作来实现的,它接收的三个参数,要操作的对象,要定义或者要修改的对象的属性名,属性描述符。重点接收最后的属性描述符,属性描述符是一个对象,主要有两种形式:数据的描述性和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。 每个组件实例都对,应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性,记录为依赖。之后当依赖原创 2021-03-02 16:34:03 · 298 阅读 · 0 评论 -
字符串取指定的数字或文字
let a = 'loveid=123&userid=456';要求取id的123 和 uesrid的456 的数字,很多新手就是不知道怎么取其实字符串有个indexof()可以操作,还有其他很多可以实现let a = 'loveid=123&userid=456';let b = a.indexof('='); // 返回出现第一次的下标let c = a.indexof('&userid='); //返回&的下标let id = a.slice(b+1,c原创 2021-01-13 09:46:27 · 369 阅读 · 0 评论 -
setInterval定时器
setInterva 中文:定时调用函数名 我们俗称:间隔定时器使用方法data() { return { newdate:null, }; },mounted() { this.newdate = setInterval(() =>{ console.log("我是间隔定时器,每五秒调用一次") },5000) },// beforeDestroy(销毁前)在实例销毁之前调用。实例仍然完全可用。beforeDestroy() { console.l原创 2021-01-07 10:00:02 · 597 阅读 · 0 评论 -
Vue父组件可以监听到子组件的生命周期吗?
答案可以1)实现方式一比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现://Parent.vue<Child @mounted="doSomething"/>//Child.vuemounted(){ this.$emit("mounted")}2)实现方式二以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:原创 2020-07-27 20:01:27 · 1104 阅读 · 0 评论 -
js为什么是单线程
解答可以从DOM的层面来理解:DOM会改变页面的结构就是渲染页面,但是js也会,js和DOM同时操作的话就是会矛盾了,所以它必须是单线程的只能保障同一个时间只能做一件事情,然后就不有冲突。...原创 2020-07-27 15:33:31 · 118 阅读 · 0 评论 -
计算属性和普通属性的区别
区别computed 属性是vue的计算属性,是数据层到视图的数据转化映射;计算属性是基于他们的依赖进行缓存的,只有在相关依赖发现改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不在执行函数;computed 是响应式的,methods并非响应式。调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。computed是带缓存的,只有依赖数据发生改变,才会重新进行计算,而method原创 2020-07-27 14:40:22 · 1142 阅读 · 0 评论 -
说一下减少dom的办法?一次性给你大量的dom怎么优化?
一、减少dom数量的方法可以使用伪元素,阴影实现的内容尽量不使用DOM实现,如清除浮动、样式实现等;按需加载,减少不必要的渲染;结构合理,语义化标签二、大量DOM时的优化当对Dom元素进行一系列操作时,对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能,所以关于操作Dom,应该从以下几点出发:1. 缓存Dom对象首先不管在什么场景下。操作Dom一般首先会去访问Dom,尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点,不必循环的Dom节点先获取到,那么在原创 2020-07-27 11:59:23 · 4852 阅读 · 0 评论 -
Vue单页面与多页面的区别
定义SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用(一个html页面),一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA多页面应用(MultiPage Application),指有多个独立页面的应用(多个html页面),每个页面必须重复加载js、css等相关资源。多页应用跳转,需要整页资源刷新。区别1.刷新方式SPA:相关组件切换,页面局部刷新或原创 2020-07-25 09:31:41 · 5868 阅读 · 0 评论 -
Vue的生命周期
Vue的八大生命周期beforeCreate (创建前)在数据观测和初始化事件还未开始created(创建后)完成数据观察,属性和方法的运算,初始化事件,$el属性还没有显示出来beforeMounted(挂载前)在挂载开始之前被调用,相关的render函数首次首次被调用。实例已经完成以下的配置:编译模板,吧data里面的数据的模板生产html。此时还没有挂载html到页面上。mounted(挂载后)在el被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译的原创 2020-07-23 20:25:10 · 90 阅读 · 0 评论 -
Vue中双向数据绑定是如何实现的?
1.原理View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的Object.defineProperty() 方法来劫持 (监控) 各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的试图,而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定,大 致 可 以 划 分 三 个 模 块:Obse原创 2020-07-23 19:27:30 · 2716 阅读 · 0 评论 -
渐进式框架的理解
简单快速的理解什么是渐进式框架的理解渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成原创 2020-07-23 16:41:46 · 16293 阅读 · 1 评论 -
说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法?
assets文件夹是放静态资源。components是放组件。router是定义路由相关的配置。app.vue是一个应用主组件。main.js是入口文件。原创 2020-07-22 11:45:37 · 133 阅读 · 0 评论 -
Vue中的v-model的使⽤
v-model:基础语法<template> <div > <input type="text" v-model="search"> <div>这是输入的值:{{ search }}</div> </div></template><script>export default { data() { return { search:''原创 2020-07-22 11:33:18 · 145 阅读 · 0 评论 -
axios及安装,和使⽤,以及封装。
axios安装:yarn add axiosnpm install axios -Ssrc 下创建 request/http.jsimport axios from 'axios';import {Toast} from 'vant';// 创建实例const instance = axios.create({ baseURL: "http://localhost:8080", timeout: 10000,});// 请求拦截instance.intercept转载 2020-07-22 09:19:21 · 198 阅读 · 0 评论 -
Vue中v-for为什么使⽤key?
我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。加key主要不是为了性能,主要是为了区分两个 vnode 节点。比如一个列表,增加其中一项,如果不加 key 区分,增加后新旧 vnode 对比就会出现 bug。因为列表元素 DOM 结构相同,vue 会把原本不相同的 vnode 认为是 sameVnode,导致 bug。说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。在渲染简单的无状态组件时,如原创 2020-07-22 09:03:09 · 230 阅读 · 0 评论 -
vue-loader是什么?使用它的途径有哪些?
理解vue-loader事情的起源是被人问到,一个以.vue结尾的文件,是如何被编译然后运行在浏览器中的?突然发现,对这一块模糊的很,而且看mpvue的文档,甚至小程序之类的都是实现了自己的loader,所以十分必要抽时间去仔细读一读源码,顺便总结一番。vue-loader作用:解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理。用途:js可以写es6,style样式可以写scss或less、原创 2020-07-22 08:53:43 · 5036 阅读 · 1 评论