- 博客(14)
- 收藏
- 关注
RSS订阅原创 css 开启硬件加速的属性
让浏览器知道你需要硬件加速,满足其一即可 perspective backface-visibility transform:translateZ(x)代码示例:perspective: 1000px;backface-visibility: hidden;transform: translateZ(0);
2021-05-31 20:24:50
556
原创 vue 强制替换元素/组件而不是重复使用
作用: 完整地触发组件的生命周期钩子 触发过渡方法: key的特殊主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素。场景: <transition> <span :key="text">{{ text }}</span> 当te
2021-05-30 20:27:10
485
原创 vue provide和inject
1、provide export default{ provide:{ key:value }, provide(){ return { key:value } } } 2、inject export default{ inject:["key"], inject:{ x:"provider中的key" } inject:{ x:{ from:"provider中的key", default:"默认值"
2021-05-30 14:13:26
500
原创 vue Vue.extend和extends模板选项
1、Vue.extends 使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象。 (1)创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: '
2021-05-30 13:50:27
1635
原创 vue3.0 nextTick
将回调推迟到下一个DOM更新周期之后执行,在更改了一些数据以等待DOM更新后立即使用它。import { createApp, nextTick } from 'vue'方式一: const app = createApp({ setup() { const changeMessage = async newMessage => { ... await nextTick() 会返回一个Promise对象,所以可以使用await,等待nextTick()结
2021-05-29 20:37:23
20685
1
原创 vue3.0 resolveDirective、withDirectives
1、resolveDirective 如果在当前应用实例中可用,则允许通过其名称解析一个directive。 返回一个Directive,如果没有找到,则返回undefined 只能在render或setup函数中使用。 const app = Vue.createApp({}) app.directive('highlight', {}) import { resolveDirective } from 'vue' render () { const highlightDire
2021-05-27 21:16:12
5740
原创 vue3.0 defineComponent、resolvComponent等
1、defineComponent 从实现上看:defineComponent只返回传递给它的对象 就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。 export default defineComponent({ ... }) 2、defineAsyncComponent 创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数 const AsyncComp = defineAsyncComponent(
2021-05-27 20:49:22
13465
原创 vue3.0 createApp
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。1、使用 const app = Vue.createApp({配置对象},{根prop参数})2、链式调用 支持链式调用:https://v3.cn.vuejs.org/api/application-api.html#component3、该方法类型声明 interface Data { [key: string]: unknown } export type CreateAppFunction&
2021-05-24 22:25:28
7886
原创 vue3.0 自定义指令
指令是具有一组生命周期的钩子：1、全局指令 import { createApp } from 'vue' const app = createApp({}) app.directive('my-directive', { // 在绑定元素的 attribute 或事件监听器被应用之前调用 created() {}, // 在绑定元素的父组件挂载之前调用 beforeMount(el,binding, vnode,prevNode) { 除了el之外,你应该将这些参
2021-05-24 20:23:02
935
原创 vue app.config配置自定义错误捕捉、全局变量、自定义元素
const app = Vue.createApp({})1、处理组件渲染方法执行期间以及侦听器抛出的未捕获错误 app.config.errorHandler = (err, vm, info) => { // 处理错误 // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 } 2、为Vue的运行时警告指定一个自定义处理函数,开发模式下有效 app.config.warnHandler = function(msg, vm, trace) { /
2021-05-22 22:27:52
2014
原创 vue3.0 provide/inject
1、上级组件导入 import { provide } from 'vue'; setup(){ provide('key', value) 使得数据具有响应性 provide(key,ref(...)) provide(key,reactive(...)) }2、子级组件导入 import { inject } from 'vue'; setup(){ const data=inject(key,'默认值'); }...
2021-05-22 15:25:39
1055
原创 vue3.0 props参数验证
在vue3里面,可以添加类型约束,向下兼容2.5版本的写法 props:{ 传递参数,可以直接添加类型约束 msg:String, age:String },代码示例: props: { //传递参数,可以添加类型约束 msg: String, age:String },...
2021-05-21 14:52:26
747
原创 求对象深度
var res = 1; function loopGetLevel(obj, deep) { let level = deep ? deep : 1; //第一次判断为1 if (typeof obj === 'object') { for (let key in obj) { if (typeof obj[key] === 'object') { //当是对象的时候深度+1 loopGetLevel(obj[key], lev
2021-05-06 16:44:23
197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人