欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-组件化开发基础

程序员文章站 2022-03-07 09:13:24
组件化开发基础、分为三个步骤: 注册组件 使用组件 步骤解析: 1、创建组件构造器对象 Vue.extend()创建了一个组件构造器 通常在创建组件构造器的时候,通常会传入 template 代表我们自定义组件的模板 该模板是使用组件的地方,显示的HTML代码 2、注册组件 Vue.componen ......

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

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