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的 # 组件和指令的区别组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点