让typecho支持特殊字符

起因由于最近在了解前端js中length不准的问题,其中文章带有一些特殊字符,而typecho和mysql都只是支持UTF-8字符,但是这个utf-8并不是真正意义上的utf-8,它最多支持3个字节的内容,也就是24bit,而我文章中的特殊字符是需要4个字节来存储的,这就导致文章无法正常的展示和保存。这个特殊字符和现在移动端常用的emoji表情差不多,emoji也是一种特殊字符,所以该教程同样适用于如何让typecho支持emoji表情。教程打开宝塔的phpmyadmin -> 找到typecho的数据库 -> 操作 -> 滑动到最底部找到排序规则 -> 选择ut...

286 40 0
让typecho支持特殊字符

为什么length不准

前言这个问题在最近经常被刷到,虽然我知道怎么解决这个问题,但是为什么会这样,其实并不太明白,所以这次特此开一篇文章讲讲为什么length获取字符位数会不准的问题,以及我们的解决办法。"𠮷".length //2 "💩".length //2𠮷与吉利的吉是一个意思,𠮷是异体写法,古文中会出现。按照我们的认知,上述的length输出应该是1才对,但事实上却是2。计算机是如何存储字符的早期的ASCII字符集在计算机中,所有的数据存储最终都是二进制,如何正确的存储及其识别字符,做法就是定制一个编码规则,让每个字符都由一个个数字来表示,这些数字被...

247 1 0
为什么length不准

2022下半年计划

今晚心潮澎湃写下了下半年的计划,加油搞下去吧,任务不分先后,加油,下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[ ] 看书《你不知道JavaScript》上中下前端功能:[x] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid

497 15 0
2022下半年计划

了解前端的复制功能

前言前端的复制功能第一次使用的时候还记忆犹新,那时根本不知道怎么操作,复制它到底是怎么实现的,该怎么去触发,百度查看了不知道多少所谓的复制功能文档,每篇都有不一样的用法,我总想着有一天能搞清楚这些,毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法,该方法允许使用者通过输入“命令”的方式来操作 可编辑内容区域 的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素,但按道理,input这些应该也是算可编辑内容区域的。这些都不重要,我们这次关注的...

336 0 0
了解前端的复制功能

uuid

什么是uuidUUID 是 通用唯一识别码(Universally Unique Identifier)的缩写,其目的,是让分布式系统中的所有元素,都能有唯一的辨识信息,而不需要通过中央控制端来做辨识信息的指定。如此一来,每个人都可以创建不与其它人冲突的UUID。uuid是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的说白了就是生成唯一标识符的作用,那么它的重复几率就一定要极低。每秒产生10亿笔UUID,100年后只产生一次重复的机率是50%。如果地球上每个人都各有6亿笔UUID,发生一次重复的机率是50%所以我们在日常使用中,可以不用考虑重复性的问题,几率非常非常小...

359 0 0

mock 快速入门

基本概念问题的起源:前后端分离在前后端开发的时候,前端的数据基本都是通过api请求获取到的,但是后端可能在开发的时间上与前端不一致,这就导致前端常常需要等待后端提供接口,等待会耗去很多开发时间,所以我们经常做的方式就是自己模拟数据(假数据时代)。比如写个定时器返回一个数据对象,或者使用一个json文件,去模拟请求。但是这些其实都并不方便,每次都要自己去写一堆数据,如果是json格式还不能for循环,以及一些随机数据,最重要的是这些代码最终都得删除,因为耦合在业务代码中,而且我们的请求并不是真正的请求代码,最终在后端接口出来后我们还得改一遍代码。难道就不能前端模拟的效果和真实请求一样,后端...

392 4 0
mock 快速入门

vue-router4 新增功能

动态路由这个其实在3版也有,不过3版原来使用的api是addRoutes,这个api顾名思义,就是可以传入一个路由数组来进行注册,后来被废弃,现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由,但是有两种用法:添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由,父路由必须有name属性route...

419 0 0

vue-router4 一些常见配置的改动

创建路由实例方式改变3版本的时候是通过new的方式创建路由实例,4版本是改用了createRouter的方式:import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制,值为字符串,现在通过import引入不同函数来创建不同的路由模式:"history"改为createWebHistory()"hash"改为createWebHashHistory()"abstract"...

565 5 0

vue3 filter过滤器

