Vue3 watch
watch
监听响应式数据的变化，才能够被watch所监听到；
vue2.xvue3.0vue2中的watch函数
vue2中的响应式数据是写在data、computed或者props接收的数据；才能够被watch所监听到
基本写法123456789101112131415161718192021222324<template> <div> <h2>{{ sum }}</h2> <button @click="sum++">点我加一</button> </div></template><script>export default { data() { return { sum: 1, }; }, watch: { sum(newValue, oldValue) { console.log( ...
Vue3 hook
自定义hook
本质是一个函数，把setup函数中使用的 Composition API 进行了封装；
类似于2.x中 的mixin；
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂；
实现一个获取坐标位置的功能
123456789101112131415161718192021222324252627282930313233343536<template> <h2>点前点击的鼠标的坐标为x:{{ point.x }},y:{{ point.y }}</h2></template><script>// 获取鼠标的点击的坐标import { reactive, onMounted,onBeforeUnmount } from "vue";export default { setup() { // 数据 let point = reactive({ ...
Vue3 setup参数
setupVue2中的组件传值
父传子 $attrs
1234567891011121314151617//父组件<template> <v-child msg="hello" school="vue2父传子"></v-child></template><script>import vChild from "./theChild.vue"export default { components:{ vChild }}</script><style></style>
子组件
123456789101112131415<template> <h2>this is child</h2></template><script>export default { props:["msg& ...
Vue2与3响应式原理
vue2响应式原理
通过Object.defineProperty()对属性的读取，修改进行数据劫持；
get捕获 获取的数据；set捕获 修改的数据；但是添加和删除属性是捕获不到的；
12345// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperties(p,"name",{get(){},set(){}})
1234567891011121314151617181920212223242526272829// 源数据let person={ name:"张三", age:20};// 模拟vue2实现响应式// 1.准备一个空对象let p = {};// 给哪个对象追加属性,追加什么属性,对象 get 和set方法Object.defineProperty(p,"name",{ get(){//有人读取name时使用 ...
Vue3响应式数据
ref函数
通过ref生成一个 引用对象(ref对象) ，定义一个响应式的数据
传统写法：打印输出的值 是 李四，但是页面数据不变–>数据不是响应式的–>通过ref转为响应式
123456789101112131415161718192021222324<template> <h2>{{name}}</h2> <h2>{{age}}</h2> <button @click="changeValue">button</button></template><script>export default { setup(){ let name = "张三"; let age = 20; let changeValue=()=>{ name=& ...
Vue3
Vue3Vue3介绍
Vue.JS 3.0兼容2.0的大多数语法。
性能提升
项目打包体积更小；
需要的运行内存更小；
初次渲染更快，更新渲染更快；
使用Proxy代替Object.defineProperty实现数据响应式；
重写虚拟Dom的实现和Tree-Shaking；(提升模板编译的速度；摇树操作–>减少项目打包的体积)
更好的支持TypeScript；
获取Vue3.0
cdn方式
创建实例对象的方式不一样；
挂载应用实例的方式不一样；
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i ...
Echarts
Echarts一个基于 JavaScript 的开源可视化图表库。
安装方式12345npm init -y //初始化项目 npm install echarts --save //下载echarts//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;//原生可以在官网-->入门篇-->获取Echarts-->从 CDN 获取-->最上面的/dist/echarts.min.js-->打开之后右键-->另存为<script src="./echarts.min.js"></script>
快速上手参考echarts官网上的快速上手
引入js文件
创建一个div来做dom容器；容器必须设置宽高，不然不会出来；
逻辑处理
1<div id="box" style="width:500px;height:500px"></div>
123456789101112131415161718192021222 ...
NodeJs3 Express
Express简介
Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用
Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装
严格上来说 express就是NodeJS的一个模块 直接下载安装
使用
node下载express模块：
命令 ：
初始化服务 ： npm init -y
下载express： npm i express
使用的时候 引入 需要实例化一个express应用 使用应用对象创建各种服务
express响应
express响应的时候使用response对象中的send方法进行响应 注意 send只能响应一次 如果多次 将不执行
只会执行第一次响应的内容
使用send的时候 不需要设置头信息 直接使用就可以
12345678910111213const express = require("express");// 创建一个应用 (不用new)let app = express();// 测试一个w ...
NodeJs2服务器
NodeJs服务器创建服务器res.end()；里面的内容可以展示在定义的接口网页中。
method1：
1234567891011121314151617181920212223/** * 使用核心模块http模块进行创建 * 涉及到的方法有: * createServer 创建一个Web服务器 内置一个参数 参数是回调函数 可以不传递参数 * listen方法 这个是服务器的listen方法 主要进行监听 * */const http = require('http');// 创建服务器 使用createServer方法// 内置一个参数 参数是回调函数 回调内置两个参数// 第一个参数是请求 第二个参数是响应// 返回值是服务器对象let server = http.createServer((req, res) => { res.end("hello World")})// 进行监听 设定浏览器访问的IP和端口// 使用listen方法 内置三个参数// 第一个参数是端口号 ...
NodeJs1内置模块
NodeJs内置模块
Tips：内置模块：下载NodeJs自带的模块，无需二次下载。
fs模块文件操作都是基于fs模块。
操作文件同步读取readFileSync：同步读取(两个参数) 第二个参数可以是一个对象{encoding:’utf-8’};可以为字符串’utf-8’。有返回值，返回值为读取的内容。
1234567//找不到 字符串 是 undefined ; 找不到 对象 是 null;let fs = require("fs");let result = fs.readFileSync("./文本ing.txt",{encoding:"utf-8"});let results = fs.readFileSync("./文本ing.txt",'utf-8');console.log(result);console.log(results);console.log("后续的代码!");
现象：由于是同步读取，会进行代码阻塞，先读取文 ...