avatar
文章
253
标签
366
分类
35

主页
文章
  • 归档
  • 标签
  • 分类
娱乐
  • 小游戏
  • 听音乐
  • 看烟花
  • 吹空调
Portfolio
  • HTML+CSS:小兔鲜儿(PC端)
  • HTML+CSS+JS:品优购(PC端)
  • Vue2:仿抑云音乐(PC端)
  • Vue2:后台管理系统(PC端)
  • Vue3:饿了美外卖(移动端)
  • 全栈项目:企业自动化办公OA系统(双端)
  • 全栈项目:企业后台管理系统+企业门户官网(PC端)
  • 所有项目的源码
工具箱
关于博主
肥林の仓库
搜索
主页
文章
  • 归档
  • 标签
  • 分类
娱乐
  • 小游戏
  • 听音乐
  • 看烟花
  • 吹空调
Portfolio
  • HTML+CSS:小兔鲜儿(PC端)
  • HTML+CSS+JS:品优购(PC端)
  • Vue2:仿抑云音乐(PC端)
  • Vue2:后台管理系统(PC端)
  • Vue3:饿了美外卖(移动端)
  • 全栈项目:企业自动化办公OA系统(双端)
  • 全栈项目:企业后台管理系统+企业门户官网(PC端)
  • 所有项目的源码
工具箱
关于博主

肥林の仓库

