阿乐のBlog

vue生命周期介绍首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 先来一波代码，各位复制在浏览器中运行，打开console查看就行了： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!DOCTYPE html><html lang="en"><head> & ...

详解vue生命周期

发表于2020-08-12|Vue|Vue•vue生命周期| 条评论

better-scroll 是什么better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。起步学习使用 better-scroll 最好的方式是看它的 demo 代码，我们把代码都放在了 example 目录。由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。 better-scroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构 12345678<div class="wrapper" ref="wrapper" ...

Vue 之 better-scroll 详解

发表于2020-08-11|Vue|Vue•BetterScroll| 条评论

CSS 有几个不同的单位用于表示长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。长度有一个数字和单位组成如 10px, 2em, 等。数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。对于一些 CSS 属性，长度可以是负数。有两种类型的长度单位：相对和绝对。浏览器支持下表中的数字表示支持该长度单位的最低浏览器版本。长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的 ...

CSS 长度单位

发表于2020-08-11|CSS|CSS| 条评论

1、项目的创建和GitHub托管使用脚手架创建项目。🏳️‍🌈 传送门 🏳️‍🌈 将项目托管到GitHub上。🏳️‍🌈 传送门 🏳️‍🌈 2、划分项目的目录结构 3、基本css文件的引入我们一般需要这两个基本文件 base.css 放一些我们要公共使用的基本css样式。 normalize.css 不同的浏览器，部分样式可能有一些差异，所以我们要统一他们，就可以使用 normalize.css 。下载地址。引入css文件：这样我们在做项目的时候，专心在他们对应的组件内写样式就可以了。 3、给项目路径起别名VueCLI 2 起别名。 🏳️‍🌈 传送门 🏳️‍🌈 VueCLI 3 起别名。在项目中src根目录创建 vue.config.js文件。 12345678910111213module.exports = { configureWebpack: { resolve: { alias: { 'views': ...

项目开发前的一些准备

发表于2020-08-09|项目|Vue•项目| 条评论

为什么选择axios?🔷 功能特点: 🔹在浏览器中发送 XMLHttpRequests 请求 🔹在 node.js 中发送 http请求 🔹支持 Promise API 🔹拦截请求和响应 🔹转换请求和响应数据 axios 的请求方式🔷 支持多种请求方式: 🔹 axios(config) 🔹 axios.request(config) 🔹 axios.get(url[, config]) 🔹 axios.delete(url[, config]) 🔹 axios.head(url[, config]) 🔹 axios.post(url[, data[, config]]) 🔹 axios.put(url[, data[, config]]) &emsp ...

Vue之axios详解

发表于2020-08-07|Vue|AJAX•axios•Vue•请求模块封装•拦截器| 条评论

123APPS免费网络应用：剪辑音乐视频，格式转化: https://123apps.com/cn/

音乐视频剪辑免费网站

发表于2020-08-04|稽古振今|工具网站•音乐剪辑•视频剪辑| 条评论

认识VueXVuex官网地址 Vuex是做什么的?🔷 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 🔹 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 🔹 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 🔷 状态管理到底是什么？ 🔹 状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。 🔹 其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。 🔹 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。 🔹 那么，多个组件就可以共享这个对象中的所有变量属性. Vuex就是为了提供这样一个在多个组件间共享状态的插件，而且是响应式的。 🔷 管理什么状态呢 ? &ems ...

VueX 详解

发表于2020-08-03|Vue|Vue•VueX| 条评论

PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 \1. IE无法调整那些使用px作为单位的字体大小； \2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； \3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 \1. em的值并不是固定的； \2. em会继承父级元素的字体大小。注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。所以我们在写CSS ...

px、em、rem区别介绍

发表于2020-08-03|CSS|CSS•CSS3| 条评论

Promise 的基本使用🔷Promise到底是做什么的呢？ 🔹Promise是异步编程的一种解决方案。 🔷那什么时候我们会来处理异步事件呢？ 🔹一种很常见的场景应该就是网络请求了。 🔹 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 🔹所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。 🔹如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。但是，当网络请求非常复杂时，就会出现回调地狱。 OK，我以一个非常夸张的案例来说明。 🔷我们来考虑下面的场景(有夸张的成分)： 🔹我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2 🔹我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3 ...

ES6之Promise的使用

发表于2020-08-03|ES6|Promise•ES6| 条评论

Vue项目中文件路径问题在我们写Vue项目中的时候，路径是很令人苦恼的东西，比如：src 引入资源的时候 1<img slot="item-icon-active" src="./assets/imgs/tabbar/profile_active.svg" alt=""> 比如：引入一些组件的时候 1import TabBerItem from './components/tabber/TabBerItem' 等等。。。当我们要去移动这些文件，或者复用某个组件的时候，那么对于路径问题，就很难受了，我们就要一个一个去改，很麻烦。这时就需要我们为路径起别名了。我们需要配置webpack文件。举个栗子：当你引用某个组件的时候，以前是这样用的： 1import TabBerItem from './components/tabber/TabBerItem' 使用别名，就可以这样用： 1import TabBerItem from 'c ...

Vue项目中文件路径问题

发表于2020-08-02|Vue|Vue| 条评论