Vue3案例详解(三)

最新推荐文章于 2024-04-26 11:23:00 发布
最新推荐文章于 2024-04-26 11:23:00 发布
阅读量157 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29862655/article/details/131553075
版权

此篇文章编写于2023年7月5日.如果查阅时间太久请注意版本的迭代.

本篇文章主要针对于初学VUE的新手,对vue网站上的案例进行了详细解释.

在此之前你可以先学习另外几篇介绍:

Vue3案例详解(一)_flame.liu的博客-CSDN博客

Vue3案例详解(二)_flame.liu的博客-CSDN博客

本篇文章将介绍Vue中父子组件的用法,在这之前我们先讨论下,vue项目中的组件结构的问题.

1.在简单项目中,将vue代码,js代码,直接写在html页面中,甚至可以不用到template,直接作用在html标签上;

2.在复杂的项目中,代码可以被分成三个部分:vue,js,html,可以分别对应三类文件.

Vue负责数据结构,逻辑处理和内容的呈现,js负责引用vue,并将vue组件挂载到html页面的一个标签中,html负责最后的呈现.

如果Vue组件比较复杂,而且不能内容需要重复使用的话,可以考虑将功能更小话,也就是可以由多个Vue组成一个功能更强大的Vue.那么这些小的Vue被称为子组件,组成的Vue称为父组件.

这篇文章就是介绍父子组件的使用.代码中有详细的介绍:

