setState() 说明更新数据setState() 是异步更新数据的可以多次调用 setState()，之后触发一次重新渲染（render）使用下面这种语法时，后面的 setState() 不要依赖于前面的 setState()this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) console.log(this.state.count) // 1 this.setState({ count: this.state.count + 1 // 1 + 1 }) conso...

refs组件内的标签可以定义 ref 属性来标识自己字符串形式的 ref我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。<input type="text" ref="input1" />回调形式的 ref<input type="text" ref={ (currentNode) => { this.input1 = currentNode } } />如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入...

组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，将一个完整的功能拆分成多个组件，以更好地完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯组件的 props组件是封闭的，要接收外部数据应该通过 props 来实现props 的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数 props 接收数据，类组件通过 this.props 接收数据// 函数组件 // 接收数据 function Hello(props) ...

React 组件介绍组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能可复用、独立、可组合React 组件的两种创建方式使用函数创建组件使用 JS 的函数（或箭头函数）创建的组件函数名必须以大写字母开头函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容function Hello() { retunr ( <div>这是一个函数组件！</div> ) } const Hello = () =>　<div>这是一个函数...

JSX 基本使用JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码声明式雨打更加直观、与HTML结构相同，降低了学习成本、提升开发效率使用步骤// 1. 使用 JSX 语法创建 react 元素 const title = <h1>Hello JSX</h1> // 2. 使用 ReactDOMO.render() 方法渲染 react 元素到页面中 ReactDOM.render(title, document.querySelector('#root'))React 元素的属性名使用驼峰命名...

React 概述用于构建用户界面的 JavaScript 库是一个将数据渲染为 HTML 视图的开源 JavaScript 库React 特点声明式只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样,React 负责渲染 UI，并在数据变化时更新 UIconst jsx = <div clssName="app"> <h1>Hello React! 动态变化数据：{ count }</h1> </div>基于组件采用组件化模式、声明式编码，提高开发...

安装 SassSass 中文网sass有两种后缀名文件一种后缀名为 sass，不使用大括号和分号另一种后缀名为 scss，这种和我们平时写的css文件格式差不多，使用大括号和分号。编译 Sass命令行编译#sass 要编译的sass文件路径:编译完成后放到那里叫什么 sass sass/style.sass:css/style.css自动编译#sass --watch 要监听的文件:放到那个文件 sass --watch sass:css编译格式nested 嵌套compact 紧凑expanded 扩展compressed 压缩更改编译格式sass --watch sass:css -...

Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking......3.拥抱TypeScr...

vue-cilvue-cli（俗称：vue脚手架）是 vue 官方提供的。快速生成 vue 工程化项目的工具特点：开箱即用基于 webpack功能丰富且易于开发支持创建 vue2 和 vue3 的项目创建项目vue-cli 提供了创建项目的两种方式：// 基于 【命令行】的方式创建 vue 项目 vue create 项目名称 // 基于 【可视化面板】 创建 vue 项目 vue ui组件库常用的组件库PC 端Element UIView UI移动端Mint UIVant UIElement UIElement UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vu...

导航守卫可以控制路由的访问权限声明全局导航守卫全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制：// 在 router.js 中 // 创建路由实例对象 const router = creteRouter({ ... }) // 调用路由实例对象的 beforeEach 函数，声明 “全局前置守卫” // fn 必须是一个函数，每次拦截到的路由请求，都会调用 fn 进行处理 // 因此 fn 叫做 “守卫方法” router.beforeEach(fn)守卫方法的 3 个形参// 创建路由实例对象 const router = creteRouter({ ... })...

vue-router 的版本vue-router 目前只有 3.x 的版本和 4.x 的版本：vue-router 3.x 只能结合 vue2 进行使用vue-router 4.x 只能结合 vue3 进行使用vue-router 4.x 基本使用在项目中安装 vue-router在 vue3 的项目中，只能使用 vue-router 4.x：npm install vue-router@4 -S定义路由组件在项目 view 文件夹中自定义组件，将来要使用 vue-router 来控制它们的展示与切换声明路由链接和占位符使用 <router-link> 标签来声明路由链接，并...

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios

组件运行过程组件的生命周期指的是：组件从创建 -> 运行（渲染）-> 销毁的整个过程，强调的是一个时间段 Vue2-生命周期&数据共享 2022-09-21 09:28:03 ...

