Vue创建组件的方式

方式一

创建一个私有组件

  new Vue({
    el:"#app",
    components: {
       App:{
         template:"<div><h1>标题</h1><span>内容</span></div>"
       }
    },
    template:'<App></App>'
  })

方式二

这里创建的是一个全局组件

 <!-- <script>
  Vue.component("MySon",{
    template:"<div> 这是全局组件 </div>"
  })
  var vm = new Vue({
  el:'#app',
  data: {
  }
  })
  </script> -->

方式三

此方代码可以高亮的显示，并且有代码的提示，写起来比较方便

   <template id="login">
     <div @click = "handleClick" >
       <h1>标题</h1>
       <span>内容</span>
     </div>
   </template>
  <script>
 Vue.component("MyLogin",{
   template:"#login",
   methods:{
    handleClick() {
     alert("a")
    }
   }
 })