Proxy实践

概述Proxy是ES6推出的一个类,用于给对象架设一层拦截器,但凡要访问或修改对象上的值或属性,都必须经过这层拦截器, Proxy也叫代理器, 它代理了对对象的操作。ProxyProxy用于创建一个对象的代理,从而实现操作的拦截和自定......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 82


基于VUE的移动端和PC端适配

概述适配移动和PC端有两种方式:一是一套资源,根据设备类型加载不同的CSS;二是两套资源,通过路由分别加载不同页面。前者适用于两端差别不大,交互简单的项目;后者适用于两端差别大,设计要求高,拓展性要求高的项......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 158


javascript日常操作

javascript中的波浪符~1.0> 单波浪用于位取抒~ 是位运算NOT,按位取反 2.0> 双波浪符用于将小数转为整数~~1.7 // 执行结果:1target 和 currentTarget 的区别target:触发事件的源,即,被点击的元素;currentTarget:绑定事件的元素;如......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 262


事件处理

https://cn.vuejs.org/guide/essentials/event-handling.html内联事件处理器<button @click="count++">Add 1</button>方法事件处理器方法事件处理器会自动接收原生 DOM 事件<button @click="greet">Greet</button>向方法传入 event 事件变量<button @cl......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 32


其它常用CSS

direction用来设置文本、表列水平溢出的方向。rtl表示从右到左 (类似希伯来语或阿拉伯语),ltr表示从左到右 (类似英语等大部分语言).will-change用于提前告知浏览器,元素将会有哪些变化,以便浏览器在元素真正发生变化之前提前......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 40


Vue3 CSS扩展

::v-slottedVue3中,父级传入的插槽内容不再受子级样式的影响,子元素需要使用新的::v-slotted()伪元素来专门针对插槽内容:::v-slotted(.foo){}/*简写*/:slotted(.foo){}::v-global伪元素::v-global()可用于在<stylescoped>块内定义全局样式;::v-gl......

YANGWW1111Web前端 · 文档2022-09-22阅读 · 32


计算属性

计算属性常用于简化模板逻辑常规:<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>使用计算属性简化模板:<span>{{ publishedBooksMessage }}</span>letpublishedBooksMessage=computed(()=>{ return author.books.length > 0 ? 'Yes' : 'No......

YANGWW1111Web前端 · 文档2022-09-21阅读 · 46


创建自签名SSH证书

// 替换域名为你欲申请的IPopenssl req -newkey rsa:4096 \ -x509 \ -sha256 \ -days 3650 \ -nodes \ -out example.crt \ -keyout example.key \ -subj "/C=SI/ST=Ljubljana/L=Ljubljana/O=Security/OU=IT Department/CN=www.exa......

YANGWW11112022-09-21阅读 · 72


class绑定

常规用法<div :class="{ active: isActive }"></div><div :class="{ active: isActive, 'text-danger': hasError }"></div>绑定计算属性<div :class="classObject"></div>computed: { classObject() { return { active: this.isActive && !this.error, ......

YANGWW1111Web前端 · 文档2022-09-21阅读 · 35


逻辑渲染

<template>上的v-if如果要使用v-if切换多个元素,就可以用<template>包裹:<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>注意事项v-show不支持在<template>元素上使用......

YANGWW1111Web前端 · 文档2022-09-21阅读 · 52