Vue---组件初步

最新推荐文章于 2023-06-03 22:00:04 发布

郭浩326

最新推荐文章于 2023-06-03 22:00:04 发布

阅读量186

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72785533

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
        <div id="app">
            <my-comp></my-comp>
        </div>
        <div id="app2">
            <my-comp></my-comp>
            <my-comp2></my-comp2>
            <my-comp3></my-comp3>
        </div>
</body>
<script>
    /**
     *
     * 组件的命名规则：
     *      1、组件的名称应该使用驼峰法（xxxXxxXxx）
     *      2、或者中划线法(xxx-xx-xx)，符合W3C规定的
     *      3、尽量的命名规范，命名要有意义
     *      4、不要使用html原有的标签名称（例如：a、span）
     *
     * */    

    Vue.component("myComp",{
        template:"<h1>我是全局</h1>"
    });
    new Vue({
        el:"#app",
    });

    var jub=new Vue({
        components:{
            myComp2:{
                template:"<h1>我是局部2</h1>"
            },
            myComp3:{
                template:"<s>我是局部3</s>"
            }
        }
    }).$mount("#app2");

//  }).$mount("#app");//相当于el : "#app"

    new Vue({
        el:"#app2",
    })
</script>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---组件初步

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="js/vue.js">script>head>body> div id="app"> my-comp>my-comp> div> div i
复制链接

扫一扫