系列导航

vue学习笔记 一、环境搭建

vue学习笔记 二、环境搭建+项目创建

vue学习笔记 三、文件和目录结构

vue学习笔记 四、定义组件(组件基本结构)

vue学习笔记 五、创建子组件实例

vue学习笔记 六、ref定义单个数据

vue学习笔记 七、方法的定义和使用

vue学习笔记 八、toRef的使用

vue学习笔记 九、父子组件实例-基本结构

vue学习笔记 十、状态管理基础结构

vue学习笔记 十一、计算属性介绍

vue学习笔记 十二、通过计算属性获取定义的状态数据

vue学习笔记 十三、路由介绍

vue学习笔记 十四、页面跳转

vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转

vue学习笔记 十六、params方式带参数的页面跳转

vue学习笔记 十七、父子组件 ---> 子组件传值

vue学习笔记 十八、父子组件相互传递参数

vue学习笔记 十九、实例完整代码

   

组件:组件是维护单一功能,可复用的单个个体。

如上Home.vue内容如下:

如下就是一个组建的基本结构

<template>
//编写html内容
</template> <script>
//编写js内容
import {defineComponent} from 'vue'
export default defineComponent({
//组件名称
name:'Home',
//接收父组件的数据
props:{ },
setup(props,ctx){ return{ }
} }) </script> <style scoped lang="scss">
//编写样式 scoped 只在当前组件生效 </style>

vue学习笔记 四、定义组件(组件基本结构)的更多相关文章

  1. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  2. vue学习笔记(五)— 组件通信

    关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...

  3. vue学习笔记(1)—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  4. Vue学习笔记(三)组件间如何通信传递参数

    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...

  5. Vue学习笔记四:跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  6. VUE 学习笔记 四 计算属性和监听器

    1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...

  7. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  8. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  9. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  10. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

随机推荐

  1. Socket.D 网络应用协议,首版发布!

    有用户说,"Socket.D 之于 Socket,尤如 Vue 之于 Js.Mvc 之于 Http" 主要特性 基于事件,每个消息都可事件路由 所谓语义,通过元信息进行语义描述 流 ...

  2. Netty源码学习8——从ThreadLocal到FastThreadLocal(如何让FastThreadLocal内存泄漏doge)

    系列文章目录和关于我 一丶引入 在前面的netty源码学习中经常看到FastThreadLocal的身影,这一篇我们将从ThreadLocal说起,来学习FastThreadLocal的设计(< ...

  3. Python:单元测试框架unittest

    1.什么是单元测试 测试函数/方法或者一段代码,用于检验被测代码的一个很小的.很明确的功能是否正确,通常是开发做. 在Python中的单元测试框架有Unittest和Pytest,现在总结Unitte ...

  4. 目标检测工具安装使用--labelImg

    如果想要在深度学习中训练我们自己的模型,就得对图片进行标注.labelImg是一个超级方便的目标检测图片标注工具,打开图片后,只需用鼠标框出图片中的目标,并选择该目标的类别,便可以自动生成voc格式的 ...

  5. KNN算法之KD树(K-dimension Tree)实现 K近邻查询

    KD树是一种分割k维数据空间的数据结构,主要应用于多维空间关键数据的搜索,如范围搜索和最近邻搜索. KD树使用了分治的思想,对比二叉搜索树(BST),KD树解决的是多维空间内的最近点(K近点)问题.( ...

  6. bash shell笔记整理——tail命令

    作用 Print the last 10 lines of each FILE to standard output. With more than one FILE, precede each wi ...

  7. mysql 定时 数据库备份并上传到另一台服务器上,上传结束并删除源文件

    首先总共有两个脚本: #!/bin/bash:主要用于进行数据库备份.压缩.删除,单独运行命令是:bash  XXX.sh #!/usr/bin/expect:主要用于进行数据备份文件的上传,单独运行 ...

  8. MySQL 数据目录

    MySQL 的数据目录 1. MySQL 的主要目录结构 方式1:通过命令搜索 find / -name mysql 方式2(推荐):通过查看配置文件获取目录结构 vim /etc/my.cnf (重 ...

  9. 2023-12-30:用go语言,给你一个下标从 0 开始的整数数组 nums ,它包含 n 个 互不相同 的正整数, 如果 nums 的一个排列满足以下条件,我们称它是一个特别的排列。 对于 0 <

    2023-12-30:用go语言,给你一个下标从 0 开始的整数数组 nums ,它包含 n 个 互不相同 的正整数, 如果 nums 的一个排列满足以下条件,我们称它是一个特别的排列. 对于 0 & ...

  10. select/poll/epoll 优缺点比较

    校招应届生简历中,有一个 C++ 项目出现的频率非常高... select 1024 fd 限制(可修改,麻烦) 需要遍历才知道哪些 fd ready 副作用:修改传入 fd_set,每次需要重新赋值 ...