Component 初識組件 · web前端

[TOC] # 介紹 component組件是Vue學習的重點,其實組件就是制作自定義的標簽，這些標簽在HTML中是沒有的。比如：`<jspang></jspang>`。 # 全局化注冊組件全局化就是在構造器的外部用Vue.component來注冊，我們注冊現在就注冊一個`<jspang></jspang>`的組件來體驗一下 ~~~ <body> <div id="app"> <jdxia></jdxia> </div> </body> <script type="text/javascript"> //注冊全局組件 Vue.component('jdxia', { //這邊放模板 template: `<h1 style="color:red;">我是全局組件</h1>` }); var app = new Vue({ el: '#app', }); </script> ~~~ 我們在javascript里注冊了一個組件，在HTML中調用了他。這就是最簡單的一個組件的編寫方法，并且它可以放到多個構造器的作用域里 # 局部注冊組件局部注冊組件和全局注冊組件是向對應的，局部注冊的組件只能在組件注冊的作用域里進行使用，其他作用域使用無效 ~~~ <body> <div id="app"> <panda></panda> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', components: { "panda": { template: `<div style="color:red;">局部注冊的panda標簽</div>` } } }); </script> ~~~ 從代碼中你可以看出局部注冊其實就是寫在構造器里，但是你需要注意的是，構造器里的components 是加s的，而全局注冊是不加s的 # 組件和指令的區別組件注冊的是一個標簽，而指令注冊的是已有標簽里的一個屬性。在實際開發中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好，這只是個人觀點