文章 2023-01-06 来自:开发者社区

Vue2与Vue3的父子数据传递

使用props进行传递数据Vue2有一个加1 的案例1.写子组件,并且接收父组件传来的数据props就是子组件用来声明:我就是用这里面的变量来接收父组件的方法和数据的<template> <div class="red"> {{message}} <button @click="fn">+1</button> </di...

文章 2022-10-08 来自:开发者社区

【Vue3从零开始-实战】S14:详情页回退事件及路由参数的传递获取数据

前言实战已经开始了!上一篇已经将详情页的店铺信息展示出来了,但是顶部还有一个搜索框和返回按钮,而且详情页的店铺数据是在页面中固定写死的,所以本章节会将顶部搜索栏进行布局,并且通过返回按钮可以回到首页。其次会通过路由传参的方式,从首页跳转到详情页,并动态获取详情页店铺数据。搜索框布局 根据稿图,我们发现搜索框部分只有一个input输入框和一个返回按钮,比较简单,所以下面就直接贴代码了,有兴趣的朋友....

【Vue3从零开始-实战】S14:详情页回退事件及路由参数的传递获取数据
文章 2022-10-08 来自:开发者社区

【Vue3从零开始-实战】S12:首页列表数据动态化

前言实战已经开始了!之前的文章中,我们把登录注册并且都可以调用接口请求的功能做完了,而且把逻辑和组件都拆分出来单独维护。本篇文章主要是为后面的商家详情页做准备,在首页中有一个店铺的列表,之前是在页面组件中把数据固定起来的,现在就需要将数据做成动态化了。而且还会将axios初始化的部分拆分出来,定义一些新的数据。mock接口 动态化数据最关键的第一步就是把接口配置出来。 在fastmock官网中配....

【Vue3从零开始-实战】S12:首页列表数据动态化
文章 2022-09-26 来自:开发者社区

【Vue3从零开始-第二章】2-4 数据、方法、计算属性和侦听器

前言在上一篇文章中,讲过了vue的模板语法,今天我们要深入了解一下vue的data/methods/computed/watch的用法。之前的文章中有用过部分内容,通过今天的文章,你将对vue的这些方法有一个更深层次的理解。data定义数据的时候,是在vue创建实例的时候去写一个data函数,这个函数在之前的内容中也是经常用到的。在data函数中,会把对应的数据通过return返回给模板,在模板....

【Vue3从零开始-第二章】2-4 数据、方法、计算属性和侦听器
文章 2022-09-25 来自:开发者社区

通过Vue3探索响应式数据原理(Proxy与Reflect)

首先上一段代码:const obj = { age: 1 } // 定义一个对象 let age = obj.age // 将对象的age属性赋值给一个变量 obj.age++ // 对象的age属性发生了变化 console.log(`age=${age}`, obj); // 输出结果: age = 1 {age: 2}在obj的age属性变化时,变量age如果也随之变化,通常就需要定义一.....

通过Vue3探索响应式数据原理(Proxy与Reflect)
文章 2022-05-21 来自:开发者社区

Vue3项目配置Mock模拟接口数据

当一个项目开始开发,正常情况是前后台开发同时进行,但是很多情况是后台先提供接口,然后前端才开始编写页面,这样就会导致项目进度缓慢,为了解决这个问题,前端一般是根据接口先在本地进行数据模拟请求,本次我们使用Mockjs,实现在基于Vue3项目的数据模拟。1.安装MockjsMockjs提供npm包,所以安装比较方便yarn add mockjs复制2.配置Mock我们配置方法可以按照官方提供的,写....

Vue3项目配置Mock模拟接口数据
文章 2022-05-14 来自:开发者社区

vue3中retive的错误用法导致数据不跟新

retive的错误用法<template> <div> 司藤的信息==>{{ objInfo }} <button @click="handerHttpServe">获取远端的值</button> </div> </template> <script> im...

文章 2022-05-14 来自:开发者社区

vue3获取数据的注意点

场景描述在使用vue3的时候。我们很多人喜欢一个页面分成几个几个部分来写这样做的目的是为了区分。做的彼此的逻辑互相独立,互不干扰但是有的时候,我们可能会去获取不属于自己区域的函数这个时候我们有集中方式去获取函数呢??传参的方式<script> import { reactive } from '@vue/reactivity' export default { setup () ...

vue3获取数据的注意点
文章 2022-05-14 来自:开发者社区

vue3逻辑分离和页面快速展示数据

逻辑分层我们在使用vue3开发项目的时候,如何进行【区域分层】呢????举一个简单的小粒子一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】这个时候我们可以将一个区域的逻辑分离出去将各个区域业务分开export default { setup () { let {queryDo,addDo,delDO,E...

vue3逻辑分离和页面快速展示数据
文章 2022-05-14 来自:开发者社区

Vue3中shallowReactive和shallowRef对数据进行非深度监听

1.Vue3 中 ref 和 reactive 都是深度监听默认情况下,无论是通过 ref 还是 reactive 都是深度监听。深度监听存在的问题:如果数据量比较大,非常消耗性能。有些时候我们并不需要对数据进行深度监听。这个时候就没有必要使用ref和reactive2.说明 ref 对数据进行深度监听<template> <div> <div> ...

Vue3中shallowReactive和shallowRef对数据进行非深度监听

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注