十六、Component 初识组件

最新推荐文章于 2023-04-10 08:12:54 发布

大话JAVA的那些事

最新推荐文章于 2023-04-10 08:12:54 发布

阅读量491

点赞数

分类专栏： Vue 文章标签： component

本文链接：https://blog.csdn.net/newbie_907486852/article/details/83445429

版权

Vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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>

大话JAVA的那些事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十六、Component 初识组件

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component 初识组件&nbsp;&
复制链接

扫一扫

专栏目录