Vue
文章平均质量分 58
好耶
我也有鱼鱼蒸
嘻嘻
展开
-
Vue(10)——自定义指令
我是内容</div>通过binding.value可以拿到指令值指令值修改会触发update函数color:{},<template><div><h1 v-color="color1">自定义指令</h1><h1 v-color="color2">自定义指令</h1>color:{},},data(){return{原创 2024-09-11 23:43:18 · 461 阅读 · 0 评论 -
Vue(11)——插槽
作用:让组件内部的一些结构支持自定义插槽基本语法:组件内需要定制的结构部分,改用<slot></slot>占位使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot。原创 2024-09-17 12:51:34 · 251 阅读 · 0 评论 -
Vue(12)——路由的基本使用
作用:修改地址栏路径时,切换显示匹配的组件基本步骤(固定)发现了#/表示当前的Vue实例已经被路由所管理。完成前面固定的五个步骤,还剩下两个核心步骤新建一个名为views的文件夹,创建了三个我需要的组件接下来在main.js文件中配置规则第二步配置路由出口,找到app.vue。原创 2024-09-17 16:48:50 · 653 阅读 · 0 评论 -
Vue(16)——Vue3.3新特性
在 Vue 3.3 之前,如果需要在中设置组件名,通常需要在额外的标签中使用 Options API 进行配置。是 Vue 3.3+ 版本中引入的一个宏(macro),它主要用于在语法糖中定义组件的选项, 如组件名(name)、 透传属性()等。允许开发者直接在中声明组件名。原创 2024-09-24 20:01:22 · 328 阅读 · 0 评论 -
Vue(15)——组合式API②
默认情况下<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问。想要在子组件改变父组件定义的数据,只需要父组件使用provide提供函数,在子组件接收就行。通过ref标识获取真实的。顶层组件向任意的底层组件。原创 2024-09-22 20:25:17 · 736 阅读 · 0 评论 -
Vue(14)——组合式API①
特点:执行实际比beforeCreate还要早,并且获取不到this在setup函数中提供的数据和方法,想要在模版当中利用,必须在函数最后使用return。当然有更简便的方法,setup语法糖。在script标签里面加上setup即可。原创 2024-09-22 16:27:15 · 961 阅读 · 0 评论 -
Vue(13)——router-link
vue-router提供了一个全局组件router-link(取代a标签)右键检查,发现多了两个类:可以直接写样式:点击即可显示高亮。router-link-active 模糊匹配to="/my" 可以匹配/my /my/a /my/b .....router-link-exact-active 精确匹配to="/my" 只能匹配/myrouter-link的类名太长了,可以通过配置实现定制:linkActiveClass:"类名1",原创 2024-09-20 17:13:11 · 616 阅读 · 0 评论 -
Vue(1)——创建实例
Vue是用于构建用户界面的渐进式框架。创建Vue实例,初始化渲染。原创 2024-08-26 17:16:34 · 330 阅读 · 0 评论 -
Vue(5)——watch侦听器
作用:监视数据变化,执行一些业务逻辑或异步操作。简单语法:简单类型数据,直接监视。完整写法:添加额外配置项。原创 2024-08-29 23:26:55 · 615 阅读 · 0 评论 -
Vue(7)——工程化开发
每次创建新的组件实例,都会执行一次data函数,得到一个对象。在src文件夹下创建components文件夹放入组件,组件命名需遵循大驼峰命名法,否则会报错。组件化开发:一个页面可以拆分一个个组件,每个组件有自己独立的结构,样式,行为。组件通信指组件之间的数据传递。组件的数据时独立的,无法直接访问其他组件的数据。作用: 为组件的prop指定验证要求,不符合要求,控制台就会有错误提示。全局样式(默认):会影响所有的组件,很容易造成多个组件之间的问题。data函数执行了3次,每个组件实例,维护独立的对象。原创 2024-09-10 22:46:23 · 1263 阅读 · 0 评论 -
Vue(8)——v-model原理
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value和input事件的合写。作用:提供数据的双向绑定。区别是v-model是双向绑定,数据和视图都会随之改变。而为视图随着数据变,视图改变不影响数据。这是需要input让数据随视图改变。$event用于在模版上,获取事件的形参。原创 2024-09-10 23:45:57 · 346 阅读 · 0 评论 -
Vue(3)——指令修饰符
通过“.”知名一些指令后缀,不同后缀封装了不同的处理操作。原创 2024-08-28 23:50:27 · 850 阅读 · 0 评论 -
Vue(4)——计算属性
概念:基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。set(修改的值){原创 2024-08-29 16:21:32 · 515 阅读 · 0 评论 -
Vue(9)——.sync修饰符、ref和$refs、$nextTick
作用:可以实现子组件与父组件数据的双向绑定,简化代码。特点:prop属性名,可以自定义,非固定位value场景:封装弹框类的基础组件,visible属性true显示,false隐藏本质:就是 :属性名和@update:属性名合写。原创 2024-09-11 16:59:30 · 586 阅读 · 0 评论 -
Vue(6)——生命周期
Vue生命周期:一个Vue实例从创建到销毁的整个过程。生命周期的四个阶段:创建、挂载、更新、销毁。原创 2024-09-02 23:10:21 · 331 阅读 · 0 评论 -
Vue(2)——Vue指令
v-if='表达式' true为显示,false为隐藏 渲染隐藏。作用:给列表项添加的唯一标识。语法:v-bind:属性名="表达式"(src,title)v-show='表达式' true为显示,false为隐藏。v-for="(item,index) in 数组"原理:基于条件判断,是否创建或移除元素节点。实现点击+号数字加1,点击-号数字减1。简写:v-bind:src可以简写成。语法:key属性 = "唯一标识"作用:动态的设置html的标签属性。语法:v-model = '变量'原创 2024-08-26 23:26:56 · 688 阅读 · 0 评论