当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue-组件化开发基础

vue-组件化开发基础

2019年10月30日  | 移动技术网IT编程  | 我要评论

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

  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 里面

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网