vue组件的基本使用方法

news2024/11/18 3:20:26

组件

【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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用 Django 连接 MySQL 数据库

使用 Django 连接 MySQL 数据库

文章目录 步骤一&#xff1a;安装必要的库和驱动步骤二&#xff1a;配置数据库连接步骤三&#xff1a;执行数据库迁移步骤四&#xff1a;开始使用 MySQL 数据库创建一个模型迁移模型到数据库使用模型进行数据操作创建新记录&#xff1a;查询记录&#xff1a;更新记录&#xff1…
阅读更多...
264 基于matlab的自适应语音盲分离

264 基于matlab的自适应语音盲分离

基于matlab的自适应语音盲分离&#xff0c;当a和b同时对着传声器A,B说话且传声器靠得很近时&#xff0c;传声器A,B会同时接受到a和b的声音&#xff0c;即a和b产生了混叠干扰&#xff0c;此时通过自适应语音盲分离系统可以将a,b的声音分离开&#xff0c;使得一个信道只有一个人的…
阅读更多...
【并发程序设计】11.进程间通信

【并发程序设计】11.进程间通信

11.进程间通信 &#xff08;IPC&#xff0c;InterProcess Communication&#xff09;进程和进程之间交换信息。 常用通信方式 无名管道&#xff08;pipe&#xff09;有名管道 &#xff08;fifo&#xff09;信号&#xff08;signal&#xff09;共享内存(mmap)套接字&#xff0…
阅读更多...
平衡二叉树的构建（理论，部分函数代码）

平衡二叉树的构建（理论，部分函数代码）

平衡二叉树是二叉排序树的一种特殊情况&#xff0c;平衡二叉树的出现是为了在最坏情况下的时间复杂度仍然是对数级别O(logn)&#xff0c;从而保证了高效的搜索、插入和删除操作。 举个例子&#xff0c;如果有一个数组是&#xff1a;1&#xff0c;2&#xff0c;3。如果只简单的…
阅读更多...
数据库多表查询

数据库多表查询

多表查询&#xff1a; SELECT *FROM stu_table,class WHERE stu_table.c_idclass.c_id; 多表查询——内连接 查询两张表交集部分。 隐式内连接&#xff1a; #查询学生姓名&#xff0c;和班级名称&#xff0c;隐式调用 SELECT stu_table.s_name,class.c_name FROM stu_table…
阅读更多...
vs code 中使用SSH 连接远程的Ubuntu系统

vs code 中使用SSH 连接远程的Ubuntu系统

如下图&#xff0c;找到对应的位置 在电脑上找到以下位置 打开配置如下&#xff0c;记住&#xff0c;那个root为你的用户名&#xff0c;这个用户名&#xff0c;具体根据你的用户名来设置&#xff0c;对应的密码就是你登录Ubuntu时的密码 Host root192.168.0.64User rootHostNa…
阅读更多...
文件跨境传输法律管控越来越严格，企业该如何有效应对？

文件跨境传输法律管控越来越严格，企业该如何有效应对？

文件跨境传输已经成为非常普遍的业务需求&#xff0c;企业在世界各地的总分支处、合作伙伴&#xff0c;客户间开展业务时&#xff0c;必须基于数据的跨境流转而展开。 但随着世界各国对数据安全的重视&#xff0c;文件跨境传输也日趋严格&#xff0c;各国在法律法规上均出具了更…
阅读更多...
RP2040 SPI DMA驱动ST7735

RP2040 SPI DMA驱动ST7735

SPI DMA演示 一、源码 #include <stdio.h> #include <stdlib.h> #include "pico/stdlib.h" #include "pico/binary_info.h" #include "hardware/spi.h" #include "hardware/dma.h" #include "font.h"#define X…
阅读更多...
Ownips+Coze海外社媒数据分析实战指南

Ownips+Coze海外社媒数据分析实战指南

目录 一、引言二、ISP代理简介三、应用实践——基于Ownips和coze的社媒智能分析助手3.1、Twitter趋势数据采集3.1.1、Twitter趋势数据接口分析3.1.2、Ownips原生住宅ISP选取与配置3.1.3、数据采集 3.2、基于Ownips和Coze的社媒智能助手3.2.1、Ownips数据采集插件集成3.2.2、创建…
阅读更多...
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查看…
阅读更多...
首搭第五代DM技术，秦L DM-i正式上市，仅售9.98万元起

首搭第五代DM技术，秦L DM-i正式上市，仅售9.98万元起

