十六、Component 初识组件

╰+哭是因爲堅強的太久メ 2022-05-03 07:56 213阅读 0赞

#                        Component 初识组件 #

component组件是Vue学习的重点、重点、重点，重要的事情说三遍。所以你必须学好Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。比如：，那我们就开始学习这种技巧吧。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>component-1</title>
    </head>
    <body>
        <h1>component-1</h1>
        <hr>
        <div id="app">
            <jspang></jspang>
            <panda></panda>
        </div>
        <hr>
    
        <div id="app2">
            <jspang></jspang>
            <panda></panda>
        </div>
        
    
    
        <script type="text/javascript">
            //注册全局组件：默认注册到所有的vue实例对象
            Vue.component('jspang',{
                template:`<div style="color:red;">全局化注册的jspang标签</div>`
            })
            //在vue对象中声明app可以使用vue对象
            var app=new Vue({
                el:'#app',
                data:{
                }
            })
    
            //注册局部组件:只注册到一个vue实例
            var app=new Vue({
                el:'#app2',
                components:{
                    "panda":{
                        template:`<div style="color:red;">局部注册的panda标签</div>`
                    }
                }
            })
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-02-初识组件

组件化是 mvvm 开发的核心思想，主要是在于将复杂页面拆分称为一个个可复用的小组件，若是存在多个页面需要用到这个小组件，那么只需要传递不同的数据进去，然后在小组件内部处理数据

野性酷女/ 2023年07月19日 10:52/ 0 赞/ 30 阅读

相关初识HTML(五)---组件化思想

组件化思想 > 大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博

浅浅的花香味﹌/ 2022年12月20日 05:38/ 0 赞/ 224 阅读

相关 Netty的核心组件初识

一概述 Netty中主要构件块为： Channel 回调 Future 事件和ChannelHandler 它们代表了不同类型的构造：资源，

青旅半醒/ 2022年11月21日 01:22/ 0 赞/ 245 阅读

相关初识Spring Boot（六）

1、日志框架小张要开发一个大型系统，每次为了调试方便他喜欢在控制台打印关键数据，突然有一天，项目开发完了，老板跑过来说，小张，你这代码里System.out.

快来打我*/ 2022年05月27日 01:40/ 0 赞/ 252 阅读

相关初识Vue.js（六）

6.1 表单控件的基本用法表达控件在业务中较为常见，比如多选，下拉选择，输入框等，用它们可以完成数据的录入、校验、提交等。Vue.js提供了V-model指令，用于在表单

超、凢脫俗/ 2022年05月25日 08:09/ 0 赞/ 184 阅读

相关十八、Component 父子组件关系

Component 父子组件关系在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子

清疚/ 2022年05月03日 08:00/ 0 赞/ 191 阅读

相关十六、Component 初识组件

Component 初识组件 component组件是Vue学习的重点、重点、重点，重要的事情说三遍。所以你必须

╰+哭是因爲堅強的太久メ/ 2022年05月03日 07:56/ 0 赞/ 214 阅读

相关 Vue 框架-09-初识组件的应用

Vue 框架-09-初识组件的应用今天的第一个小实例，初步使用组件：在 app.js 中定义模板组件，在 html 文件中使用自定义标签来显示 js 文件中定义的

素颜马尾好姑娘i/ 2022年04月16日 01:46/ 0 赞/ 224 阅读

相关大数据组件之初识Hive

现在在互联网行业，稍微和大数据研发或者数据分析工作沾边的，都会有听到Hive这个工具。那么Hive是什么呢，是什么情况出现了Hive这个工具，它用来处理什么样的问题，哪些是它不

不念不忘少年蓝@/ 2022年01月13日 10:17/ 0 赞/ 228 阅读

相关 2-3 【初识组件】顶部 TabBar

[VsCode中使用Emmet神器快速编写HTML代码][VsCode_Emmet_HTML] 1 ![87548-20190628142637357-737262284

男娘i/ 2021年11月22日 02:46/ 0 赞/ 290 阅读