Focus |
Vue学习笔记(11)-Vue中的组件(2)
Vue学习笔记(11)-Vue中的组件(2)
发表于2022-08-12|学习前端知识分享VueVue2
1.组件之间的嵌套关系: 话不多说直接上代码: 代码解析:<body>    <!-- Vue模板 -->    <div id="root"></div></body><script type="text/javascript">    Vue.config.productionTip = false    // 创建student组件(归属于school的子组件)    const student = Vue.extend({        name:'student',        template : `            <div>                <h2>学生姓名:{{name}}</h2>                    <h2>学生年龄:{{age}}</h2>   ...
Vue学习笔记(10)-Vue中的组件(1)
Vue学习笔记(10)-Vue中的组件(1)
发表于2022-08-12|学习前端知识分享VueVue2
Vue中的组件1.什么是组件? 组件的理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..) 下面用两张图片来对比传统编码和组件编码 2.Vue中组件分为非单文件组件和单文件组件 1.非单文件组件(一般不常用): 1.模板编写没有提示 2.没有构建过程, 无法将ES6 转换成ES5 3.不支持组件的CSS 4.真正开发中几乎不用 2.单文件组件: 1. 模板页面 <template> 页面模板</template> 2. JS 模块对象 <script>  export default { data() {return {}},  methods: {}, computed: {},   components: {}}</script> 3. 样式 <style> 样式定义</style> 3.V ...
Vue学习笔记(9)-Vue中的生命周期
Vue学习笔记(9)-Vue中的生命周期
发表于2022-08-11|学习前端知识分享VueVue2
Vue中的生命周期 什么是生命周期? 这里我们用一个类比来引出生命周期: 1.类比如下: 1. 人的一生(生命周期) 时期 做的事情 婴儿将要出生 做好接生准备 婴儿出生了(重要时刻) 做身体检测,打疫苗,摆满月酒 婴儿会说话了 叫爸爸,叫妈妈,会用语言沟通 婴儿会走路了 可以进行自主的移动,可以去玩耍了 ……… ……. ……… ……. 将要死亡了(重要时刻) 男 已经死亡了 生命周期结束 由此可见,一般来讲生命周期这个概念就是相当于在什么时期,做什么事(特定的时期做特定的事) 2. Vue的生命周期(就相当于vm的一生,在特定的时候调用特定的函数) 运行时期 要运行的函数 将要创建 调用beforeCreate()函数 创建完毕 调用created()函数 将要挂载 调用beforeMount()函数 挂载完毕(重要时刻) 调用mounted()函数 ====> [重要的钩子函数] 将要更新 调用beforeUpdate()函数 更新完毕 调用updated() ...
Vue学习笔记(8)-Vue中的内置指令和自定义指令
Vue学习笔记(8)-Vue中的内置指令和自定义指令
发表于2022-08-11|学习前端知识分享VueVue2
1.Vue中的内置指令 我们之前学过的指令: v-bind  : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for   : 遍历数组/对象/字符串 v-on    : 绑定事件监听, 可简写为@ v-if    : 条件渲染(动态控制节点是否存存在) v-else  : 条件渲染(动态控制节点是否存存在) v-show  : 条件渲染 (动态控制节点是否展示) Vue中另外的内置指令: v-text指令: 1.作用:向其所在的节点中渲染文本内容。 2.与插值语法的区别:v-text会替换掉节点中的内容,则不会 v-html指令: 1.作用:向指定节点中渲染包含html结构的内容。 2.与插值语法的区别: (1).v-html会替换掉节点中所有的内容,则不会。 (2).v-html可以识别html结构 3.严重注意:v-html有安全性问题!!!! (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击 (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上 v-cl ...
Vue学习笔记(7)-Vue中表单数据的收集与过滤器
Vue学习笔记(7)-Vue中表单数据的收集与过滤器
发表于2022-08-08|学习前端知识分享VueVue2
1.Vue中表单数据的收集 若:<input type=”text”/>,则v-model收集的是value值,用户输入的就是value值。 若:<input type=”radio”/>,则v-model收集的是value值,且要给标签配置value值。 若:<input type=”checkbox”/> 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值) 配置input的value属性: (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值) (2)v-model的初始值是数组,那么收集的的就是value组成的数组 备注:v-model的三个修饰符: lazy:失去焦点再收集数据 number:输入字符串转为有效的数字 trim:输入首尾空格过滤 代码解析:<div id="root"> <!-- .prevent阻止默认事件 - ...
Vue学习笔记(6)-数据监测的原理(2):Vue中数据监测的原理
Vue学习笔记(6)-数据监测的原理(2):Vue中数据监测的原理
发表于2022-08-08|学习前端知识分享VueVue2
Vue中数据监测的原理 1. vue会监视data中所有层次的数据 2. 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value) 3. 如何监测数组中的数据? 通过包裹数组更新元素的方法实现,本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板,进而更新页面。 4.在Vue修改数组中的某个元素一定要用如下方法: 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set() 特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!! 代码 ...
Vue学习笔记(5)-前置知识复习Object.keys()和数组的常用方法
Vue学习笔记(5)-前置知识复习Object.keys()和数组的常用方法
发表于2022-08-08|学习前端知识分享VueVue2
1.复习知识:Object.keys()的详解和用法Object.keys(obj) 参数:要返回其枚举自身属性的对象 返回值:一个表示给定对象的所有可枚举属性的字符串数组 其实就是在里面传进一个对象,返回一个数组(数组里面是对象的键名(属性名)) 代码解析://处理对象,返回可枚举的属性数组let person = {name:"马保国",age:25,address:"江门",getName:function(){}}Object.keys(person) // ["name", "age", "address","getName"]//处理数组,返回索引值数组let arr = [1,2,3,4,5,6]Object.keys(arr) // ["0", "1", "2", "3", "4", "5"] ...
Vue学习笔记(4)-条件渲染,列表渲染,key的作用与原理
Vue学习笔记(4)-条件渲染,列表渲染,key的作用与原理
发表于2022-08-07|学习前端知识分享VueVue2
1.条件渲染1).v-if 写法:(非常暴力,会直接移除元素标签) (1).v-if=”表达式” (2).v-else-if=”表达式” (3).v-else=”表达式” 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。 2).v-show(他不会暴力的去动DOM树,只会做一些样式上的隐藏) 写法:v-show=”表达式” 适用于:切换频率较高的场景。 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉 3).备注:使用v-if的时,元素可能无法获取到(因为使用v-if会直接删除目标元素标签),而使用v-show一定可以获取到。代码如下:<body>    <!-- 准备好一个容器-->    <div id="root">        <h2>当前的n值是:{{n}}</h2>        <bu ...
Vue学习笔记(3)-计算属性,监听属性以及绑定样式
Vue学习笔记(3)-计算属性,监听属性以及绑定样式
发表于2022-08-05|学习前端知识分享VueVue2
1.计算属性-computed 所谓的计算属性,就是拿着你Vue中原有的属性(data里面的)去加工,计算,生成的全新的属性。 定义:要用的属性不存在,要通过已有属性计算得来。 原理:底层借助了Objcet.defineproperty方法提供的getter和setter。 get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。(在开发者工具(Vue)当中可以直接观察到) 备注: (1).计算属性最终会出现在vm上,直接读取使用即可。 (2).如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。 代码例子: <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建Vue实例 const vm = ...
魔改butterfly(8)-给博客的弹出添加特效
魔改butterfly(8)-给博客的弹出添加特效
发表于2022-08-04|学习hexo
添加 wowjs特效 参考:wowjs 特效 使用流程: 首先安装插件:npm install hexo-butterfly-wowjs --save 添加配置项# wowjs# see https://www.npmjs.com/package/hexo-butterfly-wowjswowjs: enable: true #控制动画开关。true是打开,false是关闭 priority: 10 #过滤器优先级 mobile: false #移动端是否启用,默认移动端禁用 animateitem: - class: recent-post-item #必填项,需要添加动画的元素的class style: animate__zoomIn #必填项,需要添加的动画 duration: 1.5s #选填项,动画持续时间,单位可以是ms也可以是s。例如3s,700ms。 delay: 200ms #选填项,动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms。 offset: 30 #选填项,开始动画的距离(相对浏览器底 ...
1…212223…26
avatar
肥林(Playing 🦸‍♂️)
一名菜鸡程序员
文章
253
标签
366
分类
35
Follow Me
公告
☄️欢迎来到我的博客!☄️
这个🔗站点主要用于记录博主的🤡生活和🌍学习的点滴!
最新文章
javaWeb后端技术(29) - SpringBoot快速入门(24):Maven高级(3):聚合与私服
javaWeb后端技术(29) - SpringBoot快速入门(24):Maven高级(3):聚合与私服2023-09-02
javaWeb后端技术(28) - SpringBoot快速入门(23):Maven高级(2):继承与聚合
javaWeb后端技术(28) - SpringBoot快速入门(23):Maven高级(2):继承与聚合2023-09-02
javaWeb后端技术(27) - SpringBoot快速入门(22):Maven高级(1):分模块
javaWeb后端技术(27) - SpringBoot快速入门(22):Maven高级(1):分模块2023-09-02
javaWeb后端技术(26) - SpringBoot快速入门(21):SpingBoot原理
javaWeb后端技术(26) - SpringBoot快速入门(21):SpingBoot原理2023-09-02
javaWeb后端技术(25) - SpringBoot快速入门(120):AOP(2):切入点
javaWeb后端技术(25) - SpringBoot快速入门(120):AOP(2):切入点2023-09-02
分类
  • 博主个人1
  • 学习252
    • MarkDown1
    • git9
    • hexo9
    • 前端知识分享186
      • Cookie1
      • ES67