5月28日&#xff0c;比亚迪王朝重磅新车秦L DM-i在西安震撼上市&#xff0c;首搭第五代DM技术&#xff0c;百公里亏电油耗达到划时代的2.9L&#xff0c;“一箱油”满油满电综合续航达2100公里&#xff0c;引领中级&#xff0c;创下了百公里油耗的历史新低&#xff0c;开创油耗2…
阅读更多...
机顶盒也可以跑pcdn--上机指南(贰)

机顶盒也可以跑pcdn--上机指南(贰)

机顶盒能跑PCDN&#xff0c;以下是相关上机指南操作步骤&#xff1a; 1.申请PCDN服务&#xff1a;登录PCDN控制台&#xff0c;申请开通PCDN服务。 2.后台开通PCDN服务&#xff1a;工作人员与用户沟通业务详细需求&#xff0c;用户确定使用PCDN&#xff0c;后台为用户开通PCDN…
阅读更多...
VolWeb：集中式增强型数字取证内存分析平台

VolWeb：集中式增强型数字取证内存分析平台

关于VolWeb VolWeb是一款最新开发的集中式增强型数字取证内存分析平台&#xff0c;该平台基于Volatility 3框架实现其功能&#xff0c;该工具旨在辅助广大研究人员执行安全分析和事件应急响应等任务。 VolWeb可以提供集中式、可视化的增强型网络应用程序&#xff0c;并提高安全…
阅读更多...
Java基础：类的详细说明

Java基础：类的详细说明

Java是一门面向对象的编程语言&#xff0c;所谓的面向对象&#xff0c;简单的说&#xff0c;就是在软件开发过程中&#xff0c;用各种各样的对象实现所需功能。 对象就好像是现实世界中不计其数的物体&#xff0c;根据物体的性质可以将其进行分门别类&#xff1a;石头、锤子、…
阅读更多...
深入分析 Android Activity (十一)

深入分析 Android Activity (十一)

文章目录 深入分析 Android Activity (十一)1. Activity 的内存管理和优化1.1 内存泄漏的常见原因1.2 避免内存泄漏的方法1.3 内存泄漏检测工具 2. Activity 的配置变更处理2.1 处理配置变更2.2 保存和恢复状态2.3 使用 ViewModel 3. Activity 的测试3.1 单元测试3.2 UI 测试 4…
阅读更多...
编译安装Apache httpd服务（LAMP1）

编译安装Apache httpd服务（LAMP1）

目录 1.初始化设置&#xff0c;将Apache所需软件包传到 /opt 目录下 &#xff08;1&#xff09;关闭防火墙 &#xff08;2&#xff09;上传软件包到/opt目录 2.安装环境依赖包 3.配置软件模块 4.编译及安装 5.优化配置文件路径&#xff0c;并把httpd服务的可执行程序文件…
阅读更多...
DDR5芯片系统框图详解

DDR5芯片系统框图详解

DDR5 SDRAM（双倍数据率五代同步动态随机存取存储器）的功能框图详细展现了其内部结构和各个关键模块，这些模块协同工作以实现高速数据传输和存储管理。以下是主要组成部分的详细介绍： Controller Logic (控制器逻辑)这是DDR5内存系统的大脑，负责接收来自CPU或SoC的指令，解…
阅读更多...
怎么从视频中截取图片？这3个视频截图方法超清晰

怎么从视频中截取图片？这3个视频截图方法超清晰

怎么从视频中截取图片&#xff1f;从视频中截取图片确实是一个不可或缺的技能&#xff0c;特别是在我们想要留住视频中的某个动人瞬间、重要细节或是用于制作海报、封面等场合时。无论是专业的视频编辑人员&#xff0c;还是普通用户&#xff0c;掌握这技巧都能让视频内容得到更…
阅读更多...
光缆监测主要功能值得一看

光缆监测主要功能值得一看

网络资源管理&#xff1a; 设备管理&#xff1a; 测试告警处理&#xff1a; 百度地图&#xff1a; 报表打印&#xff1a; 路由测试数据、路由段数据、路由故障报警统计、当前故障通知情况、路由测试数据、路由段信息。 手机客户端&#xff1a; 通过手机可以访问系统&#x…
阅读更多...
为WPF的Grid添加网格边框线

为WPF的Grid添加网格边框线

在WPF中使用Grid绘制表格的时候&#xff0c;如果元素较多、排列复杂的话&#xff0c;界面会看起来很糟糕&#xff0c;没有层次&#xff0c;这时用网格或边框线分割各元素&#xff08;标签或单元格&#xff09;将会是页面看起来整齐有条理。 默认没有边框线的如下图所示&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023