vue3.x 和 vue2.x 版本对比vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并废弃了某些 2.x 中的旧功能：新增的功能有组合式API、多根节点组件、更好的 TypeScript 支持等废弃的旧功能有过滤器、不再支持 $on、$off、$once 实例方法等过滤器兼容性过滤器仅在 vue2.x 和 1.x 中受支持，再 vue3.x 的版本中剔除了过滤器相关的功能可以使用计算属性或方法代替被剔除的过滤器功能单页面应用程序 SPA（Single Page Application）优点1. 良好的交互...

ES6 模块化ES6 模块化规范是浏览器与服务器端通用的模块化开发规范ES6 模块化规范中定义：每个 js 文件都是一个独立的模块导入其他模块成员使用 import 关键字向外共享模块成员使用 export 关键字ES6 模块化基本语法1. 默认导出与默认导入默认导出：export default 默认导出的成员// 定义模块私有成员 n1 let n1 = 10 // 定义模块私有成员 n2（外界访问不到 n2 因为它没有被共享出去） let n2 = 20 // 定义模块私有方法 show function show() { } // 使用 export default 默认导出语...

请输入密码访问

Vuex 概述Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用 Vuex 统一管理状态的好处能够在 vuex 中集中管理共享的数据，易于开发和后期维护能够高效的实现组件之间的数据共享，提高开发效率存储在 vuex 中的数据都是响应式的，能够实现保持数据与页面的同步Vuex 的基本使用1. 安装 vuex 依赖包npm install vuex --save2. 导入 vuex 包import Vuex from 'vuex' Vue.use(Vuex)3. 创建 store 对象const store = new Vuex.Store({ ...

Yarn 常用命令npmYarn作用npm inityarn init初始化npm installyarn install 或 yarn安装依赖npm uninstallyarn remove删除依赖无yarn cache clean删除共享缓存文件npm updateyarn upgrade更新依赖npm run buildyarn run build 或 yarn build打包项目npm run serveyarn serve运行项目混用 npm i 和 yarn add 可能会造成包丢失

前端路由的概念与原理路由（router）就是对应关系SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这位一的一个页面内完成；此时，不同组件之间的切换需要通过前端路由来实现在 SPA 项目中，不同的功能之间的切换，要依赖于前端路由来完成前端路由就是 Hash 地址与组件之间的对应关系前端路由的工作方式用户点击了页面的路由链接导致了 URL 地址栏中 Hash 值发生了变化前端路由监听到了 Hash 地址的变化前端路由把当前 Hash 地址对应的组件渲染到浏览器中前端路由就是 Hash 地址与组件之间的对应关系实现简单的前端路由步骤1...

动态组件动态的切换组件的显示与隐藏vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染：<-- 2. 通过 is 属性，动态指定要渲染的组件 --> <component :is="comName = 'Left'"></component> <-- 3. 点击按钮，动态切换组件的名称 --> <button @click="comName = 'Left'">展示 Left 组件</button> <button @click...

canvas 简介HTML5 <canvas> 元素用于图形的绘制，通过脚本JavaScript来完成；<canvas> 标签只是容器，必须使用脚本来绘制图形使用 canvas使用 canvas 只需要引入 canvas 标签即可<canvas width="500" height="500"> 您的浏览器不支持 Canvas </canvas>常用方法和属性画直线获取画布获取画布的上下文开始一条路径确定起始点确定结束点着色结束路径// 获取 canvas 标签 let canvas = do...

组件的生命周期生命周期 & 生命周期函数生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个过程，强调的是一个时间段生命周期函数是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次执行生命周期强调的是时间段，生命周期函数强调的是时间点组件生命周期函数的分类生命周期图示组件之间的数据共享组件之间关系组件之间最常见的关系分为以下两种：父子关系兄弟关系父组件向子组件共享数据父组件向子组件共享数据需要使用自定义属性：// 父组件 <Son :msg="message" :user="userinfo&quo...

watch 侦听器watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作const vm = new Vue({ el: '#app', data: { username: '' }, watch: { // 监听 username 的变化 // newVal 是 “变化后的新值”，oldVal 是 “变化之前的旧值” username(newVal, oldVal) { console.log(newVal, oldVal) } ...