标签
AOP Ant-Design ArrayList Babel Babel处理重复代码 Bean Buffer CSS模型 Cache缓存 Calendar Code Split Cookie Core-js DI Date ES6 Es6 Eslint Execl Flux Fragment HTTP协议 HotModuleReplacement HtmlWebpackPlugin IO IOC Include & Exclude Interceptor JWT JavaScript JavaScript数组 JavaScript语法 Lazy LinkedList List LocalDate Map MarkDown的常用语法 Maven Maven高级 Mock Mock.random常见用法 Mongodb MySQL Mybatis Mysql ORM Object.defineProperty OneOf PWA Portal Preload & Prefetch Promise Proxy PureComponent Queue React Redux Redux-Saga Reflect Session Set Set集合 SourceMap SpingBoot原理 Spring SpringBoot Stream流 StringBuilder Suspense Teleport Thead Token TomCat Tree Shaking Typescript Typescript中的基本类型 Typescript中的编译选项 UI组件库 Vue Vue-cli Vue2 Vue3 Vuecomponent构造函数 Vue中的响应式 Vue中的插件 Vue中的生命周期 Vue中的组件 Vue中的自定义事件 Vue中脚手架 Vue组件 abstract asciify模块 async/await axios babel banner bean规范 buffer class class类 class语法糖 commonJS computed const context cookie cors crypto css处理 customRef devServer elementUi组件库 event事件以及它的事件对象 event模块 express框架 express生成器 extends face-api模块 figlet模块 filter final form组件封装 forwordRef fs模块 get get和set git中常用的linux指令 git中常用的报错 git的学习笔记 git的常用指令 hexo常用指令 hooks hook函数'Vue3 html压缩 http http模块 immutable java javaWeb json-server jsonp jsx jwt key的作用与原理 let logger map markRaw memo mock mock数据的增删改查 mongodb multer模块 mysql nestjs node.js oss path模块 post props props配置 pug querystring模块 react react-native react-redux reactive函数 readonly reducer redux redux-promise redux-thunk redux开发者工具 redux数据持久化 ref ref函数 ref属性 render函数 scoped样式 session setup setup'Vue3 shallowReactive shallowReadonly shallowRef slot socket.io-client socket.io模块 sql注入 stream模块 styled-components super table组件封装 this this指向 toRaw toRef toRefs token url模块 useCallBack() useContext() useEffect() useMemo() useReducer() useRef() useState() vercel vue vue-router vue-socket.io vuex watch watchEffect webpack webpack5 webpack基础总结 webpack项目篇 webpack高级篇 webpack高级篇' webpack高级篇总结 websocket webstorm withRouter ws模块 zlib模块 中间件 事件处理 事件循环 事件总线 事务管理 二维数组 人脸识别 代理服务器 依赖注入 关于博客 内置指令 内置模块 内部类和外部类 函数式组件 列表排序 列表渲染 列表过滤 加密算法 动态路由 动画 包装类 匿名类 单例模式 单文件组件 反向代理 反射 受控组件与非受控组件 后台管理系统 响应体 图片压缩(Image Minimizer) 声明式路由与编程式路由 处理静态资源 多重路由嵌套 字符串 对象 对象的简化写法 小项目 属性 嵌套路由 工具类 并发与同步 开发服务器 开发模式 开源库/插件推荐 异常 异常处理 异步操作 异步编程 性能优化 懒加载 打包工具 托管静态资源 扩展 抽象类 抽象类和抽象方法 拓展运算符 拦截器 接口 接口(interface) 控制反转 插件 插槽 数据库 数据状态 数据监测的原理 数据请求 数组 文件上传 日志模块 日期类 映射关系 暴露和引入 服务端渲染 条件渲染 构造函数 构造函数和原型,原型链 枚举 样式 模块化 模拟数据 模板字符串 模板引擎 模板语法,数据绑定,数据代理 正则表达式 泛型 消息的订阅与发布 深拷贝和浅拷贝 混合(mixin)属性 父子通信 环境变量 生产模式 生命周期 生命周期'Vue3 生成器函数 登录校验 监听属性 监视属性 移动端开发 箭头函数 类 类组件 纯函数 线程休眠 线程池 组件 绑定样式 继承 继承与聚合 缓存区 编程思想 聚合与私服 自定义hooks 自定义指令 表单数据的收集 装饰器 解构赋值 计算属性 请求响应 路由 路由守卫 路由模式 过渡 过滤器 进程与线程 远程库操作 递归 通知类型 配置代理 配置文件 错误处理 阿里云 集合 非单文件组件 非父子通信 非阻塞 面向对象 面向对象和面向过程 项目部署 魔改butterfly
归档
  • 九月 20235
  • 八月 202316
  • 七月 202326
  • 六月 20235
  • 五月 20236
  • 四月 20235
  • 三月 20234
  • 二月 202316
网站资讯
文章数目 :
253
已运行时间 :
1089 天
本站总字数 :
486.7k
最后更新时间 :
2023-09-02
©2022 - 2023 肥林(Playing 🦸‍♂️)
框架 Hexo|主题 Butterfly
🦸‍♂️目在当下,活在当下
🦾成为自己想成为的人!
2 年 359 天 13 : 07 : 10

搜索
数据库加载中