系列导航

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. 你真的了解HashSet 和HashMap的区别、优缺点、使用场景吗?

    HashSet 和 HashMap 是 Java 集合框架中的两个常用类,它们都用于存储和管理数据,但在使用方式.功能和性能上有很大的区别. HashSet 和 HashMap 的区别 区别一:用途不 ...

  2. 【译】使用 GitHub Copilot 编写 Git 提交

    在花费数小时修复 bug 或更新特性之后,我们开发人员最不愿意做的事情往往是仔细说明 Git 提交的内容.最新的 Visual Studio 预览版可以帮到您.使用新的生成 Git 提交消息特性来帮助 ...

  3. Linux笔记03: Linux常用命令_3.4文件和目录共用命令

    3.4 目录和文件共用命令 3.4.1 rm命令 ●命令名称:rm. ●英文原意:remove files or directories. ●所在路径:/usr/bin/rm. ●执行权限:所有用户. ...

  4. 初始OpenGL

    OpenGL到底是什么? 一般它被认为是一个API,包含一系列操作图形,图像的函数.然而,它并不是一个API,而是Khronos组织制定并维护的规范. OpenGL规定了每个函数如何执行,以及它们的输 ...

  5. java.lang.TypeNotPresentException: Type javax.servlet.http.HttpServletRequest not present

    完整的报错信息 java.lang.TypeNotPresentException: Type javax.servlet.http.HttpServletRequest not present at ...

  6. ElasticSearch之cat datafeeds API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/ml/datafeeds?v=true&pretty" --cacert ...

  7. 【玩转腾讯混元大模型】怎么说?我用混元AI大模型开发了个IDEA插件

    前言 halo 我是杨不易呀,在混元大模型内测阶段就已经体验了一番当时打开页面的时候灵感模块让我大吃一惊这么多角色模型真的太屌了,随后我立马进行了代码处理水平和上下文的效果结果一般般但是到如今混元大模 ...

  8. 面试官喜欢问Nacos原理?直接把这篇文章甩给他!

    大家好,我是三友~~ 今天就应某位小伙伴的要求,来讲一讲Nacos作为服务注册中心底层的实现原理 不知你是否跟我一样,在使用Nacos时有以下几点疑问: 临时实例和永久实例是什么?有什么区别? 服务实 ...

  9. Recursion Function 递归笔记

    递归的解释: 递归(英语:Recursion),又译为递回, 在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.(本文要讨论的重点) 递归一词还较常用于描述以自相似方法重复事物的过程.(指一 ...

  10. 5.elasticsearch中查询条件

    目录 一.URI查询 指定字段.泛查询 分组和phrase Bool条件 must条件 范围查询 通配符查询 正则表达式 模糊匹配与近似查询 二.RequestBody&DSL ignore_ ...