前端框架
文章平均质量分 79
一生注定学霸命
这个作者很懒,什么都没留下…
展开
-
9-1 Webpack(配置webpack、转译JS文件、HTTP缓存)
框架的前奏,学会一些工具才能使用框架1.前置知识ES6的使用let / const / 箭头函数 / … / new / class / Promise继承 / this / 原型CSS语法和布局MVC概念Model / View / Controller / EventBus工具的使用VSCode 或 WebStorm终端命令行: npm / yarn / http-server / parcel / git2.用到的工具webpack@5官网链接安装方法见官网,在 .原创 2021-05-12 22:36:32 · 258 阅读 · 0 评论 -
0-8 【React】 Hooks(所有API)
1.useState在React的函数组件中,默认只有属性没有状态注意事项1:不可局部更新如果state是一个对象,不能部分setState,因为setState不会帮我们合并属性解决:要先把整个对象拷贝过来(...use),然后再局部修改覆盖它setUser({ ...user, name:'Jack'})注意事项2 :地址要变在set的之后不能set之前的对象,地址要变,不然React发现地址没变就认为数据也没变事项3:useState初始值可以写成函数好处:减少多.原创 2021-05-21 12:48:33 · 400 阅读 · 1 评论 -
0-7【React】Hooks 原理解析(useState、useRef、useContext)
1.useState执行setN的时候:n会变吗?App()会重新执行吗?1.n不会变,setN不会改变n2.App()会重新执行,会产生一个新的n注意:旧n和新n同时存在这就是React的思想,永远产生新的对象,不改变旧值App()重新执行,那么useState(0)的时候,n每次的值会不同吗?答:会。1.1 分析setN1.setN 一定会修改数据x,将n+1存入x2.setN 一定会触发 <App />重新渲染(re-render)useStateuseS原创 2021-05-20 19:58:26 · 977 阅读 · 0 评论 -
0-6 React函数组件(useState、useEffect、自定义Hook组件)
目录创建方式没有state怎么办没有生命周期怎么办useState的原理1.创建方式就是创建一个函数组件只是说明能和别人组合起来const Hello = (props)=>{ return <div>{props.message}</div>}//等价于const Hello = props => <div>{props.message}</div>//等价于function Hello(props) {原创 2021-05-20 17:56:29 · 643 阅读 · 0 评论 -
0-5【React】Class 组件(生命周期)
生命周期let div = document.createElement('div')//这是div的 create/construct 过程div.textContent='hi'//这是初始化state(这不是生命周期)document.body.appendChild(div)//这是div的 mount 过程div.textContent='hi2'//这是div的 update过程div.remove()//这是div的 unmount 过程React组件也有这些过程,可原创 2021-05-20 13:18:45 · 465 阅读 · 2 评论 -
0-4【React】Class 组件(ES6创建、Props、state)
1.两种创建class组件的方式ES5(过时)由于ES5不支持classES6 方式import React from 'react'class B extends React.Component{ constructor(props){ //从父组件接收来的,会把props放到this上面 super(props) } render(){ return ( <div>hi</div> ) }}//B作为组.原创 2021-05-20 11:30:57 · 549 阅读 · 1 评论 -
01-3 React组件(类组件、函数组件、props、state)
目录类组件和函数组件如何使用 props 和 state外部数据和内部数据如何绑定事件复习this1.组件 component1.1 Element 和 componentconst div = React.createElement('div',...)这是一个React元素(d小写)const Div = ()=> React.createElement('div',...)这是一个React组件(D大写)1.2 什么是组件能跟其他物件组合起来的物件,就是组件原创 2021-05-19 21:17:08 · 2070 阅读 · 2 评论 -
01-2 【React】React起手式(JSX、判断、循环)
JSXX表示扩展,JSX就是JS扩展版1.vue-loader和react-loaderVue有vue-loader1..vue文件里写<template>、<script>、<style>2.通过vue-loader变成一个构造选项(组件)React有 JSX1.react-loader就是 babel-loader2.而babel-loader被webpack内置了2.使用JSX方法一:CDN(不用这个,效率太低)1.标签就写成标签,放原创 2021-05-19 16:32:28 · 857 阅读 · 1 评论 -
01-1【React】React起手式(引入、函数延迟执行、React元素)
目录如何引入React函数的本质——延迟JSX的用法条件判断与循环1.如何引入React1.1 CDN引入(很麻烦,没人用)操作1.需要引入两个库,注意顺序2.react、react-dom—react.development.js—react-dom.development.js3.引入这两个库之后就可以使用自己的JS文件项目默认可以使用parcel来运行// 对象console.log(window.React);// 函数console.log(win原创 2021-05-19 15:25:22 · 1450 阅读 · 1 评论 -
0-12 Vue 动画原理(列表过渡)
列表过渡常用怎么渲染整个列表,比如对:v-for列表进行渲染答:使用<transition-group>组件1.区别于transition不同于 <transition>它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。过渡模式不可用,因为我们不再相互切换特有的元素。也就是mode=out-in内部元素总是需要提供唯一的 key attribute 值。如果key没有提供,或者不是唯一就会原创 2021-05-18 23:37:33 · 88 阅读 · 0 评论 -
0-11 Vue 动画原理(transition过渡、animation、velocity、多元素动画)
1.轮播组件 slides淘宝首页的广告位:轮播轮播最难的点:最后一个到第一变化Vue动画方式1 - CSS transition官方文档CSS过渡1.做一个简单的动画需要哪几布给元素外添加一个transition标签<transition name="fade">标签元素</transition>在CSS里面写一个以fade开头的一系列的类.fade-enter-active需要给变化元素初始值(有些属性有默认值就不需要初始值)添加一个事件监听原创 2021-05-18 23:00:07 · 510 阅读 · 1 评论 -
Vue Router - 前端路由实现思路(三种模式:hash、history、memory)
1.路由是什么搞清楚这几个概念:路由分发路由表默认路由如果没有#n,就给一个默认值number = number || 1;404 路由 / 保底路由如果用户输入了错误路径,就给一个404页面,保证用户总是能够看到一个页面嵌套路由1.1 路由器如果家里有1个即以上的人要上网,就需要一个路由器上网路由1.用户上网连接路由器,路由器看你想连哪里,就会把信号包发给相应的地方(百度、抖音、腾讯等)2.分发:分别发送到各个地方3.路由就是分发请求,路由器就是分发请求的东西4.路原创 2021-05-18 18:34:22 · 3366 阅读 · 2 评论 -
0-0 Vue:表单与v-model
官方文档1.v-model指令v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。双向绑定1.修改内存中的message,UI会自动变化(改了内存,页面会变化)2.如果用户修改了input内容,那么内存中message也会变化<template> <div id="app"> //双向绑定 <input v-model="message" plac.原创 2021-05-18 14:23:42 · 1721 阅读 · 0 评论 -
0-9 Vue进阶属性(provide 和 inject)
一、provide 和 inject提供和注入1.举例换肤class后面两个引号1.在div上面绑定了一个class2." ":是表示里面内容是class的值,这不是JS的双引号,是XML的双引号,中间有空格,如果删掉断句就错了3.``:是JS的双引号,说明里面有变量,删掉就不是JS字符串了含义是:div有两个class,一个是app,还有一个是theme-${thiemeName}theme-${thiemeName}:theme-bule、theme-red所谓换肤,就是改di原创 2021-05-18 12:31:28 · 141 阅读 · 0 评论 -
0-8 Vue进阶属性(directives、mixins、extends)
1.Directives 指令内置指令v-if、v-for、v-show、v-html等自定义指令自己造出 v-x,点击即出现一个x1.1 自定义指令一、声明一个全局指令Vue.directive('x',directiveOptions)就可以在任何组件里使用 v-x<img v-x alt="Vue logo" src="./assets/logo.png" width="25%">// 注册一个全局自定义指令 `v-focus`Vue.directive('f原创 2021-05-17 17:20:53 · 470 阅读 · 1 评论 -
0-7 Vue全解:指令、修饰符(.sync)
指令 Direction1.什么是指令以 v- 开头的东西就是指令1.和默认属性区分开2.只有两个缩写不用加 v-事件:@绑定::语法1.v-指令名:参数=值,如: v-on:click=add2.如果值里没有特殊字符,则可以不加引号3.有些指令没有参数和值,如 v-pre(不对花括号进行操作)4.有些指令没有值,如 v-on:click.prevent(阻止默认事件)<a @click.prevent href="https://www.baidu.com">baid原创 2021-05-16 18:55:27 · 257 阅读 · 1 评论 -
0-6 Vue全解:模板、指令
Vue模板语法1.模板 template 三种写法一、Vue完整版,写在HTML里//写在HTML里<div id=xxx> {{n}} //被替换 <button @click="add">+1</button>//被理解,然后添加一个事件监听</div>new Vue({ el: '#xxx', //传一个选择器 data:{n:0}, //data 可以改成函数 methods:{ add(){} }})原创 2021-05-16 17:21:16 · 138 阅读 · 1 评论 -
computed和watch的区别
1.computed就是计算属性,watch就是监听2.computed就是用来计算出一个值,第一个是这个值在调用的时候不需要加括号,当属性使用;第二是它根据依赖会自动缓存,依赖不变computed的值就不会重新计算3.watch如果一个属性变化了,那么就执行一个函数,它有两个选项,第一个是immediate,表示在第一次渲染的时候是否执行这个函数,第二个是deep,监听一个对象的时候是否要看对象里面属性的变化。...原创 2021-05-16 11:11:08 · 8496 阅读 · 0 评论 -
0-3 Vue构造选项(computed、watch)
进阶属性1.响应式原理options.data1.会被 Vue 监听2.会被 Vue 实例代理3.每次对 data 的读写都会被 Vue 监控4.Vue 会在data 变化时 更新 UI那么:data变化时除了更新UI还能做点什么?2.computed-计算属性用途1.被计算出来的属性就是计算属性2.当属性变化时,重新计算3.用于:用户名展示4.用于:列表展示计算属性:可以让是其他属性计算而来的结果变成一个属性1.默认会去读这个属性的返回值2.列表选择展示:是通过列表u原创 2021-05-16 11:02:39 · 157 阅读 · 0 评论 -
0-4 Vue:数据响应式(响应式、set、篡改API)
1.什么是响应式若物体能对外界的刺激作出反应,它就是响应式的2.Vue的data是响应式const vm = new Vue({data:{n:0}})如果修改 vm.n,那么UI中的n就会来响应我Vue2通过 Object.defineProperty来实现数据响应式3.响应式网页如果改变窗口大小,网页内容就会做出响应,那就是响应式网页4.Vue的data有bugObject.defineProperty 的问题1.Object.defineProperty(obj,'n原创 2021-05-15 18:23:00 · 509 阅读 · 5 评论 -
0-4 Vue:数据响应式(data、Object.defineProperty、getter、setter、代理、监控)
Vue对data做了什么?1.getter和setterlet obj = { 姓:'高', 名:'圆圆', get 姓名(){ return this.姓 + this.名 }, set 姓名(xxx){ this.姓 = xxx[0] this.名 = xxx.substring(1) }}obj.姓名 = '刘诗诗'console.log('需求一:'+ obj2.姓名)//需求一:高圆圆console.log(`需求二:姓${obj.姓},原创 2021-05-15 15:41:38 · 447 阅读 · 2 评论 -
0-3 Vue构造选项(Vue实例、内存图、options、入门属性)
1.Vue实例实例就是对象比如:之前用jQuery去选择一个元素(如:#app),得到的是一个jQuery实例,这个实例封装了对那个元素的所有操作Vue也是一样的,用Vue做出一个Vue实例2.内存图const vm = new Vue(options)一般前面的const vm可以省略,直接写:new Vue(options)构造一个Vue的实例:new Vue(options)1.这个实例会根据你给的选项得出一个对象:vm2.vm封装了这个DOM对象,以及对应的所有操作(事件绑原创 2021-05-15 00:42:34 · 663 阅读 · 2 评论 -
0-2 Vue完整版和运行时版的区别
Vue完整版和运行时版的区别1.两个版本对应的文件名完整版:vue.js运行时版本:vue.runtime.js2.template 和 render 怎么用完整版:templatenew Vue({ el:'#app',//元素直接从HTML里面拿 template:` <div>{{n}}</div> ` data:{ // data可以是函数也可以是对象 n:0 }})运行时版:rendernew Vu原创 2021-05-14 17:42:48 · 147 阅读 · 0 评论 -
0-1 Vue (历史、@vue/cli 搭建项目、Vue实例、vue-loader、SEO友好)
框架1.Vue的历史View,意为:MVC中的VMVC中的V是Vue的重点,M和C则被简化主要关心视图版本1.2015年,1.0版本——Vue是MVVM框架2.2016年,2.0版本——Vue就不是MVVM框架如何学习Vue1.用CRM把所有文档过一遍2.写一篇博客2.使用 @vue/cli 搭建项目搞出一个使用Vue的项目2.1 方法一:使用@vue/cli官方文档1.安装:yarn global add @vue/cli(想要具体版本后面@4)2.创建文件:.原创 2021-05-14 17:24:21 · 222 阅读 · 3 评论 -
9-4 Webpack(部署到github)
如何使用 webpack10.一键部署到 github做了网页目的就是给别人看步骤1.本地打包2.上传到github10.1 一个文件上传git add . – git commit -v – yarn build(重新生成dist目录)理论上来说dist目录中的内容就是一个独立的前端网站1.在本地用http-server测试一下2.cd dist – http-server -c-13.本地预览没问题就可以上传到github上传到github一个小tip:如果代码已经上传过原创 2021-05-13 17:39:30 · 590 阅读 · 2 评论 -
9-3 Webpack(框架图、引入SCSS、LESS、Stylus、引入图片、懒加载)
如何使用 webpack框架图loader转换是1对1plugin插件转换可以是n对1webpack内置打包JS文件,但其他的CSS需要自己下载loader和plugin的区别是什么?1.翻译一下:loader就是加载器,plugin就是插件2.中文解释:加载器就是用来load(加载)一个文件,比如说babel-loader就是用来加载高级的JS把它变成低版本浏览器支持的JS,css-loader和style-loader是用来加载CSS,然后把它变成页面上的标签,还可以加载图片文件,对图原创 2021-05-13 16:15:59 · 406 阅读 · 0 评论 -
9-2 Webpack(生成HTML、引入CSS、config模式切换)
如何使用 webpack4.用 webpack 生成 HTML做项目的时候最好是git提交一下,因为有可能做着做着做毁了,没办法撤回官网链接:HTMLWebpack安装:yarn add html-webpack-plugin --dev复制代码到之前的webpack.config.js文件中删掉重复的命令,也就多了两句话声明放前面,plugins放在module里面即可const HtmlWebpackPlugin = require('html-webpack-plugin');{原创 2021-05-13 12:54:35 · 306 阅读 · 1 评论