Vue中的组件-CSDN博客

本文链接：https://blog.csdn.net/wulianlang6162/article/details/99325987

什么是组件

组件的出现是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，

模块化和组件化不同

模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的只能单一
组件化：是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用

component创建组件

方法1

Vue.component('mycoml',{template:'<h1>这是组件</h1>'})
--------------------------------------------------------------------------
  <div id="app">
         <mycoml></mycoml>
             </div>

方法2

  Vue.component('mycoml',{template:'#appd'})
  ----------------------------------------------------------
              <template id="appd">
<div>
        <h1>这是组件</h1>
</div>
             </template>
 -------------------------------------------------------------
    <mycoml></mycoml>

案例代码

<!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=edge">
    <title>创建组件</title>
         <!--//导入js包-->
         <script src="js/vue.js"></script>
         <!-- Bootstrap -->
         <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
         <link href="./css/Animate.css" rel="stylesheet">
</head>
<body>
        <div id="app">
         <mycoml></mycoml>
             </div>
             <template id="appd">
<div>
        <h1>这是组件</h1>
</div>
             </template>
             <!-- 方法一 -->
             <script type="text/javascript">
             //第一个，参数是组件名称，用调用的时候驼峰原则
            //  Vue.component('mycoml',{template:'<h1>这是组件</h1>'})
            
            //方法二
            Vue.component('mycoml',{template:'#appd'})
                 new Vue({
                     el:'#app',
                     data () {
                    
                     }

                     
                 });
             </script>
</body>
</html>