18-组件化开发 根组件

组件化开发 & 根组件: 

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

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

            组件分类: 普通组件 , 根组件

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

 

 App.vue文件(单文件组件) 的三个组成部分:

1. 语法高亮插件

2. 三部分组成 

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

        * script: js逻辑

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

3. 让组件支持less

        1.  style标签,lang="less" 开启less功能

        2.  装包: yarn add less less-loader 或 npm i less less-loader --save

<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支持less1. 给 style加上 lang="less"2. 安装依赖包 less less-loadernpm i less less-loader -D (开发依赖:只在开发时使用)
*/
.App {width: 400px;height: 400px;background-color: pink;.box {width: 100px;height: 100px;background-color: skyblue;}
}
</style> 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能家居(4)---火灾报警线程封装

封装火灾报警线程实现智能家居中的火灾报警功能 mainPro.c&#xff08;主函数&#xff09; #include <stdio.h> #include "controlDevice.h" #include "inputCommand.h"#include <pthread.h>struct Devices *pdeviceHead NULL; …

分布式理论

CAP和BASE CAP C一致性&#xff08;Consistency&#xff09; 在分布式环境下&#xff0c;一致性是指数据在多个副本之间能否保持一致性的特征。在一致性的需求下&#xff0c;当一个系统在数据一致的状态下执行更新操作后&#xff0c;应该保证系统的数据仍然处于一致性的状态…

Python-迭代

1、迭代器 迭代器是一个对象&#xff0c;它可以记录遍历的相关信息&#xff0c;迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。迭代器有两个基本的方法&#xff1a;iter() 和 next()。我们都过命令行工具&#xff0c;了解一下python的底层迭代…

常见指令以及权限理解

常见指令以及权限理解 命令格式&#xff1a; command [-options] parameter1 parameter1 命令 选项 参数1 参数2 1.command为命令名称&#xff0c;例如变化目录的cd等 2.中括号[ ]实际在命令中是不存在的&#xff0c;这个中括号代表可选&#xff0c;通常选项前面会添加一个符号…

Go和Java实现模板模式

Go和Java实现模板模式 下面通过一个游戏的例子来说明模板模式的使用。 1、模板模式 在模板模式中&#xff0c;一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现&#xff0c;但调用将 以抽象类中定义的方式进行。这种类型的设计模式属于行为型…

react-vite-antd环境下新建项目

vite 创建一个react项目 1. 安装vite并创建一个react项目1. 我使用的 yarn安装&#xff0c;基本配置项目名字, 框架react &#xff0c;js2. cd vite-react进入项目目录安装node包并启动项目 2. 安装引入Ant Design引入依赖&#xff08;我用的yarn&#xff0c;没有安装的也可以使…

视频汇聚/视频云存储/视频监控管理平台EasyCVR添加萤石云设备详细操作来啦!

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现

实现效果&#xff1a; html代码&#xff1a; <div class"sidenav"><ul class"nav-text progressbar"><!-- data-target的值对应要跳转的模块的id --><li data-target"module1"><div class"text">锚点…

Effective Java 案例分享(九)

46、使用无副作用的Stream 本章节主要举例了Stream的几种用法。 案例一&#xff1a; // Uses the streams API but not the paradigm--Dont do this! Map<String, Long> freq new HashMap<>(); try (Stream<String> words new Scanner(file).tokens()) …

Java创建对象的几种方式

在Java中&#xff0c;对象是程序中的一种基本元素&#xff0c;它通过类定义和创建。本篇教程旨在介绍Java中创建对象的几种方式&#xff0c;包括使用new关键字、反射、clone、反序列化等方式。 使用new关键字创建对象 在Java中&#xff0c;最常用的创建对象方式是使用new关键…

linux学习(文件描述符)[13]

所以fork的时候函数执行完毕&#xff0c;但是数据还在缓冲区中未刷新。 所以会有父子两份数据 在fork&#xff08;&#xff09;之前ffush&#xff08;&#xff09;&#xff08;c语言的接口&#xff0c;刷新缓冲区&#xff09;fflush(stdout)&#xff0c;就不会有重复 缓冲区的…

Trie树(前缀树)的实现与应用

Trie树&#xff0c;也被称为前缀树&#xff0c;是一种用于处理字符串的数据结构。它可以高效地进行字符串的插入、删除和搜索操作&#xff0c;并且能够快速找到具有相同前缀的字符串。本篇博客将详细介绍Trie树的实现原理和应用场景&#xff0c;并给出Java代码示例。 Trie树的…

MyBatis的入门级环境搭建及增删改查,详细易懂

目录 一.mybatis的简介 二.MyBatis的环境搭建 2.1 导入pom依赖 2.2 数据库文件导入连接 2.3 修改web.xml文件 2.4 安装插件 2.5 配置文件 2.5.1 mybatis.cfg.xml文件 2.5.2 generatorConfig.xml文件 2.6 最后测试生成代码 三.MyBatis的增删改查 3.1 写service类&#xff…

Linux命令200例:nc非常有用的网络工具(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

【LVS】3、LVS+Keepalived群集

为什么用它&#xff0c;为了做高可用 服务功能 1.故障自动切换 2.健康检查 3.节点服务器高可用-HA Keepalived的三个模块&#xff1a; core&#xff1a;Keepalived的核心&#xff0c;负责主进程的启动、维护&#xff1b;调用全局配置文件进行加载和解析 vrrp&#xff1a;实…

matlab使用教程(16)—图论中图的定义与修改

1.修改现有图的节点和边 此示例演示如何使用 addedge 、 rmedge 、 addnode 、 rmnode 、 findedge 、 findnode 及 subgraph 函数访问和修改 graph 或 digraph 对象中的节点和/或边。 1.1 添加节点 创建一个包含四个节点和四条边的图。s 和 t 中的对应元素用于指定每条…

使用 MBean 和 日志查看 Tomcat 线程池核心属性数据

文章目录 CustomTomcatThreadPoolMBeanCustomTomcatThreadPool CustomTomcatThreadPoolMBean com.qww.config;public interface CustomTomcatThreadPoolMBean {String getStatus(); }CustomTomcatThreadPool package com.qww.config;import com.alibaba.fastjson.JSON; impor…

三本书与三场发布会,和鲸社区重新定义编程类书籍从阅读到实践新体验

当 AI 开发者社区配备 AI 基础设施开发平台工具时&#xff0c;它还能做什么&#xff1f; 答案是&#xff1a;过去半年&#xff0c;和鲸社区凭借在气象、医学、社科等垂直领域的长期积累以及多方伙伴的支持&#xff0c;联合举办了三场新书发布会——从 Python 到 R 语言 、从气…

Midjourney Prompt 提示词速查表 v5.2

Midjourney 最新的版本更新正不断推出令人兴奋的新功能。这虽然不断扩展了我们的AI绘图工具箱&#xff0c;但有时也会让我们难以掌握所有实际可以使用的功能和参数。 针对此问题, 小编整理了 "Midjourney Prompt 提示词速查表"&#xff0c;这是一个非常方便的 Midjo…

Java“牵手“拼多多商品详情页面数据获取方法,拼多多API实现批量商品数据抓取示例

拼多多商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据&#xff0c;您可以通过开放平台的接口或者直接访问拼多多商城的网页来获取商品详情信息。以下是两种常用方法的介绍&#xff1a;…