vue组件的基本使用方法

组件

【1】组件是什么？

  • 组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用
  • 例如：有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
  • 组件把js，css，html放到一起，有逻辑，有样式，有html

【2】组件的组成

  • 模板 (Template)：定义了组件的结构和布局，采用 HTML 语法。
  • 数据 (Data)：组件内部的数据状态，可以通过 Vue 的数据绑定机制将数据和模板进行关联。
  • 方法 (Methods)：定义了组件的行为和逻辑，可以在组件中定义各种方法来处理事件、计算属性等。
  • 生命周期钩子 (Lifecycle Hooks)：Vue 提供了一系列的生命周期钩子函数，用于在组件生命周期的不同阶段执行特定的逻辑。
  • 计算属性 (Computed Properties)：用于定义基于响应式数据的派生状态，通常用于复杂的数据计算。
  • 监听器 (Watchers)：用于观察和响应数据的变化，可以在数据发生变化时执行特定的逻辑。

【3】组件的分类：

  • **全局组件：**可以放在根中
  • 局部组件：

【4】组件的使用

  • 1 使用Vue.component 定义全局组件
  • 2 在组件中通过components配置项定义局部组件
  • 3 局部组件只能用在组件内部
  • 4 组件中的数据，事件都是独立
<!--   -局部组件：只能在当前页面中使用
       -全局组件：全局都可以用  -->

注意点：

  • 定义的组件（body中的位置）必须要放在Vue实例（这也是一个组件 根组件）中
  • 局部组件 必须放在 全局组件/根组件 中，无法单独使用
  • 定义的组件必须在Vue实例的上方

全局组件

组件共享一些公共功能，同时保持组件的独立性

    // 在 Vue 实例中注册局部组件
    Vue.component('local-lzhu', localLzhu);

这个就是注册组件的方法

  • 这个全局组件有点像Django的继承

  • 值得注意的事：不管任何以下语句都要写上

    •     new Vue({
        el: "#app"
    });

      全局的使用步骤：

  • 在 Vue 实例外部定义组件：使用 Vue.component 方法来定义全局组件，需要指定组件的名称和组件配置选项，如模板、数据、方法等。

    • Vue.component('all-zhu', {
    template: `
        <div>
            asdgq1
            <h1>--------------------------</h1>
            <img src="https://pic.netbian.com/uploads/allimg/240410/223535-17127597352d7a.jpg" alt="" height="300px" width="250px">
        </div>
    `,

});

  • 在 HTML 中引用组件：在 HTML 模板中使用自定义的组件标签，像使用普通 HTML 标签一样，将组件标签插入到所需位置。

    • <div id="app">
    <all-zhu></all-zhu>
