【Vue】组件化开发

文章目录

  • 一、介绍
  • 二、根组件 App.vue

一、介绍

组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用 → 提升开发效率。

组件分类:普通组件、根组件。

根组件:整个应用最上层的组件,包裹所有普通小组件。

比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难易维护。咱们可以按模块进行组件划分

68216885237


二、根组件 App.vue

根组件介绍

整个应用最上层的组件,包裹所有普通小组件

68216913168


组件是由三部分构成

  • 语法高亮插件

68216926426

  • 一个根组件App.vue,包含的三个部分

    • template:结构 (有且只能一个根元素)

      但是Vue3就没有(有且只能一个根元素)这个限制了

    • script: js逻辑

    • style: 样式 (可支持less,需要装包)

    <vue可以帮助我们快速生成三部分

    image-20240131135048863

  • 让组件支持less

    (1) style标签,lang=“less” 开启less功能

    (2) 装包: yarn add less less-loader -D 或者 npm i less less-loader -D

如果想要代码提示,需要写成:<timage-20240131130847120

在.vue里面写:class=,已经不会自动补全双引号了,我们需要直接使用自动提示功能image-20240131131224481

<template>
  <div class="App">
    <div class="box" @click="fn"></div>
  </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
  created() {
    console.log("我是created");
  },
  methods: {
    fn() {
      alert("你好");
    },
  },
};
</script>

