CJJJX's BLOG

一、今日学习目标1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.工程化开发入门 工程化开发和脚手架 项目运行流程 组件化 组件注册 二、Vue生命周期思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。 生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段：创建响应式数据 2.挂载阶段：渲染模板 3.更新阶段：修改数据，更新视图 4.销毁阶段：销毁Vue实例 三、Vue生命周期钩子Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码 1234567891011121314151617181920212223242526272829<div id="app"> <h3>{{ title }}</h3> <div> <butto ...

一、今日学习目标1.指令补充 指令修饰符 v-bind对样式增强的操作 v-model应用于其他表单元素 2.computed计算属性 基础语法 计算属性vs方法 计算属性的完整写法 成绩案例 3.watch侦听器 基础写法 完整写法 二、指令修饰符1.什么是指令修饰符？​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2.按键修饰符 @keyup.enter —>当点击enter键的时候才触发 代码演示： 12345678910111213141516<div id="app"> <h3>@keyup.enter → 监听键盘回车事件</h3> <input v-model="username" type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">&l ...

本文是在学习vue的第一天整理的笔记，涵盖知识范围有：vue的基本概念，开发者工具安装，插值表达式，响应式特性，常见指令等。 Ⅰ、什么是Vue概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架 Vue2官网：https://v2.cn.vuejs.org/ 1.什么是构建用户界面基于数据渲染出用户可以看到的界面 2.什么是渐进式所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点 Vue的两种开发方式： Vue核心包开发 场景：局部模块改造 Vue核心包&Vue插件&工程化 场景：整站开发 3.什么是框架所谓框架：就是一套完整的解决方案 For example 如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。 我们只需要在“毛坯房”的基础上，增加功能代码即可。 提到框架，不得不提一下库。 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等 框架，是一套完整的解决方案，实现了大部分功能，我 ...

Vue小案例：基于echarts的客户消费记账单 本文是在学习了ajax, vue2的一些基本语法知识，如指令, 计算属性, 生命周期等.以及在接触了echarts这款基于JS的数据可视化图库表和bootstrap框架后,为巩固所学做的小小案例. 涉及的一些知识分析可查看代码的详细注释网页效果如下 完整代码实现如下,可按需取用123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 ...

JavaScript 进阶 - 第4天深浅拷贝浅拷贝首先浅拷贝和深拷贝只针对引用类型 浅拷贝：拷贝的是地址 常见方法： 拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象 拷贝数组：Array.prototype.concat() 或者 […arr] 如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题) 深拷贝首先浅拷贝和深拷贝只针对引用类型 深拷贝：拷贝的是对象，不是地址 常见方法： 通过递归实现深拷贝 lodash/cloneDeep 通过JSON.stringify()实现 递归实现深拷贝函数递归： 如果一个函数在内部可以调用其本身，那么这个函数就是递归函数 简单理解:函数内部自己调用自己, 这个函数就是递归函数 递归函数的作用和循环效果类似 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return 1234567891011121314151617181920212223242526272829303132333 ...

JavaScript 进阶 - 第3天 ​ 本文是在了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作封装做的笔记。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程序执行的健壮性 编程思想 学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。 面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次 调用就可以了。 举个栗子：蛋炒饭 面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对象的特性： 封装性 继承性 多态性 构造函数对比以下通过面向对象的构造函数实现的封装： 12345678910111213141516171819202122& ...

JavaScript 进阶 - 第2天 ​ 本文是在了解面向对象编程的基础概念及构造函数的作用，体会 JavaScript 一切皆对象的语言特征，掌握常见的对象属性和方法的使用做的笔记。 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的特征 掌握包装类型对象常见方法的使用 深入对象 了解面向对象的基础概念，能够利用构造函数创建对象。 构造函数构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。 12345678<script> // 定义函数 function foo() { console.log('通过 new 也能调用函数...'); } // 调用函数 new foo;</script> 总结： 使用 new 关键字调用函数的行为被称为实例化 实例化构造函数时没有参数时可以省略 () 构造函数的返回值即为新创建的对象 构造函数内部的 return 返回的值无 ...

JavaScript 进阶 - 第1天 ​ 本文是在学习作用域、变量提升、闭包等语言特征，为加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码冗余度做的笔记。 理解作用域对程序执行的影响 能够分析程序执行的作用域范围 理解闭包本质，利用闭包创建隔离作用域 了解什么变量提升及函数提升 掌握箭头函数、解析剩余参数等简洁语法 作用域 了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。 作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。 局部作用域局部作用域分为函数作用域和块作用域。 函数作用域在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。 123456789101112<script> // 声明 counter 函数 function counter(x, y) { // 函数内部声明的变量 const s = x + y console.log(s) // 18 } ...

js毕业学生就业统计表小案例本文是在学习javaScript中Web APIs板块中localStorage，事件绑定，事件委托等内容为更加熟练掌握理解相关知识的练习小案例涉及的一些知识分析 render页面利用数组中map+join的方法 render完页面后需要reset表单恢复默认值 将数据存入localStorage确保数据不丢失 存储复杂数据类型需要JSON.Stringify()方法将其转化成JSON字符串存储到本地* 网页效果如下 完整代码实现以及包含的css代码如下，可按需取用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191 ...

js新用户注册小案例(正则表达式)本文是在学习javaScript中Web APIs板块为更加熟练掌握理解正则表达式的练习小案例网页的业务模块分析 发送验证码模块 各个表单验证模块 勾选已经阅读同意模块 下一步验证模块，只要上面有一个input验证不通过就不同意提交 网页效果如下 完整代码实现以及包含的css代码如下，可按需取用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471 ...