vue3直接移除了filter过滤器,官方推荐,如果要使用过滤器可以使用computed计算属性和method函数来代替。如果使用了全局过滤器,官方也提供了一个属性来进行迁移修复,但是也只推荐用于迁移。const app = createApp(App) //给当前app的全局属性上挂载一个过滤器对象 app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }使用的时候:<template> <h1>Bank Account Bala...

1031 0 0

vue3 keyCode修饰符

vue2我们在监听按键事件的时候,是可以通过在事件后面加上按键码来实现监听某一个按键的。<input @keyup.13="submit" />甚至我们还可以使用按钮别名alias的方式调用<input @keyup.enter="submit" />还可以全局自定义别名,通过Vue.config.keyCodes属性。Vue.config.keyCodes = { f1: 112 }随着ECMAScript的标准推荐,官方已经不推荐使用keyCode键码了,这个功能在js的官方定义上是一个已弃用的状态,最新的标准是使用...

416 0 0

vue3 取消$on、$off、$once

在vue2的时候,我们可以通过$on、$off、$once、$emit来实现一个事件总线EventBus,但是vue3的时候,又换了一套逻辑思想。官方不鼓励使用EventBus在组件之间进行通信,虽然短期内确实是非常简单的解决方案,但是从长远来看,它总是很难维护的,所以官方更加推荐使用其他方式:父子组件之间可以通过Props和自定义事件来进行沟通,如果是兄弟组件,可以通过父级组件来沟通使用Provide / inject方式来跨层级沟通,比如与插槽的内容组件。Provide / inject也可以用于跨层级沟通,以避免props,emit事件层级过深的问题通过使用插槽的形式来避免层级沟通...

611 0 0

vue3 transition、watch、挂载api的变化

transition动画的变化就是vue3调整了一下动画类名,原来vue2是:.v-enter{ opacity: 0; } .v-leave{ opacity: 1; }这两个在vue3中改为:.v-enter-from{ opacity: 0; } .v-leave-to{ opacity: 1; }其相关属性也对应发生了变化:leave-class被重命名为 leave-from-class(可以写成 leaveFromClass在渲染函数或 JSX 中)enter-class被重命名为 enter-from-class(可以写成 enterFromClass在...

329 1 0

vue3 自定义指令

vue3将自定义指令的生命钩子函数全部改为与组件的生命钩子函数相同,原来vue2时,自定义指令的生命钩子是一套完全不同的,但是也正因为如此,它的钩子函数有点晦涩难懂,这次统一了我觉得是一件非常好的事情,让我们的记忆力压力减轻了很多,也方便了我们的理解。vue3写法:const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 }, // 在元素被插入到 DOM 前调用 beforeMoun...

365 0 0

vue3 杂项

