码迷,mamicode.com
首页 > Web开发 > 详细

vue.js快速入门(三)~组件入门~

时间:2018-07-16 19:27:29      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:extend   type   template   round   属性   new   ajax   封装   独立   

组件系统是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快速入门(三)~组件入门~

标签:extend   type   template   round   属性   new   ajax   封装   独立   

原文地址:https://www.cnblogs.com/yizhizhangBlog/p/9319302.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!