35.组件-创建全局组件方式1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=adge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <!-- 如何引入一个全局的Vue组件呢？直接把组件的名称，以便签的形式，放到页面上即可 -->
    <mycom1></mycom1>
    </div>
</body>
<script>
    //创建全局组件的第一种方式：component组件单词
    const com1=Vue.extend({
        template:"<h1>这是创建的第一个全局组件</h1>"//template属性，表示这个组件的UI代码结构
    })
    //使用Vue.component向全局注册一个组件
    //Vue.component("组件的名称,不能包含大写",组件的构造函数)
    //如果名称中一定要有大写，需要使用【my-com1】这个-连字符来链接，所以不推荐使用大写
    Vue.component("mycom1",com1)

    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{},
        filters:{},
        directives:{},
        created(){},
        mounted(){}
    });
</script>
</html>

 

posted @ 2021-03-15 09:18  种太阳  阅读(21)  评论(0)    收藏  举报