Vue生命周期
摘要：一、Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。如下图所示 二、主要的生命周期函数分类 1.创建阶段的生命周期函数 (1)beforeCreate:在beforeCreate生命周期函数执行的时候，
阅读全文
posted @ 2023-02-03 09:53
随笔分类 - 前端
vue3-组合式api-teleport
摘要：teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，最常见的例子就是模态框。 <template> <div> <!-- 弹窗 --> <myModal></myModal> </div> </template> <script> impor
阅读全文
posted @ 2022-11-14 11:15
vue3-组合式api-provide/inject
摘要：provide/inject 适用于跨级通信，例如在父组件中改变值，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值 一、父组件 <template> <div> <!-- 子组件 --> <son></son> <button @click="changeName">改变名字</butto
阅读全文
posted @ 2022-11-09 13:21
vue3-组合式api-参数(props,context)及父子组件传值
摘要：一、父组件 <template> <div> <h2>我是父组件</h2> <div>counter:{{ counter }}</div> <button @click="callChildFun">调用子组件方法</button> <children :message="message" @ch
阅读全文
posted @ 2022-11-08 08:41
vue3-组合式api-computed
摘要：<template> <div> msg:{{ msg }} <br /> reverseMsg:{{ reverseMsg }} </div> </template> <script> import { ref, computed } from "vue"; export default { se
阅读全文
posted @ 2022-11-02 14:07
vue3-组合式api-watch,watchEffect
摘要：<template> <div> {{ counter }} <button @click="changeCounter">改变counter</button> <br /> {{ user.name }} <button @click="changeUserName">改变名字</button>
阅读全文
posted @ 2022-11-02 10:56
vue3-组合式api-定义响应式数据-ref
摘要：<template> <div> <!-- 模板会自动解析value值 --> {{ counter }} <button @click="changeCounter">改变counter</button> </div> </template> <script> import { ref } fro
阅读全文
posted @ 2022-11-01 14:01
Vuex-v4.x
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 下面举个改变用户名的例子来实现上面的流程图： index.vue <template> <div> userName: <span>{
阅读全文
posted @ 2022-09-05 14:09
一文搞懂CSS中的字体单位大小(px,em,rem...)
摘要：CSS长度单位 绝对长度单位。 绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。 in,英寸 cm, 里面 mm, 毫米 pt pc 相对长度单位。 其长度单位会随着它的参考值的变化而变化。 px,像素 em,元素的字体高度 %,百分比 rem,根元素的font-size vw,视窗宽度，
阅读全文
posted @ 2020-11-10 15:33
CSS3 box-shadow 效果大全
摘要：CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。 CSS 代码: 取值说明： inset: 默
阅读全文
posted @ 2020-11-06 16:33
css--display详解
摘要：1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，marg
阅读全文
posted @ 2020-11-05 13:45
关于overflow:hidden的作用
摘要：一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 <style type="text/css"> div{ width: 150px; height: 60px; back
阅读全文
posted @ 2020-10-29 15:13
float 应用
摘要：一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 <style type="text/css"> .box { background: skyblue; width: 100px; height: 10
阅读全文
posted @ 2020-10-29 14:49
flex 布局
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各
阅读全文
posted @ 2020-10-26 09:24
CSS+DIV布局中absolute和relative的区别
摘要：CSS 盒子模型 所有HTML元素可以看作盒子 区别：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。 position各个属性值的定义： 1、static：默认值。没有
阅读全文
posted @ 2020-10-22 15:40