data选项在vue3中,data选项已标准化为仅接受 function返回一个 object,在vue2的时候,data可以直接是一个object。vue2:<script> const app = new Vue({ data: { apiKey: 'a1b2c3' } }) </script>vue3:<script> import { createApp } from 'vue' createApp({ data() { return { apiKey: 'a1b...

331 0 0

vue3 异步组件

书接上文,我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理,然后导出使用,你会发现这个组件是一个函数类型。然后我再去看一下vue2时,我们的异步组件引入方式:const asyncModal = () => import('./Modal.vue')你会发现除了异步组件也是一个函数类型,这就尴尬了,怎么区分呢?vue3提供了一个defineAsyncComponent函数用于区分异步组件。import { defineAsyncComponent } from 'vue' const asyncModal = defineAsyncComponent(() =>...

350 35 0

vue3 函数式组件 functional

由于vue3对dom的渲染做了优化,优化了diff算法,在vue2时不管元素是否参与更新,都会被重新创建,vue3则针对不参与更新的元素,打上一个静态标记,此时这个元素只会创建一次,后续的渲染更新则不会重新创建。于是函数式组件在vue3中性能的提升可以忽略不计,于是functional组件的声明被移除,不在支持:template中不能再写上functional来表示函数式组件vue组件中的{ functional: true }选项也被删除但是,这也并不意味着无法创建函数式组件了,vue3也有提供创建的方式,但是需要引入h函数。创建一个js组件:_test.js_import { h }...

468 0 0

vue3 渲染函数

rendervue2的render他的h函数是本身接的参,vue3则转为es6模块语法,通过import引入,同时也是为了摇树功能。vue2写法:export default { render(h) { return h('div') } }vue3写法:import { h } from 'vue' export default { render() { return h('div') } }这个render其实也是作为vue组件的一个配置属性存在的,事实上我们所有的vue组件,最终都会转为render函数,只是我们使用template的写法(SFC)...

358 0 0

vue3 v-model

在vue2的时候,v-model和.sync修饰符在职能上是一样的,容易混淆,在vue3时做了统一,为此移除了.sync修饰符,以及组件内的model选项,新增了可以多个v-model的使用方式。我们先看看vue2的v-model写法:<ChildComponent v-model="pageTitle" /> <!-- 等同于 --> <ChildComponent :value="pageTitle" @input="pageTitle = $event" />model选项export...

340 0 0

vue3 全局api tree-shaking摇树优化

vue3将一些全局性的api作为一个可以被import引入的功能来使用,至于为什么这么做,我们稍后再谈,具体有哪些api就不一一说明了,我们举个例子就行,比如nextTick。在vue2的时候,如果我们需要使用它,就必须通过Vue.nextTick的方式来调用:import Vue from 'vue' Vue.nextTick(() => { // something DOM-related })现在vue3可以这样:import { nextTick } from 'vue' nextTick(() => { // something DOM-related ...

386 0 0

vue3 createApp 创建实例

在vue2的时候,我们的Vue构造函数上会携带很多全局的api,如果我们想要主要注册一个全局的组件,就不得不这么做:Vue.component('button-counter', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>' })此时,我们创建两个实例:const app1 = new Vue({ el: '#app-1' }) const app2 = new...

300 0 0

vue3 createRenderer 自定义渲染器

vue3提供了createRenderer用于用户自定义控制渲染,这样的好处就是方便在不同平台之间的使用!就拿weex来说,它是一个跨平台的移动端解决方案,除了能够一套代码适配多个系统之外,其实还承载热更新的能力,我们都知道web页面是动态的,代码上传后用户刷新页面就能拿到最新的效果,这个效果其实在原生app上是很难做到的。而weex是阿里的产物,他们的业务需求非常需要动态更新的功能,就拿淘宝来说,一个店铺的装修,当然是希望装修完立马就能给用户呈现效果,当然用web网页就可以啊,但是web网页它没有app级的体验,这两个东西就好像鱼和熊掌一样,于是乎在两者兼具的路上折腾了很多,weex也...

331 0 0

vue3 emits 自定义事件声明

在vue2的时候,我们的自定义事件是通过this.$emit进行触发的,并没有统一的某一处属性进行定义,这其实会导致一个问题,当代码量上升一定程度后,后面来维护的人很难快速了解这个组件的自定义事件有哪些。vue3版本提供了emits配置,它可以定义当前组件触发的自定义事件有哪些,并且还支持参数校验,如果绑定的事件没有在emits中显式声明,那么就会作为$attrs属性挂载到根节点上,这个效果在fragment组件是无效的。为此vue3放弃了.native修饰符,一方面是因为emits的存在,可以更加明确的知道该组件支持什么自定义事件,另一方面是因为未声明的事件会默认绑定到根节点上,所以....

1161 0 0

vue3 Fragment 片段

在vue2的时候,我们在编写组件时往往是需要提供一个根元素的,这个根元素会作为虚拟dom的差异算法依赖,但是有的时候往往会带来一些很难受的体验,比如会带来很多的无必要的元素嵌套,常见的嵌套应该就是div了,如果你曾经尝试写过递归一个导航组件的话。这个问题其实在react中也出现过,所以它在v16版本中提供了Fragments功能,它会将多个根元素的内容包裹在一个名为React.Fragment的元素下,这样就不需要多余的“根元素”;为此它还得在渲染时进行特殊处理,所以当时业界吹了一把react牛逼,重写了虚拟dom算法。在vue2阶段,我个人也尝试了好多办法,包括尝试使用这种方式:<...

854 8 0

vue3 Teleport 传送门

官方文档:Teleport该组件可以将插槽接收的内容渲染到指定的dom位置,常见的一个业务需求就是model弹窗了,我们有时候会在子组件里面去书写一个弹窗,但是这个弹窗是全局性的,为了防止被定位元素影响,我们vue2时会在mounted生命钩子里手动将model的dom传入body里面,而且还得在销毁时从body移除。vue3提供了teleport组件,它和react的传送门组件其实效果相同,它有两个props属性:toto支持字符串和html元素,如果是字符串,指的是css选择器,而html元素则是dom。disabled接收一个布尔值,表示是否禁用传送门,通过这个属性我们可以很方便的...

304 0 0

正确使用vue3的ts类型声明

前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

正确使用vue3的ts类型声明