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

Vue.js---组件

时间:2017-03-30 19:32:05      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:ext   创建   注册   连接   template   nbsp   组件   运行   log   

详情点此连接(转载)

组件的创建和注册

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---组件

标签:ext   创建   注册   连接   template   nbsp   组件   运行   log   

原文地址:http://www.cnblogs.com/zhongjiang/p/6647252.html

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