vue.js快速入门~组件入门~
Posted yizhihaha01
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js快速入门~组件入门~相关的知识，希望对你有一定的参考价值。
组件系统是vue的一个重要的概念。他可以让我们使用独立的，可复用的小组件来构建大的复杂的应用，任何应用都可以看作是组件树。组件可以看做是自定义的html代码。可扩展的html，封装可重用的html。
使用组件的使用分为三步
创建组件构造器，调用Vue.extend()创建，这是Vue构造器的扩展。他有个选项对象。选项对象有个template属性，定义组件要渲染的html
注册组件 ，Vue.compontent()注册
使用组件（在Vue实例的作用范围内使用组件，必须挂载在实例下，否则不生效）
举例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app1"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div> </body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"> </script> <script> var mycomponent = Vue.extend({ template:‘<div>啊啊啊，苍天大地</div>‘ }); var app1 = new Vue({ el: ‘#app1‘, components : {‘my-component‘ :mycomponent} }) //以下就没效果 var app1 = new Vue({ el: ‘#app2‘, }) </script> </html>
my-component是注册在#app1下的。所以不能在其他Vue实例下使用。
在组件中使用其他组件就构成了父子组件关系。
待续....
以上是关于vue.js快速入门~组件入门~的主要内容，如果未能解决你的问题，请参考以下文章