vue组件的基本使用方法

m0_583105902024-05-29 19:36

组件

【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 组件中的数据，事件都是独立
html 复制代码 
<!--   -局部组件：只能在当前页面中使用
       -全局组件：全局都可以用  -->

注意点：

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

全局组件

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

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

这个就是注册组件的方法

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

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

    js 复制代码 
        new Vue({
        el: "#app"
    });

    全局的使用步骤：

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

    js 复制代码 
    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 标签一样，将组件标签插入到所需位置。

    html 复制代码 
    <div id="app">
    <all-zhu></all-zhu>
</div>

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

    js 复制代码 
        // 创建 Vue 实例
    new Vue({
        el: "#app"
    });
html 复制代码 
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/[email protected]/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在里面创建局部组件的标签

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

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

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

  • 最后使用局部组件

    html 复制代码 
    <div id="app">

    <all-zhu></all-zhu>
    <hr>
    <h1>这个是局部组件</h1>
    <loacllzhu></loacllzhu>
</div>
htMl 复制代码 
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/[email protected]/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>

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

  • 不建议怎么做可能会导致数据混乱不符合（Vue的设计理念）
html 复制代码 
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/[email protected]/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>

第二种的注册组件的方法

html 复制代码 
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/[email protected]/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>
相关推荐
小小小小宇2 小时前
TS泛型笔记
前端
小小小小宇2 小时前
前端canvas手动实现复杂动画示例
前端
codingandsleeping2 小时前
重读《你不知道的JavaScript》（上）- 作用域和闭包
前端·javascript
小小小小宇2 小时前
前端PerformanceObserver使用
前端
zhangxingchao3 小时前
Flutter中的页面跳转
前端
前端风云志4 小时前
TypeScript实用类型之Omit
javascript
烛阴4 小时前
Puppeteer入门指南：掌控浏览器，开启自动化新时代
前端·javascript
全宝5 小时前
🖲️一行代码实现鼠标换肤
前端·css·html
小小小小宇5 小时前
前端模拟一个setTimeout
前端
萌萌哒草头将军5 小时前
🚀🚀🚀 不要只知道 Vite 了，可以看看 Farm ，Rust 编写的快速且一致的打包工具
前端·vue.js·react.js
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02DeepSeek各版本说明与优缺点分析03KGG转MP3工具|非KGM文件|解密音频04扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解05零代码入门 | Coze——让大模型接入自己的数据库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07电工电子课程设计---四路病房呼叫系统08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10AI Agent | Coze 插件使用指南：从功能解析到实操步骤