</div>

  • 创建 Vue 实例：实例化 Vue 应用程序，并将其挂载到 HTML 页面的特定元素上，通常通过指定 el 选项来实现。

    •     // 创建 Vue 实例
    new Vue({
        el: "#app"
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

    <all-zhu>
    </all-zhu>

</div>

<script>
    // 定义组件
    Vue.component('all-zhu', {
        template: `
            <div>
                asdgq1
                <h1>--------------------------</h1>
                <img src="https://pic.netbian.com/uploads/allimg/240410/223535-17127597352d7a.jpg" alt="" height="300px" width="250px">
            </div>
        `,
        data() {
            return {
                title: '首页',
                hobby: ['music', 'running', 'swim']
            }
        },
        methods: {
            handClick() {
                alert(this.title);
                this.hobby[0] = "hong"
            }
        }
    });

    // 创建 Vue 实例
    new Vue({
        el: "#app"
    });
</script>

</body>
</html>

局部组件

  • （不建议）在全局组件当中引入局部组件 ，但是局部组件可以直接应用到我的<body>标签当中

局部组件的使用步骤

  • 在Vue实例当中创建components在里面创建局部组件的标签

  • // 创建 Vue 实例
new Vue({
    el: "#app",
    data:{},
    components:{
        loacllzhu // 在 Vue 实例中注册局部组件
    }
});

  • 再使用定义的标签创建局部组件

  • // 定义局部组件
const loacllzhu = {
    template: `
              <div>
                <img src="https://pic.netbian.com/uploads/allimg/200604/001849-15912011295e8a.jpg" alt="" height="300px" width="250px">
              </div>`,
}

  • 最后使用局部组件

    • <div id="app">

    <all-zhu></all-zhu>
    <hr>
    <h1>这个是局部组件</h1>
    <loacllzhu></loacllzhu>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

    <all-zhu></all-zhu>
    <hr>
    <h1>这个是局部组件</h1>
    <loacllzhu></loacllzhu>
</div>

<script>
    // 定义局部组件
    const loacllzhu = {
        template: `
                  <div>
                    <img src="https://pic.netbian.com/uploads/allimg/200604/001849-15912011295e8a.jpg" alt="" height="300px" width="250px">
                  </div>`,
    }

    // 定义全局组件
    Vue.component('all-zhu', {
        template: `
          <div>
            <h1>--------------------------</h1>
            <h1>这个是全局组件</h1>
            <img src="https://pic.netbian.com/uploads/allimg/240410/223535-17127597352d7a.jpg" alt="" height="300px"
                 width="250px">
          </div>
        `,
        data() {
            return {
                title: '首页',
                hobby: ['music', 'running', 'swim']
            }
        },
        methods: {
            handClick() {
                alert(this.title);
                this.hobby[0] = "hong"
            }
        }
    });

    // 创建 Vue 实例
    new Vue({
        el: "#app",
        data:{},
        components:{
            loacllzhu // 在 Vue 实例中注册局部组件
        }
    });
</script>

</body>
</html>

image-20240428204823201

局部组件 放在 Vue实例(全局组件) 中

  • 不建议怎么做可能会导致数据混乱不符合（Vue的设计理念）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

    <all-zhu></all-zhu>
    <hr>
    <h1>这个是局部组件</h1>
    <loacllzhu></loacllzhu>
</div>

<script>
    // 定义局部组件
    const loacllzhu = {
        template: `
                  <div>
                    <img src="https://pic.netbian.com/uploads/allimg/200604/001849-15912011295e8a.jpg" alt="" height="300px" width="250px">
                  </div>`,
    }

    //定义全局组件
    Vue.component('all-zhu', {
        template: `
          <div>
            <h1>--------------------------</h1>
            <h1>这个是全局组件</h1>
            <img src="https://pic.netbian.com/uploads/allimg/240410/223535-17127597352d7a.jpg" alt="" height="300px"
                 width="250px">
            <local></local>
            <local></local>
            <local></local>
          </div>
        `,
        

        data() {
            return {
                title: '首页',
                hobby: ['music', 'running', 'swim']
            }
        },
        methods: {
            handClick() {
                alert(this.title);
                this.hobby[0] = "hong"
            }
        },
        components: {
            local: {
                template: `
            <div>
                <div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;">我是局部组件</div>
            </div>
        `,
            }
        }

    });

    // 创建 Vue 实例
    new Vue({
        el: "#app",
        data:{},
        components:{
            loacllzhu // 在 Vue 实例中注册局部组件
        }
    });
</script>

</body>
</html>

image-20240428211102357

  • 第二种的注册组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

    <all-zhu></all-zhu>
    <hr>
    <h1>这个是局部组件</h1>
    <local-lzhu></local-lzhu>
</div>

<script>
    // 定义局部组件
    const localLzhu = {
        template: `
                  <div>
                    <img src="https://pic.netbian.com/uploads/allimg/200604/001849-15912011295e8a.jpg" alt="" height="300px" width="250px">
                  </div>`
    }

    // 创建 Vue 实例
    new Vue({
        el: "#app",
        components: {
            'all-zhu': {
                template: `
                  <div>
                    <h1>--------------------------</h1>
                    <h1>这个是全局组件</h1>
                    <img src="https://pic.netbian.com/uploads/allimg/240410/223535-17127597352d7a.jpg" alt="" height="300px"
                         width="250px">
                    <local-lzhu></local-lzhu>
                    <local-lzhu></local-lzhu>
                    <local-lzhu></local-lzhu>
                  </div>
                `,
                data() {
                    return {
                        title: '首页',
                        hobby: ['music', 'running', 'swim']
                    }
                },
                methods: {
                    handClick() {
                        alert(this.title);
                        this.hobby[0] = "hong"
                    }
                }
            }
        }
    });

    // 在 Vue 实例中注册局部组件
    Vue.component('local-lzhu', localLzhu);
</script>

</body>
</html>

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

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

相关文章

[java基础揉碎]文件IO流

[java基础揉碎]文件IO流

目录 文件 什么是文件 文件流​编辑 常用的文件操作 创建文件方式一 创建文件方式二 创建文件方式三 tip:为什么new file 了还有执行createNewFile?new File的时候其实是在内存中创建了文件对象, 还没有在磁盘中, 当执行createNewFile的时候才是往磁盘中写入​编辑 …
阅读更多...
Golang 创建第一个web项目（Gin + Gorm）

Golang 创建第一个web项目（Gin + Gorm）

1. 写这篇博客的由来&#xff1a; 当你想使用最快的框架创建项目的时候是不是有点束手无策&#xff1f; 当你想配置数据库写 SQL 甚至不知道如何写&#xff0c;文件夹都不知道建在哪里&#xff1f; &#x1f604;因为Golang 目前并没有 JAVA 那种硬性规范&#xff0c;但是…
阅读更多...
基于JCEF实现网页资源性能分析

基于JCEF实现网页资源性能分析

文章目录 1、需求2、实现代码3、运行效果 1、需求 在使用chrome浏览器访问页面时&#xff0c;浏览器自带的开发者工具可以查看页面每个资源的资源大小和加载时间。 这个功能可以让我们直接知道接口或资源的耗时情况和大小情况&#xff0c;如果存在性能问题&#xff0c;可以进…
阅读更多...
LES物流执行系统，在离散制造行业有那些作用和价值？

LES物流执行系统，在离散制造行业有那些作用和价值？

离散制造企业往往面临的是多品种、小批量的非标订单生产&#xff0c;传统推动式物流系统已经无法应对计划变化滞后&#xff0c;各车间、工序之间难以衔接等情况&#xff0c;特别是密集劳动力的电子行业&#xff0c;非标产品 SKU 种类繁多&#xff0c;物料配送复杂&#xff0c;对…
阅读更多...
Chisel入门——在windows下vscode搭建|部署Scala2.13.3开发环境|用Chisel点亮FPGA小灯

Chisel入门——在windows下vscode搭建|部署Scala2.13.3开发环境|用Chisel点亮FPGA小灯

文章目录 前言一、vscode搭建scala开发环境1.1 安装Scala官方插件1.2 创建hello_world.scala文件1.3 确认java的版本(博主使用的是1.8)1.4 下载Scala Windows版本的二进制文件1.5 配置环境变量1.6 交互模式测试一下1.7 vscode运行scala 二、windows安装sbt2.1 下载sbt2.2 设置环…
阅读更多...
mac安装Redis

mac安装Redis

官网&#xff1a; https://redis.io中文网&#xff1a; Redis中文网 安装 brew install redis 查看版本 redis-server --version 开启关闭服务 方式一&#xff08;不推荐&#xff09; 这种方式不太建议&#xff0c;因为控制台不用输出相应的日志 开启服务 brew service…
阅读更多...
Qt项目使用pato mqtt C

Qt项目使用pato mqtt C

一，下载pato mqtt C 源码 git 地址:https://github.com/eclipse/paho.mqtt.c.git git 地址可能下载不下来，提供我的gitee地址 gitee地址：https://gitee.com/chaojidahuaidan2021/paho.mqtt.c.git 二，编译共享库 clone下来后，将项目导入到Qt工程中，此时这是一个cmke工程…
阅读更多...
uniapp一些问题解决

uniapp一些问题解决

1.按钮边框如何去除&#xff1f; 参考博主&#xff1a;微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app&#xff0c;顺便自己写个小程序。左上角放了个button&#xff0c;可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要…
阅读更多...
辅助科技照亮道路，携手共促盲文书写技能新飞跃

辅助科技照亮道路，携手共促盲文书写技能新飞跃

在这个科技日新月异的时代&#xff0c;创新的力量正以前所未有的方式融入我们的日常生活&#xff0c;特别是对于视觉障碍群体而言&#xff0c;技术的每一次进步都是通往更加独立生活的桥梁。今天&#xff0c;让我们聚焦于一款名为“蝙蝠避障”的辅助软件&#xff0c;它不仅为盲…
阅读更多...
Python数据可视化（六）

Python数据可视化（六）

实现事件处理效果 我们借助 matplotlib 可以实现事件处理效果&#xff0c;例如&#xff0c;单击关闭画布会出现画布被关闭的文本提 示&#xff0c;在画布上的图形界面任意位置单击可以获得放大后的此处图形界面等。下面&#xff0c;我们就挑选一些 典型的事件处理案例来讲解实现…
阅读更多...
基于微信小程序实现的【二手物品交易平台】后端 JAVA Springboot （内附设计LW + PPT+ 源码+ 演示视频 下载）

基于微信小程序实现的【二手物品交易平台】后端 JAVA Springboot （内附设计LW + PPT+ 源码+ 演示视频 下载）

项目名称 项目名称&#xff1a; 基于微信小程序的二手物品交易平台 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; Java, SSM框架数据库&#xff1a; MySQL前端技术&#xff1a; 微信小程序技术其他相关技术&#xff1a; HTML, MyEclipse开发…
阅读更多...
C#--Mapster(高性能映射)用法

C#--Mapster(高性能映射)用法

1.Nuget安装Mapster包引用 2.界面XAML部分 <Window x:Class"WpfApp35.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.m…
阅读更多...
Ubuntu配置Git

Ubuntu配置Git

安装git sudo apt install git 查看是否安装成功 git --version 配置git 用github上注册的用户名和邮箱地址&#xff0c;配置git git config --global user.name "username" git config --global user.email "usernameemail.com" 重启ubuntu查看…
阅读更多...
Filebeat进阶指南：核心架构与功能组件的深度剖析

Filebeat进阶指南：核心架构与功能组件的深度剖析

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《洞察之眼&#xff1a;ELK监控与可视化》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是ELK 2、FileBeat在ELK中的角色 二、Fil…
阅读更多...
【已解决】使用StringUtils.hasLength参数输入空格仍然添加成功定价为负数仍然添加成功

【已解决】使用StringUtils.hasLength参数输入空格仍然添加成功定价为负数仍然添加成功

Bug情景 今天在做功能测试时&#xff0c;发现使用使用StringUtils.hasLength&#xff08;&#xff09;方法以及定价为负数时&#xff0c;添加图书仍然成功 思考过程 0.1 当时在做参数检验时用了spring提供的StringUtils工具包&#xff0c;百度/大数据模型说&#xff1a; 0.2…
阅读更多...
Java 中BigDecimal传到前端后精度丢失问题

Java 中BigDecimal传到前端后精度丢失问题

1.用postman访问接口&#xff0c;返回的小数点精度正常 2.返回到页面里的&#xff0c;小数点丢失 3.解决办法&#xff0c;在字段上加注解 JsonFormat(shape JsonFormat.Shape.STRING) 或者 JsonSerialize(using ToStringSerializer.class) import com.fasterxml.jackson.a…
阅读更多...
Vim安装与配置教程（解决软件包Vim没有安装可候选）

Vim安装与配置教程（解决软件包Vim没有安装可候选）

一、Vim检测是否安装 1-输入vi查看是否安装&#xff1b; 2-按Tab键&#xff0c;显示以下字符为未安装&#xff1b; 3-显示以下字符为已安装&#xff08;可以看到有Vim&#xff09; 二、Vim安装过程 1. 打开终端&#xff0c;输入 sudo apt install vim; 2. 输入Y/y&#xff…
阅读更多...
sysbench安装（在线离线）

sysbench安装（在线离线）

简介 sysbench是一个多线程基准测试工具&#xff0c;它支持硬件&#xff08;CPU、内存、I/O&#xff09;、数据库基准压测等2种测试手段&#xff0c;用于评估系统的基本性能。本篇文章主要介绍sysbench在线和离线2种安装方法&#xff0c;并将离线编译时发生的异常记录到FAQ&…
阅读更多...
idm软件是做什么的 IDM是啥软件 idm软件怎么下载 idm软件怎么下载

idm软件是做什么的 IDM是啥软件 idm软件怎么下载 idm软件怎么下载

一、IDM是啥软件 IDM 是由美国 Tonec 公司开发的 Windows 软件&#xff0c;该软件最初于 2005 年发布。IDM全称Internet Download Manager&#xff0c;是一款Windows平台老牌而功能强大的下载加速器&#xff0c;专注于互联网数据下载。这款软件是一款不错的轻量级下载工具&…
阅读更多...
【windows】Total Uninstall：一款功能强大的完全卸载软件

【windows】Total Uninstall：一款功能强大的完全卸载软件

软件介绍 Total Uninstall是一款专业的软件卸载工具&#xff0c;旨在帮助用户彻底地清除计算机上的应用程序&#xff0c;包括与应用程序相关的所有文件和注册表项。以下是Total Uninstall的一些主要功能和特点&#xff1a; 完全卸载&#xff1a;软件可以监视应用程序的安装过程…
阅读更多...
最新文章

Copyright @ 2022~2023