1. 在components文件夹中创建child文件夹,用来存储子组件,在child文件夹中创建infoItem.vue文件作为子组件,代码如下:
<!--
最低0.47元/天 解锁文章
flame.liu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态表单开发方法案例详解
10-15
下面我们将深入探讨如何在Vue.js中实现动态表单，并通过一个名为 "simpleform" 的案例来阐述具体步骤。 1. **表单组件的开发** 在Vue.js中，首先需要创建基础的表单组件，如`RxInput`，用于处理不同类型的表单元素...
详解vue父子模版嵌套案例
01-19
这里是父子模版的调用 这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档 vue2.0 ：http://vuefe.cn/guide/ vue-router2.0： ...script src=../vue/node_modules/vue/dist/vue.j
Vue-cli axios拦截器 proxy代理学习笔记
weixin_44717047的博客
08-11 493
Vue-cli 1.什么是 vue-cli vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。 特点： ① 开箱即用 ② 基于 webpack ③ 功能丰富且易于扩展 ④ 支持创建 vue2 和 vue3 的项目 vue-cli 的中文官网首页：https://cli.vuejs.org/zh/ 2. 安装 vue-cli vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具： npm install -g @
Vue3小兔鲜电商前台项目总结
cozy666的博客
12-07 779
在directives内定义懒加载插件import { useIntersectionObserver } from '@vueuse/core',懒加载的核心逻辑是当图片进入到视口区域,就把url赋值给src,但是这样做会存在重复监听的问题,useIntersectionObserver对于元素的监听是一直存在的,除非手动停止监听,存在内存浪费 虽然图片已经加载完毕了,但是鼠标滑动时仍然在监听。解决方案,加入stop,让他对于已经加载好的图片停止监听,不再重复监听。例如,将home页拆分。
一个VUE3的页面demo
最新发布
weixin_47194802的博客
04-26 661
样子是这样的目录是这样的。
Vue3实现小案例
z020729的博客
11-20 3455
本篇博客咱们通过案例学习一下Vue3的部分知识点，话不多说，最终效果如下。
黑马程序员前端 Vue3 小兔鲜电商项目——（八）登录页面
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-24 2847
黑马程序员前端 Vue3 小兔鲜电商项目——（八）登录页面
认识Vue3 丨2023前端最新项目Vue3小兔鲜
黑马程序员官方博客
05-22 528
通过 Counter 案例 体验Vue3新引入的组合式API。
vue登录注册实例详解
12-10
3.安装axios、js-cookie、element-ui、stylus等等常用插件 步骤二 1.在main.js中引入router、element-ui等 import Vue from 'vue' import store from './store' //可以先忽略 import App from './App' import ...
vue3.0 案例小demo
qq_45273808的博客
08-20 3583
testdemo 安装依赖 yarn install 开发启动 yarn serve 打包 yarn build 格式化 yarn lint 前端架构方式 vue3.0 + ts + ant-design-vue + stylus 技术栈 选择 Vue 作为框架 用了 vue-router 和 vuex 选择了 Ant Design Vue UI框架 工具库选择 lodash 选择了CSS 预处理器 stylus 全局样式 目录：@/styles ： global.scss: 全局样式 建议vs
vue项目案例（Vue3）
u013083465的专栏
05-30 7668
VUE3 + vite 案例
vue3-demo:vue3-演示
04-01
vue3-演示 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
❤ 15个基于Vue3.0全家桶的优秀开源项目
林太白
07-03 6571
❤ 15个基于Vue3.0全家桶的优秀开源项目
Vue 3(alpha) 官方的演示 Demo
飞扬小阁
01-09 2088
https://github.com/vuejs/vue-next-webpack-preview/blob/master/src/App.vue <template> <img src="./logo.png"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ ...
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）
热门推荐
有来技术
04-17 5万+
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。本篇是 vue3-element-admin v2.x 版本从 0 到 1，相较于v1.x 版本增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式的支持。
Vue3 详细教程及实例（完整版）
特创数字
11-29 2921
文本插值 属性绑定 调用函数 全局访问 指令 论点 动态参数 声明反应状态ref() 简化用法 DOM 更新完成nextTick() 响应式对象reactive() 反应式代理与原始代理 数组和集合的注意事项 在模板中展开时的注意事项 计算属性 计算缓存与方法 可写计算 绑定 HTML 类 绑定到数组 带组件 绑定到对象 多重价值 条件渲染 列表渲染 监听事件 内联处理程序 方法处理程序 方法与在线检测 调用内联处理程序中的方法 访问内联处理程序中的事件参数 事件修饰符 按键修饰
移动端Vue3框架demo
qq_42648288的博客
04-06 2536
因偶尔会有移动端的开发需求 ，然而每次写的时候都需要重新搭建框架，配置UI插件，路由自定义，模块化VueX，封装Axios 等等。
vue3 watch 详解
09-01
Vue3中的`watch`与Vue2中的`watch`有一些重要的变化。在Vue3中，`watch`仍然允许我们监视响应式数据的变化，并对变化做出相应的操作。不过，Vue3引入了一个新的API——`watchEffect`来取代Vue2中的`watch`。 在Vue3中，`watch`可以通过以下几种方式使用： 1. **基础用法**：可以使用`watch`方法来监视一个响应式数据的变化，并在变化发生时执行回调函数。示例如下： ```javascript import { watch } from 'vue'; watch(() => { // 监视的响应式数据 return state.value; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }); ``` 2. **立即执行**：可以通过在`watch`选项中设置`immediate`为`true`，使得监听函数会在初始创建时立即执行一次。示例如下： ```javascript watch(() => { // 监视的响应式数据 return state.value; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }, { immediate: true }); ``` 3. **深度监听**：可以通过设置`deep`为`true`来进行深度监听，以便检测对象内部值的变化。示例如下： ```javascript watch(() => { // 监视的响应式数据 return state.obj; }, (newVal, oldVal) => { // 响应式数据发生变化时执行的回调函数 console.log(`new value: ${newVal}, old value: ${oldVal}`); }, { deep: true }); ``` 此外，Vue3还引入了`watchEffect`，它可以轻松地监视响应式数据的变化，并在其变化时执行回调函数。与`watch`不同的是，`watchEffect`不需要显式指定要监视的数据，它会自动追踪代码中使用的响应式数据，并在其变化时触发。示例如下： ```javascript import { watchEffect } from 'vue'; watchEffect(() => { // 使用到的响应式数据 console.log(state.value); }); ``` 需要注意的是，在Vue3中，`watch`和`watchEffect`都是基于副作用函数实现的，所以它们可以在组件渲染期间多次执行。 以上是Vue3中`watch`和`watchEffect`的详细说明，希望能对你有所帮助！如有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值