vue-组件化开发基础

组件化开发基础、分为三个步骤：

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <!-- 3、使用组件 -->
    <my-cpn />
</div>

<body>
    <script>
        // 1、创建组件构造器对象
        const cnpC = Vue.extend({
            template: `
                <div>
                    <h2>我是标题</h2>
                    <p>组件化开发的思想</p>    
                </div>
            `
        })
        // 2、注册组件
        Vue.component('my-cpn', cnpC)
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        })
    </script>
</body>

</html>

步骤解析：

1、创建组件构造器对象

Vue.extend（）创建了一个组件构造器

通常在创建组件构造器的时候，通常会传入  template  代表我们自定义组件的模板

该模板是使用组件的地方，显示的HTML代码

2、注册组件

Vue.component()

调用Vue.component() 是将刚才组件构造器  构造的组件    注册为一个组件  ，并且给它起一个标签名

所需的有两个参数：

1、标签名    2、组件构造器名

3、使用组件

<my-cpn></my-cpn> 或  <my-cpn />
注：组件必须挂载到VUE实例下面才有效果，即#app 里面
posted @ 2019-10-29 16:27  个人升级打怪  阅读(442)  评论(0)  编辑  收藏  举报