Vue.js---组件
Posted zhangzhongjiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js---组件相关的知识，希望对你有一定的参考价值。
组件的创建和注册
vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。
1. 调用Vue.extend()方法创建组件构造器。
2. 调用Vue.component()方法注册组件。
3. 在Vue实例的作用范围内使用组件。
<!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件--> <my-component></my-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.创建一个组件构造器 var myComponent = Vue.extend({ template: \'<div>This is my first component!</div>\' }) // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component> Vue.component(\'my-component\', myComponent) new Vue({ el: \'#app\' }); </script> </html>
运行结果：
This is my first component!
以上是关于Vue.js---组件的主要内容，如果未能解决你的问题，请参考以下文章