Vue系列教程-14-component-组件化-基本使用

component:组件,是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码,并且在其它页面使用。
使用步骤:
1.创建组件构造器

const myTitle = Vue.extend({template:""});

2. 注册组件,

Vue.component('my-title',myTitle);

3. 使用组件,在html中使用

<my-title></my-title>

啪啪它:

我是分割线


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--3. 使用组件-->
        <my-title></my-title>
        <my-title></my-title>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1.创建组件构造器
        const myTitle = Vue.extend({
            template: `
                <div>
                    <span>Title</span>
                    <span>User</span>
                </div>`
        });
        //2. 注册组件,注意不能用驼峰命名法,否则无效如myTitle或者定义时驼峰,使用时用-分割 Vue.component('myTitle',myTitle); <my-title></my-title>
        Vue.component('my-title',myTitle);

        let app = new Vue({
            el: '#app',
        });
    </script>
</body>
</html>

我是分割线

前台效果:

Title
点赞

发表评论