分类技术下的文章 - 杀死一只知更鸟

Vue中的数据代理

1.通过vm对象来代理data对象中属性的操作 (读/写)2.Vue中数据代理的好处:更加方使的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作 (读/写) data中对应的属性。

技术·面试 · 2023-08-23

Vue中的数据代理

Object.defineProperty()方法

let number = 18 let person = { name:'张三', sex:'男' } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举，默认值是false writable:true, //控制属性是否可以被修改，默认值是false configurable:true, //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) n

技术 · 2023-08-23

Object.defineProperty()方法

vue2计算属性对比methods

计算属性:1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了objcet.defineProperty方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势: 与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便5.备注:1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

技术 · 2023-08-21

vue2计算属性对比methods

简化运行TS的步骤

问题描述:每次修改代码后，都要重复执行两个命令，才能运行TS代码，太繁琐。简化方式:使用 ts-node 包，直接在Node.js 中执行TS代码。安装命令: npm i -g ts-node (ts-node包提供了ts-node 命令)。使用方式: ts-node hello.ts解释: ts-node 命令在内部偷偷的将TS->JS，然后，再运行JS代码

技术 · 2023-08-13

简化运行TS的步骤

TypeScript相比JS的优势

1.更早(写代码的同时)发现错误，减少找Bug、改Bug时间，提升开发效率2.程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验3.强大的类型系统提升了代码的可维护性，使得重构代码更加容易4.支持最新的ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿5.TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本除此之外，Vue3源码使用TS重写、Anaular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首选编程语言

技术 · 2023-08-13

TypeScript相比JS的优势

node之express初体验

打开终端，运行 npm init 初始化然后 npm install express 安装express框架创建01_express初体验.js文件输入下列代码：//1.导入express const express =require('express') // 2.创建应用对象 const app =express() // 3.创建路由 app.get('/home',(req,res)=>{ res.end('hello express') }) // 4.监听端口，启动服务 app.listen(3000,()=>{ console.log('服务已启动，端口 3000 正在监听中...'); }) 在浏览器打开 http://localhost:3000/home

技术 · 2023-08-11

node之express初体验

在终端中几个常用的快捷键

在Windows 的 powershell 或cmd 终端中，我们可以通过如下快捷键，来提高终端的操作效率:1.使用 ↑ 键，可以快速定位到上一次执行的命令2.使用 tab 键，能够快速补全路径3.使用 esc 键，能够快速清空当前已输入的命令4.输入 cls 命令，可以清空终端

技术 · 2023-08-03

js实现好玩的小火箭跟随鼠标移动特效

小火箭是字体图标，需要引入阿里巴巴图标库：<link rel="stylesheet" href="./css/iconfont.css">页面样式：body{ margin: 0; padding: 0; height: 100vh; background: linear-gradient(135deg, #473B7B 0%,#3584A7 51%,#30D2BE 100%); } span.iconfont{ color: #fff; font-size: 80px; position: absolute; text-shadow: 0 8px 18px #000; }html代码：<span id="rocket" class="iconfont icon-huojian"></span>js代码：let rocket=document.querySelector("#rocket"

技术 · 2023-07-29

js实现好玩的小火箭跟随鼠标移动特效

vue运行npm run serve后在浏览器自动打开

在package.json文件，找到scripts配置项，配置serve为："vue-cli-service serve --open"，在后面加一个--open

技术 · 2023-07-28

vue运行npm run serve后在浏览器自动打开

css滤镜应用：透明表单、玻璃效果

毛玻璃背景已被广泛应用于网页设计中，其关键代码是：backdrop-filter: blur(4px);配合内外阴影设置，可达到最佳效果：box-shadow: inset 1px 1px 6px rgba(255,255,255,0.3), 2px 2px 15px rgba(0, 0, 0, 0.5); 本例实现毛玻璃表单特效，结合动画的使用让页面更具动感，下面是html代码部分： <div class="container"> <div class="bg"> <span></span> <span></span> <span></span> </div> <div class="glass"> <div class="text&q

技术 · 2023-07-25

css滤镜应用：透明表单、玻璃效果

Theme Jasmine by Kent Liao