<style lang="less">
/* 让style支持less
   1. 给style加上 lang="less"
   2. 安装依赖包 less less-loader
      yarn add less less-loader -D (开发依赖)
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/689177.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

分布式版本控制工具软件——Git概述

目录 一、Git概述1.为什么要学习Git&#xff1f;&#xff08;1&#xff09;SCM概念&#xff08;2&#xff09;SCM实现 2.什么是版本控制&#xff1f;&#xff08;1&#xff09;版本控制软件的基础功能&#xff08;2&#xff09;集中式版本控制&#xff08;3&#xff09;分布式版…

CentOs7 JDK21 安装

CentOs7 JDK21 安装 准备工作 先检查系统是否之前已经安装了jdk 。如果已经安装的话需要卸载。 方式一&#xff1a;使用压缩包的方式 下载jdk21的压缩包 https://www.oracle.com/java/technologies/downloads/ 将下载的gz压缩包上传到服务器并解压 # 创建文件夹 (你可以自…

在npm发布自己的组件包

目录 前言 正文 npm和git的对比 Node环境的配置 具体发布步骤 ※※需要注意的是 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1f46f; I’m studying in University of Nottingham Ni…

Allegro X PCB设计小诀窍系列--如何在Allegro X中快速将位号调整到器件中心

背景介绍&#xff1a;我们在进行PCB设计时&#xff0c;为了将位号和元器件对应&#xff0c;从而能够更快速准确的辨别元器件位置&#xff0c;通常需要将位号移动至器件中心。如果由工程师手动完成&#xff0c;不仅工作量大&#xff0c;还极易出错。而通过Allegro X PCB设计工具…

基于简单Agent对医疗数据进行分析

数据表 供应商资格审核规定.pdf 医生名录.xlsx 历史就诊记录.xlsx 患者信息名录.xlsx 药品.xlsx 药品库存管理.xlsx 采购单位基本信息.xlsx Agent测试 模型基于ChatGPT-3.5 问题&#xff1a;帮我找出不达标的供应商 Agent分析过程 [Thought: 0] Key Concepts: - 不达标的供…

SQL Server数据库xp_cmdshell提权笔记

文章目录 一、简介二、搭建环境三、利用条件1、查询 xp_cmdshell 是否开启&#xff0c;返回为1则证明存在2、判断权限是不是sa&#xff0c;回是1说明是sa3、开启xp_cmdshell4、关闭xp_cmdshell 四、获取数据库权限1、成功获取sqlserver&#xff0c;进行登陆2、开启xp_cmdshell权…

进口电动流量调节阀的选型-美国品牌

进口电动流量调节阀的选型需要综合考虑多个因素&#xff0c;以确保所选阀门能够满足实际应用需求。以下是选型时需要考虑的主要方面&#xff1a; 一、明确应用需求 工作介质&#xff1a;了解介质的性质&#xff0c;包括流体类型、温度、压力以及是否具有腐蚀性或特殊性质。流…

C语言野指针、规避野指针、assert宏断言

目录 a.野指针成因 1.指针未初始化 2.指针越界访问 3.指针指向的空间释放 b.规避野指针 1.指针初始化 2.小心指针越界 3.指针变量不再使用时&#xff0c;及时置NULL&#xff0c;指针使用之前检查有效性 4.避免返回局部变量的地址 c.assert宏断言的使用 概念&#xff1…

LeetCode 两数之和 + 三数之和

两数之和 简单题 思路&#xff1a;一个Map&#xff0c;key是数值&#xff0c;value是该数值对应的下标&#xff0c;遍历的时候判断一下当前数组下标对应的值在map里有没有可组合成target的&#xff08;具体体现为在map里找target-nums【i】)&#xff0c;如果有&#xff0c;直接…

【代码随想录】【算法训练营】【第28天】 [93]复原IP地址 [78]子集 [90]子集II

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 28&#xff0c;工作的周二~ 题目详情 [93] 复原 IP 地址 题目描述 93 复原 IP 地址 解题思路 前提&#xff1a;分割问题 思路&#xff1a;回溯算法&#xff0c;确定每次递归回溯的分割位置…

navi_cat查看数据库的连接密码

Navi_Cat 建立连接&#xff0c;来访问数据库。可惜&#xff0c;忘记了数据库密码&#xff0c;没事&#xff0c;这么搞。 首先先导出链接&#xff0c;再从链接里取出被加密的密码&#xff0c;然后找个可在线运行PHP的网站&#xff08;代码在线运行 - 在线工具&#xff09;&…

Vue项目安装axios报错npm error code ERESOLVE npm error ERESOLVE could not resolve解决方法

在Vue项目中安装axios时报错 解决方法&#xff1a;在npm命令后面加--legacy-peer-deps 例如&#xff1a;npm install axios --save --legacy-peer-deps 因为别的需求我把node版本重装到了最新版&#xff08;不知道是不是这个原因&#xff09;&#xff0c;后来在项目中安装axi…

2024 年该如何利用 MidJourney 创作AI艺术(详细教程)

什么是 Midjourney Midjourney 是根据文本提示创建图像的生成式人工智能的优秀范例。与 Dall-E 和 Stable Diffusion 一样&#xff0c;它已成为最受欢迎的人工智能艺术创作工具之一。与竞争对手不同的是&#xff0c;Midjourney 是自筹资金和封闭源代码的&#xff0c;因此对它的…

BPMN开始事件-Activiti7从入门到专家(7)

开始事件类型 bpmn开始事件表示流程的开始&#xff0c;定义流程如何启动&#xff0c;在某种情况下启动&#xff0c;比如接收事件启动&#xff0c;指定事件启动等&#xff0c;开始事件有5种类型&#xff1a; 空开始事件定时器开始事件信号开始事件消息开始事件错误开始事件 继…

如何以非交互方式将参数传递给交互式脚本

文章目录 问题回答1. 使用 Here Document2. 使用 echo 管道传递3. 使用文件描述符4. 使用 expect 工具 参考 问题 我有一个 Bash 脚本&#xff0c;它使用 read 命令以交互方式读取命令参数&#xff0c;例如 yes/no 选项。是否有一种方法可以在非交互式脚本中调用这个脚本&…

探索未来制造,BFT Robotics引领潮流

“买机器人&#xff0c;上BFT” 在这个快速变化的时代&#xff0c;创新和效率是企业发展的关键。BFT Robotics&#xff0c;作为您值得信赖的合作伙伴&#xff0c;专注于为您提供一站式的机器人采购和自动化解决方案。 产品系列&#xff1a; 协作机器人&#xff1a;安全、灵活、…

水务设备数字化管理

在数字化浪潮席卷全球的今天&#xff0c;水务行业也迎来了数字化转型的重要契机。传统水务管理模式中&#xff0c;设备监控、数据收集、运行维护等环节往往存在效率低下、成本高昂、安全隐患多等问题。而HiWoo Cloud平台的出现&#xff0c;以其强大的设备接入能力、高效的数据处…

使用达梦数据库集成Python,达成快速连接

本章主要介绍在 Python 开发的时候&#xff0c;如何使用 Python 快速连接达梦数据库。 dmPython 简介 dmPython 是 DM 提供的依据 Python DB API version 2.0 中 API 使用规定而开发的数据库访问接口。 使用 Python 连接达梦数据库时需要安装 dmPython。安装完 DM 数据库软件…

Python的df.cumsum()函数

Python Pandas dataframe.cumsum() Python是一种进行数据分析的伟大语言&#xff0c;主要是因为以数据为中心的Python包的奇妙生态系统。Pandas就是这些包中的一个&#xff0c;它使导入和分析数据变得更加容易。 Pandas dataframe.cumsum()用于查找任何axis上的累积和值。每个…

基于51单片机的多功能计算器全套设计

通过本次课题设计,应用《单片机应用基础》、《数据结构》等所学相关知识及查阅资料,完成实用计算器的设计,以达到理论与实践更好的结合、进一步提高综合运用所学知识和设计的能力的目的。 通过本次设计的训练,可以使我在基本思路和基本方法上对基于MCS-51单片机的嵌入式系…