js实现数据的双向绑定
js实现数据的双向绑定
数据的双向绑定
双向绑定指的是视图和数据两个之间双向绑定！
在页面中绑定两个或者多个元素，比如一个input框和一个p标签，当在input框输入值时，p标签也会自动更新文本。只关注数据的操作，减少对DOM的操作。
一、直接赋值
也就是将input框的值赋值给p标签的文本
html代码块
<p id="txt"></p>
<
前端
react hooks深拷贝后无法保留视图状态
在使用useState做数据操作更新的时候，有一些复杂数据类型，一个对象数组里包含，函数，dom等等复杂数据类型，想要进行数据更新，并且视图更新的情况下，因useState的特性就必须进行深拷贝赋值。
方式
1、JSON.stringify配合JSON.parse 这个有限制，我们的数据类型包含，函数。它会丢失
2、Lodash 里的深拷贝方法
3、递归实现
我这里通过递归直接写的方法，发现拷贝
vite + vue3多页面配置记录references,loadEnv等
目的：使用vite创建vue3项目记录细节点
上篇vue2/vue3 + webpack多页面遇到的问题和思考我们使用vue-cli搭建项目都是使用webpack打包的，现在对比一下vite感受一下极速开发体验
增：下一篇vite + vue3 多页面实战优化续集：eslint+lint-staged+husky+stylelint
第一部分：项目基础配置ts相关: lib, references
vue3.x的setup语法糖
什么是setup语法糖
vue3.0时setup的变量需要return暴露出来，template才能获取。到3.2之后只需要在script标签中添加setup，例如<script setup>，组件中不在需要特殊注册，直接引入，属性和方法便不需返回，在<script setup>中自定义的属性、指令可以直接在template使用。
setup参数
使用 setup 函数时，
vue项目打包优化--提高首屏加载速度
1、移除 preload 与 prefetch
vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。先简单了解一下 preload 与 prefetch。
1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不执行，只有需要时才执行它；
3、prefetch 是意图预获取一些资源，
vite+vue3+ts+pinia+element-plus搭建项目（三）
现在进入页面开发，组件库选择Element Plus，考虑到前端写样式每个人的写法都不同，这样维护起来也是比较麻烦的，所以选择 Tailwindcss ，这样开发过程不用去想很多的类名，不用再去写css代码
element-plus 按需引入
yarn add unplugin-vue-components --save-dev
// vite.config.ts
import { defin
阻止移动端 touchmove 与 scroll 事件冲突
在移动端开发过程中，如果要实现一个元素或按钮的拖动定位，会出现很多坑。例如：元素上下移动过程中，会触发 body 的 scroll 事件，导致整体的位置偏移，这时就需要 阻止移动端 touchmove 与 scroll 事件冲突 。
DOM Touchmove Scroll
一、解决思路
当移动端 touchmove 与 scroll 事件冲突时，首先想到的就是在 touchmove
【JS 】让浏览器支持<style scoped>
1. HTML style scoped 属性
今天无意中发现居然还有这么一个神仙属性 HTML style scoped 属性
他的作用主要是将 style的作用域控制在他自身的父元素之内。
例如：
<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</s
创建一个 Angular 组件
组件（Component）是 Angular 应用的基本组成单元。Angular 应用的组件可以控制页面上不同区块的渲染和行为，这些区块被称为视图。
页面的构成
一个 Angular 应用的组件，是按照树形结构进行组织的，组件之间可以进行通信和交互。也可以说，Angular 应用的架构就是其所包含的组件的架构。
组件架构
创建组件
我们可以使用 Angular CLI 的
0.DOM和BOM的介绍
1.认识DOM和BOM
window的全局对象，window上事实上就包含了这些内容：
JavaScript语法部分的Object、Array、Date等；
另外还有DOM、BOM部分；
image.png
1.1◼ DOM：文档对象模型（Document Object Model）
简称 DOM，将页面所有的内容表示为可以修改的对象；
1.2 ◼ BOM：浏览器对象模型（B
