![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
实践系列
文章平均质量分 84
公子清
夯实基础,深入框架,node全栈,架构前端,谁的未来不迷茫,就看怎么实践,不忘初心,不惧未来。
展开
-
前端基础(一)
认知前端前端不分离原理:前端发送请求,页面看到的效果都是由后端控制后端通过渲染html页面或重定向后端控制前端的展示,前端与后端的耦合度很高。前端分离客户端原理:1.前端基于ajax发送数据请求到服务器端,服务器端只把数据返回 [{ titke:xxx}…](后端仅返回前端所需的数据)2.前端拿到数据后,基于JS把数据动态绑定在页面上3.前端决定展示的效果,前端与后端的耦合度很低。好处:1.助于团队协作开发,前端不需要关注后台技术,只需要基于ajax获取到数据即可2. 分原创 2021-03-03 15:27:34 · 126 阅读 · 0 评论 -
安装vue-cli3.0版本指南
安装vue-cli3.0版本操作指南日常使用vue-cli3.0以下版本,随着前端不断更新vue-cli3.0以上版本,那么安装新版本会遇到很多问题,并不是所有人都会一番风顺,应粉丝要求,出3.0以上版本操作指南请先看下鄙人的vue-cli3.0以下版本操作详情,百试不错的详情操作,实践中尝试了很多次错误,才总结出来的真经方法:安装vue错误详情解决办法:https://blog.csdn.net/Josiah_Yuan/article/details/103605963那么vue-cli3.0原创 2020-10-19 13:13:35 · 3457 阅读 · 1 评论 -
vue实践局部组件需求-投票
vue实践局部组件需求-投票投票局部组件实践和组件之间的嵌套:1.搭建结构(html+css布局)2.在组件标签中拆分成多个局部组件3.删除第一步的搭建结构(html+css布局)代码4.在组件中调取渲染使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-06-10 20:05:20 · 575 阅读 · 0 评论 -
vue基础实践: 局部组件
vue基础实践: 局部组件知识点总结:创建局部组件-注册局部组件-声明组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"原创 2020-06-10 20:01:33 · 152 阅读 · 0 评论 -
vue基础实践:组件命名的规则
vue基础实践:组件命名的规则组件的特点:* - 可复用* - 方便维护* - 每一个vue组件都是一个独立的个体(独立的vm实例):DATA是独立的(不同组件的data应该互不干扰)有完整的生命周期,方法等也是独立的* - 能够实现组件的嵌套:需要掌握组件之间的信息通信//* 全局组件:无需单独引用或者配置,直接在大组件中调取全局组件即可* Vue.component(componentName, options)* + options可以使用的有vm实例具备的一切(D原创 2020-06-09 11:42:52 · 494 阅读 · 0 评论 -
vue基础实践:生命周期钩子函数
vue基础实践:生命周期钩子函数el :'#app' 用来指定当前vm所关联的视图el:'#app', 等价于template: '<h1>{{msg}}</h1>',//指定了template与 el:'#app'没有关系了生命周期函数(钩子函数)beforeCreated 创建实例之前created 创建实例成功 ,(一般在这里实现数据的异步请求)异步发送ajax请求,beforeMount 渲染Dom之前,加载组件第一次渲染(把渲染的结果放到页面之前){{ms原创 2020-06-09 09:41:32 · 177 阅读 · 0 评论 -
vue基础实践:refs
vue基础实践:refsrefs vue框架开发的时候,我们尽可能减少直接操作dom 基于元素给当前元素设置refs,可以把当前元素放到this.$refs对象中,从而实现对DOM的直接操作(只有在mounted及之后才可以获取到这些元素)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2020-06-09 09:08:34 · 350 阅读 · 0 评论 -
vue基础实践1:双循环,双事件选择显示
vue基础实践1:双循环,双事件选中显示<!-- 选中显示: 两个循环v-for,两个事件v-bandle -->some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。<!DOCTYPE html><html lang="en"><head> <原创 2020-06-09 09:05:30 · 636 阅读 · 0 评论 -
vue基础实践1: 经典选项卡
vue基础实践1: 经典选项卡选项卡方法: 1. vue方法选项卡 2. 事件委托方法性能好点2大经典选项卡思路:1.3个li控制1个div,每次点击li都控制div里面的内容发生变化2.3个li控制3个div显示隐藏`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2020-06-05 21:08:55 · 346 阅读 · 0 评论 -
vue基础实践1:class和style数组样式类
vue基础实践1:class和style数组样式类class和style数组样式类 对象方式处理动态的样式; :class="{样式类名:响应式数据...}" 响应式数据为true则有这个样式,反之则没有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-06-04 11:05:35 · 607 阅读 · 0 评论 -
vue基础实践1:vue基础语法
vue基础实践1:vue基础语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-06-03 19:25:14 · 189 阅读 · 0 评论 -
vue基础实践: filter过滤器单词首字母大写
vue基础实践: filter过滤器单词首字母大写多种方式实现单词首字母大写反转单词首字母大写(正则)词首字母大写(第二种方式写一个方法)单词首字母大写(第二种方式vue过滤器)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-06-03 19:16:17 · 2114 阅读 · 0 评论 -
vue基础实践1:单选按钮和复选按钮特点
vue基础实践1:单选按钮和复选按钮特点单选按钮和复选按钮特点:1.按照v-model进行分组,单选框准备的数据是一个值,复选框准备的数据是一个数组2.每一个框都有自己的value,谁被选中,数值就是被选中元素的value值;相反值是多少,对应value的元素也会默认被选中;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="原创 2020-06-03 19:11:58 · 521 阅读 · 0 评论 -
vue基础实践1:事件修饰符
vue基础实践1:事件修饰符> v-on (简写@):用来实现事件绑定的指令 v-on:click:xxx等价于@click='xxx' 1.事件触发的时候,需要传递参数信息,把方法加小括号,$event是事件对象 v-on:click='sum($event,10,20)' 2.事件修饰符 常规修饰符:@keydown.prevent/stop = 'xxx' 按键修饰符:@keydown.enter /space/delect/up/right/down/left...='xxx' 键盘码:@k原创 2020-06-03 18:58:47 · 207 阅读 · 0 评论 -
vue基础实践1:for循环
vue基础实践1:for循环v-for :循环动态绑定数据 1.想循环谁就给谁设置v-for 2.循环类似for/for in的语法:v-for='(item,index) in arr'ES6新增for of 循环1.获取的不是属性名是属性值2.不会遍历原型上的公有属性方法(哪怕是自定义的)3.只能遍历可被迭代的数据类型值(Symbol.iteratoer): Array , String , Arguments , NodeList ,Set , Map等,但是普通对象是不可迭代的数据,所原创 2020-06-03 18:51:22 · 275 阅读 · 0 评论 -
vue基础实践4: computed计算属性实例filters的运用
vue基础实践4: computed计算属性实例filters的运用计算属性实例filters的运用动态绑定的值,用v-bond或者:如::id='item.id' :v-model='',如果是静态写死的id='item.id' v-model=''<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content原创 2020-06-03 18:41:29 · 339 阅读 · 0 评论 -
vue基础实践3-computed真实项目中最正规的用法
vue基础实践-computed真实项目中最正规的用法真实项目中,计算属性computed最正规的写法,追求高质量代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ原创 2020-06-03 16:30:15 · 297 阅读 · 0 评论 -
vue基础实践2: computed计算属性实例字母反转
vue基础实践2: computed计算属性实例字母反转计算属性conmputed反转和methods方法对比<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-原创 2020-06-03 12:01:03 · 392 阅读 · 0 评论 -
vue基础实践1: computed计算属性
vue基础实践1: computed计算属性1.计算属性:它不是方法是一个属性,所有在视图中调取的时候不能加括号执行,toUp和DATA中的text一样,都会挂载在实例上,它存储的值是对应的方法返回的结果(getter函数出来的结果)2.计算属性有自己的缓存处理:第一次获取toUp这个属性值,会关联某个响应式数据(text),当第一次结果获取后,会把这个结果缓存下来;后期视图重新渲染,首先看text值是否发生改变,如果发生更改,会重新计算toUp属性值,如果没有更改,则还会拿上次缓存的结果进行渲染原创 2020-06-03 10:57:58 · 190 阅读 · 0 评论 -
vue基础实践1-VUE的指令使用
vue基础实践1-VUE的指令VUE的指令:directive1.都是按照v-xxx处理的,它是规定给元素设置的自定义属性2.当vue加载成功并进行处理的时候,会按照相关的规则解析和渲染视图,遇到对应的指令实现对应的功能。v-model 一般给表单元素设置的,实现表单元素和数据之间的相互绑定1)先把数据绑定表单元素一般把数据赋值给表单元素的value2)监听表单元素的内容改变3)内容改变后,会把对应的数据也改变4)对应的数据改变,视图中所有用到的数据的地方都会重新渲染视图 <=>原创 2020-06-03 10:49:17 · 169 阅读 · 0 评论 -
vue基础实践1-watch监听器(监听响应式数据的变化)
vue基础实践-watch监听器(监听响应式数据的变化)watch监听响应式数据改变(watch中监听的响应式数据必须在data中初始化)= > computed中的setter类似,只不过computed是自己单独设置的计算属性(不能和data中的冲突,而watch只能监听data中有的属性)wacth监听器支持异步操作,computed不支持异步操作,getter需要返回结果,不支持异步获取数据<!DOCTYPE html><html lang="en">原创 2020-06-03 10:29:25 · 518 阅读 · 0 评论 -
vue基础实践2 : V-MODEL先实现把数据绑定到视图层
vue基础实践1 : V-MODEL先实现把数据绑定到视图层vue和react都放弃操作dom<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa原创 2020-06-03 09:55:45 · 320 阅读 · 0 评论 -
vue基础实践1-胡子语法展现到页面
vue基础实践1-胡子语法展现到页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-05-29 22:39:53 · 693 阅读 · 0 评论 -
实践面试系列:真题1
document.prlet vs var1.let没有变量提升(但在词法解析阶段也得知某一个变量是否是私有变量)2.let不允许在相同的作用域下重复声明3.let解决了JS中的暂时性死区问题4.let创建的全局变量没有给window设置对应的属性5.let会产生块级作用域…...原创 2020-01-15 17:00:14 · 160 阅读 · 0 评论 -
JS系列: 闭包作用域实践题
闭包作用域实践题 let obj={ fn:(function(n){ //把自执行函数执行的返回结果赋值给fn //this:window return fucntion(){}; //=>fn等于这个返回的小函数 //this:obj })(10 }; obj.fn(); //===============...原创 2020-01-09 22:43:22 · 206 阅读 · 0 评论 -
JS系列:选项卡之闭包
选项卡之闭包1.元素,元素节点(类数组集合)都开辟了堆内存2.自定义属性来解决this.myIndex3.利用闭包解决分析如下:1.全局作用域 栈内存 变量存储 值存储 navList AF0 变量提升 代码执行 navList = document.querySelectAll('#navBox li'); i=0 i<3 na...原创 2020-01-09 22:44:23 · 205 阅读 · 0 评论 -
JS系列:变量提升
变量提升浏览器能够让代码执行,首先开辟一块栈内存=> 作用域 或 执行上下文(context)1.执行代码 =>全局作用域2.存储变量及数据类型的值浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:'把当前作用域中所以带var/function关键字的进行提前的声明和定义 = > 变量提升机制'带var的只是提前声明(declar...原创 2019-12-23 18:15:22 · 267 阅读 · 0 评论 -
NRM&YARN&NPM模块管理
NPMnode pack manger :node模块管理工具,根据NPM我们可快速安装,卸载所需要的资源文件(例如:jQuery,vue,router)NODE官网下载安装长期稳定版本NPM也随着安装$ node -v$ npm -v 查看版本号基于npm进行模块管理https://www.npmjs,com/ 基于npm是从npmjs.com平台上下载的$ npm inst...原创 2019-12-21 21:47:49 · 297 阅读 · 0 评论 -
安装vue错误详情解决办法
安装vue错误详情解决办法寄语:vue的安装不是理想化的,会出现很多问题,需要静下心认真研究,熬过去就会懂得更多,以下是我遇到的问题和最真挚的建议,按照我的方法不会出错,一定会成功,我尝试了很多次方式,查阅了很多资料,最终总结出这篇vue安装经验,感谢阅读,送给同感之人。1.安装node,点击链接:https://nodejs.org/en/download/ a.一定要从官网下...原创 2019-12-18 22:29:32 · 1328 阅读 · 0 评论 -
前端工程化,组件化,模块化,层次化
个人认为:前端发展的导向是前端工程化,智能化,模块化,组件化,层次化。一个项目的开发逐渐在人工智能+物联网的时代,走向以下的五化原因: Web前端页面的开发必然与DOM进行交互操作,前端框架的一次次更新,是从满足目前的业务需求到提升效率的阶段,慢慢走向改善性能的阶段(开发和部署环境优化,代码优化,网站性能优化,数据优化,页面优化等等)。1.前端工程化。 前端工程化指的是将软件工程的方...原创 2019-12-18 22:11:10 · 400 阅读 · 0 评论 -
开发中的细节整理
1.截取某个字段,进行判断:ary.hasOwnProperty(key); 或 obj.hasOwnProperty(key);2.判断是否字段为空。为空时为定值:例如判断 :{{ mitem.eventName}} 字段是否为空,为空时为显示 尽情期待 <div class="block-left" v-if="item.currentEventId === mitem.e...原创 2019-12-18 22:09:38 · 101 阅读 · 0 评论 -
Ogma
Ogma是Linkurious的JavaScript图形可视化库。Ogma的一个实例是一个javascript对象,它在内部存储一个图形, 并根据样式规则在HTML容器中呈现它。Ogma有两个版本:ogma.min.js标准版ogma.dist.min.js包含Ogma和所有可选的依赖项客户端单个HTML页面在单页面应用程序中,Ogma可以作为脚本导入:<!-- Import ...原创 2019-12-18 22:04:47 · 662 阅读 · 0 评论 -
项目中Git常用的七步操作
项目中Git常用的七步操作:1.git branch -a 查看所有分支2.git checkout dev_yxq如果冲突了,操作回退上一个版本,git statusgit checkout --.或者git reset指定文件3.git checkout dev_yxq 切换分支4.git pull origin dev_yxq 在自己的分支下pull拉取最新的代码5.g...原创 2019-12-18 22:01:29 · 123 阅读 · 0 评论