计算机网络/计算机科学与应用/系统/运维/开发

Vue初始组件化

         组件化(模块)

            组件化三步骤

                1、创建组件构造器

                2、注册组件

                3、使用组件


                Vue.extend()

                调用Vue.extend()创建的是一个组件化构造器

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

                该模板就是在使用到组件的地方,要显示的html代码


<!DOCTYPE html>

<html>

    <head>

        <title>修饰符</title>

        <meta charset="UTF-8">

    </head>

    <body>

        <div id="app">

             // 3、使用组件 必须在vue实例中

             <my-cpn></my-cpn>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            // 1、创建组件构造器对象

            const cpnC = Vue.extend({

                template:`<div>

                    <h2>标题</h2>

                    <p>内容</p>

                </div>`

            })

            // 2、注册组件

            //Vue.component('组件标签名')

            Vue.component('my-cpn',cpnC)


            let app = new Vue({

                el:"#app",

                data:{

                  

                },

            })

        </script>

    </body>

</html>


vue

人生于世,就得有点兴致,闲暇之时,或乐游山水、或尽享食味、或寄情岁时,它让我们的生活变得充盈。

评论

^