![](https://img-blog.csdnimg.cn/20210429113006775.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端全栈从0基础到精通(祺)vue、react
文章平均质量分 57
把自己所学到的东西以及工作经验,分享给大家一个完整的web前端的教学。(如果有什么不对的地方欢迎大家评论讨论),让每一个想学习前端的人,都能实现梦想!!!《这是vue react篇》还有其他篇章,请按顺序观看哦
Midk
这个作者很懒,什么都没留下…
展开
-
页面v-for中修改item属性值后页面v-if不改变的问题
页面v-for中修改item属性值后页面v-if不改变的问题//在所写的事件函数中最底部添加下面这句话就解决了this.$forceUpdate();//因为数据层次太多,render函数没有自动更新,需手动强制刷新。添加this.$forceUpdate();进行强制渲染,效果实现。...原创 2021-07-05 17:51:36 · 504 阅读 · 0 评论 -
react的UI框架Antd,axios,状态管理
UI框架(pc和移动 Antd)5.1 设计体系官网https://ant.design/index-cnhttps://ant.design/docs/react/introduce-cn5.2 概念antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。5.3✨ 特性#???? 提炼自企业级中后台产品的交互语言和视觉风格。???? 开箱即用的高质量 React 组件。???? 使用 TypeScript 开发,提供完整的类型定原创 2021-05-13 09:31:47 · 421 阅读 · 1 评论 -
react生命周期,ref,表单,路由,路由传参接参,
一、生命周期初始化时期constructor 初始化render 渲染componentDidMount 挂载完成//大量的异步操作以及接口的调用,我们会在componentDidMount中完成更新期首先判断是否含有shouldComponentUpdate.如果有,根据返回值状态,return true。生命周期继续执行,执行render(){}执行componentDidUpdate。return false 生命周期结束如果没有,执行render(){}执行compon原创 2021-05-13 09:27:12 · 247 阅读 · 1 评论 -
react基础,脚手架,组件创建,组件通信
React基本知识react并不是框架,它只是一个类库。类似于jquery。它没有设计模式,它是单项数据流。它大部分都是原生js的写法。如果一定非要把它跟MVC中V 是一样的。它更多的是操作视图(view)react是脸书(Facebook),它最早是内部项目,13年年中开源react在国内之前没有太多的市场随着产品需求的增加(Vue是不能实现大型的电商项目pc端。vue大部分做的还是移动端)react中有一个新的语法糖,jsx (javascriptXML)它可以使js和html混合...原创 2021-05-11 19:26:50 · 249 阅读 · 3 评论 -
vue中TS的应用
TS(typescript)ts: typescript ,它是js超集(包含js所有的语法,在基础上增加了数据类型定义)它最主要做的一件事,就是数据类型验证。js是弱类型语言,java是强类型语言let a = 123,a 就是number类型。let a = '123',a就是字符串类型但是ts是在声明并定义的时候就是定义了它的数据类型。 let a:number = 100如果你要去修改a ,a只能被修改成数值型,如果你修改成其他类型,那么会报错。它运行的时候并不会报错(即使数据类型有问原创 2021-05-11 19:23:42 · 3911 阅读 · 0 评论 -
vue数据可视化界面,智慧图表。Echarts,以及git
一、数据图表一张图表胜过千万句话1.1HighChart概念兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库下载一、通过CDNhttps://code.highcharts.com.cn/index.html二、通过NPM下载(用的比较多)npm install highcharts三、通过官网下载https://www.highcharts.com.cn/download通过引入库的方式引入到本地基本应用<!DOCTYPE原创 2021-05-11 19:21:49 · 2346 阅读 · 35 评论 -
web前端全栈0基础到精通(祺)vue 09
一、UI框架1.1UI框架之PC端(elementUI)官网地址https://element.eleme.cn/#/zh-CN安装npm install(i) element-ui+ element-ui@2.15.1全局引入UI框架main.js//引入UI库import ElementUI from 'element-ui'//全局引入css样式import 'element-ui/lib/theme-chalk/index.css'Vue.use(Eleme原创 2021-05-11 19:18:00 · 79 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)vue 08
一、数据交互(axios)1.1概念axios : 读音 阿克西奥斯河它并不是vue独有的插件。axios是一个HTTP的库,基于promise创建的一般vue中或者react中进行数据交互,我们可以调用这个库易用、简洁且高效的http库(基于promise创建的)Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。1.2官网地址中文文档: http://www.axios-js.com/npm : https://www.npmjs原创 2021-05-11 19:16:30 · 86 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)vue 07
day06课程回顾组件通信父子组件通信父组件<子组件 自定义属性='字符串' :自定义属性='数据'></子组件>子组件props:['自定义属性']//做代码比较严谨,希望父组件传递数据与子组件的数据类型一致//props验证props:{}子父组件通信父组件<子组件 @自定义事件='父组件的事件名称'></子组件>methods:{ 父组件的事件名称(e){ //e是子组件传递的数据 }}子组件原创 2021-05-11 15:59:07 · 65 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)vue 06
一、slot槽口(插槽)1.1概念开辟一个插槽组件嵌套的时候,组件标签中的内容无法显示。如果你非要显示数据,那么就开辟一个槽口(插槽)1.2槽口的创建方式匿名槽口父组件<子组件>内容</子组件>子组件<slot></slot>具名槽口父组件<子组件><div slot='自定义name1'>内容1</div><div slot='自定义name2'>内容2<原创 2021-05-11 14:49:40 · 77 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)vue 05
一、组件通信(组件传值)1.1概念组件之间可以互相传递数据1.2组件通信的方式1.2.1父子组件通信父组件<子组件 :自定义属性1='变量1' 自定义属性='字符串'</子组件>子组件{ props:['自定义属性1','自定义属性'...]}props属性和data以及computed一样都是直接挂载到vue实例上的,所以命名的时候一定不能重复!!!props属性的优先级要高于data!!!注意点:props是一个单项数据流!!!prop原创 2021-05-11 14:47:40 · 79 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)vue 04
一、组件(component)在前端,两大概念一、模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中。你需要这个功能,你就引入jses6的导入导出(导出的方式决定你引入的方法)引入 import 变量名 from '地址'导出 export default 内容 =========导出 export const 变量导入 import {变量} from '地址'二、组件组件的指的是视图(静态)的封装,很多情况,静态页的结构很相似,我们可以提取出一个部分原创 2021-04-29 14:07:25 · 104 阅读 · 1 评论 -
web前端全栈0基础到精通(祺)vue 03
一、watch(监听/侦听器)1.1概念watch 用监听属性的变化。watch用来监听data的变化1.2监听方法1.2.1 浅监听浅监听可以监听,字符串,普通的数组。它不能监听对象的变化watch:{ 数据属性(newVal,oldVal){ }}1.2.2深度监听可以监听对象的变化watch:{ 对象数据属性:{ deep:true, handler(newVal){ } }}二、计算属性(computed)vue的作者:尤雨溪(美籍华人)。他原创 2021-04-29 14:05:31 · 125 阅读 · 2 评论 -
web前端全栈0基础到精通(祺)vue 02
一、localStorage 和 sessionStorage的区别相同点:都可以实现存储。它们的大小都是5MB左右。它们的存储方式都必须以字符串进行存储!!!!它们的语法都是相同。存值: localStorage/sessionStorage.setItem('key','value') 取值: localStorage/sessionStorage.getItem('key')移除(某一项) localStorage/sessionStorage.removeItem('key')不同点原创 2021-04-29 14:03:31 · 110 阅读 · 2 评论 -
web前端全栈0基础到精通(祺)vue 01
一、vue的基本知识1.1vue 的官网https://cn.vuejs.org/1.2概念渐进式的JavaScript框架????渐进式。。。自底向上,逐渐增强。vue.js它本身就是一个库,类似于jq。你可以把它当做一个普通的库去调用,完成简单的demo和界面。当我们的需求增加,产品需求的增加,普通的页面无法满足我们的日常开发需求。我们可以利用vue的够工具,也就是vue-cli 脚手架快速搭建项目的模型(项目的基本骨架都成型了)。项目越来越大,我们还可以调用vue的核心插架比如路由(v原创 2021-04-29 13:58:57 · 141 阅读 · 0 评论