- 博客(29)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3中的导航守卫
总共7个守卫，3个全局守卫：全局前置守卫`beforeEach`、路由前置解析守卫`beforeResolve`、全局后置守卫`afterEach`，1个路由独享守卫：进入任一路由前守卫`beforeEnter`，3个组件内导航守卫钩子：进入新目标前守卫`beforeRouteEnter`、路由更新前守卫`beforeRouteUpdate`、离开当前实例前守卫`beforeRouteLeave
2024-06-14 17:43:33
3111
原创 JavaScript中的lambda表达式：一种更简洁的JavaScript函数定义形式
lambda表达式是一个函数表达式，表达式的计算结果为函数对象，语法：参数列表+箭头+函数体
2024-06-08 16:28:15
791
原创 JavaScript中的DOM事件
事件，就是用户或浏览器自身执行操作而触发的某种动作，那么对某种动作的响应就是事件处理。响应事件处理或者说进行事件处理的回调函数就叫做**事件响应处理函数**。
2024-06-08 16:17:53
1298
2
原创 Flex弹性布局
传统布局解决方案中，其基于盒状模型，主要依赖于display属性、position属性、float属性。它对于一些特殊布局，使用起来有诸多不便，比如，垂直居中就不太容易实现。flex布局，可以简便、完整、响应式地实现各种页面布局。为了提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空闲空间，引入flex弹性布局。CSS3弹性盒子（ Flexible Box 或 flexbox）是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的一种布局方式。
2024-06-08 15:34:44
947
原创 Vue3中的模板指令——表单输入绑定指令v-model（:value和@input）
v-model指令实现表单输入值与父组件中的属性变量保持同步
2024-06-06 10:38:36
1160
原创 Vue3中的模板指令——DOM事件监听指令v-on
使用v-on指令 (简写为@) 来监听DOM事件，并在事件触发时执行对应的JavaScript脚本。用法：v-on:click="handler"或@click="handler"。
2024-06-06 10:28:40
1807
原创 Vue3中的模板指令——属性绑定指令v-bind
该属性绑定指令主要应用在两类场景下：一类是绑定attrs标签属性，如class、id、style等属性；另外一类是绑定props组件实例自定义属性，即用于动态地绑定一个或多个基本类型属性或者绑定一个对象类型的属性到组件上。props 是组件间通信的一种方式，允许父组件向子组件传递数据。在 Vue 中的灵活性和强大功能，无论是用于 DOM 属性还是组件 props 的动态绑定。是组件的数据属性，它们的变化将实时反映到 DOM 上。还可以接受一个对象，这样就可以批量绑定多个属性。
2024-06-06 10:14:42
679
原创 Vue3中v-model指令实现父子组件中表单输入双向数据绑定
Vue3中，使用defineModel()函数实现父子组件表单数据的双向绑定
2024-06-05 16:26:04
1606
7
原创 Vue3中的组件props实例属性跨层级传递
组件实例prop属性跨层级传递，即所谓的“属性透传”，主要由provide()函数与inject()函数实现
2024-06-05 14:53:41
922
原创 Vue中父子组件事件监听
Vue3开始，子组件可以使用defineEmits(["enlarge"])函数注册enlarge事件，父组件则可以用v-on(@)指令来绑定该事件，如@enlagre="doEnlarge"
2024-06-05 14:16:30
492
原创 Vue中父子组件数据传递
当v-bind绑定是一个对象字面量时，对象的所有属性都会被当前props传入，而且组件属性名与对象属性名一至，此时，可以使用无参的v-bind来简化属性绑定，即只使用v-bind而不需要使用:prop-name绑定形式。Vue中，父子组件数据传递应遵循单向数据流原则，比如，构建一个博客，可能需要一个表示博客文章的组件，并且，所有的博客文章使用相同的视觉布局，但内容却不相同。原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。类型的 props 有特别的类型转换规则。
2024-06-05 14:05:33
626
2
原创 watch与watchEffect属性状态侦听器
计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些Effect（额外的逻辑）
2024-06-05 11:07:13
1709
2
原创 vue框架中的computed()计算属性
在 Vue中，计算属性（computed properties）是一种特殊的响应式属性，它们基于响应式依赖进行缓存，并且只有当依赖发生变化时才会重新计算。计算属性是派生状态的声明式定义，经常用于执行复杂逻辑或执行性能密集型操作。
2024-06-05 10:59:26
384
原创 Vue3开关按钮自定义组件实现
Vue3 Switch开关按钮实现，defineEmits()实现父子组件事件绑定，defineProps()实现父子组件属性绑定
2024-06-04 15:26:46
963
原创 Vue3单文件组件实现省市区县三级联动
基于vue实现下拉列表联动效果，v-model select数据绑定及v-bind change事件绑定，定模拟Vue3 fetch异步请求。
2024-06-04 15:21:57
787
原创 Vue3单文件组件实现待办事项管理
待办事项管理界面包含标题，全部勾选，添加新的待办事项，事项列表和状态栏。勾选中表示办结事项，底部状态栏显示剩余待办事项数量、事项列表选项（全部事项、待办事项和办结事项）和清队办结事项。待办事项状态state包括：所有待办事项todos、事项承办状态过滤条件filter、事项编号nextId，待办事项计算属性getters包括：已完成事项finishedtodos、未完成事项unfinishedTodos、过滤已办或未办事项filteredTodos，添加待办事项行为actions：addTodo。
2024-06-04 15:09:37
1021
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人