[深圳|结业弟子]JS-黄俊杰|2019年11月29日的日报-技能树.IT修真院

发表于： 2019-11-29 21:34:48

1 970

今天完成的事

看了VUE组件介绍

组件化是什么，简单理解就是

1：将一个完整的页面分成很多个组件

2：每个组件都用于实现页面的一个功能块

3：每个组件又可以进行细分，就形成了类似的组件树。

组件使用的三个步骤

1：创建组件构造器

调用vue.extend()方法，这个函数好像在JS里是继承的意思

        //第1步 调用vue.extend()方法 创建组件构造对象，并命名为cpnC 设置全局变量const
        // 在 template 下面放的是需要复用的html代码。
        const cpnC = Vue.extend({
            template:`
                <div>
                    <h2>组件试水</h2>
                    <p>垂死病中惊坐起</p>
                    <p>扶摇直上九万里</p>
                </div>`
        })

2：注册组件

调用vue.component()方法，单词是组件的意思

        //第2步 调用vue.component()方法 注册组件  如果需要注册局部组件，则在那个vue属性下面写  
        components:{
            zujian:cpnC
        }

        //单引号里面的是需要封装的标签 后面的是这个组件的名称
        Vue.component('zujian',cpnC)

3：使用组件

在vue实例的作用范围内使用组件

        <!-- 第3步，使用组件,标签为封装标签 -->
        <zujian></zujian>
        <zujian></zujian>
        <zujian></zujian>
        <zujian></zujian>

结果只需要打4个上面 ↑ 的封装，然后显示4段组件的构造对象

如果简写可以忽略掉创建那部分，直接把语法糖写进注册组件里

比如

        //单引号里面的是需要封装的标签 后面的是这个组件的名称
Vue.component('zujian',{            template:`
                <div>
                    <h2>组件试水</h2>
                    <p>垂死病中惊坐起</p>
                    <p>扶摇直上九万里</p>
                </div>`
        }) 

组件模板分离写法

将模板写进另一个script标签里面，添加一个类type="text/x-template"并起一个ID，

      组件模板分离写法 

<script type="text/x-template" id="cpn" >
    <div>
        <h2>组件试水</h2>
        <p>垂死病中惊坐起</p>
        <p>扶摇直上九万里</p>
    </div>
</script>

在注册的时候引用

        Vue.component('zujian',
        
        {template:"#cpn"}

        ) 

模板也可以简写，换成template标签即可

        <template id="cpn">
            <div>
                <h2>组件试水</h2>
                <p>垂死病中惊坐起</p>
                <p>扶摇直上九万里</p>
            </div>
        </template>

如果想在这个基础上创建一个子组件的话，就先在父组件上面创建一个组件，然后在父组件里面注册组件，并且在父组件中使用封装标签

明天的计划

看一下路由吧

{

            template:`

                <div>

                    <h2>组件试水</h2>

                    <p>垂死病中惊坐起</p>

                    <p>扶摇直上九万里</p>

                </div>`

}

返回列表

【任务2】 [深圳|结业弟子]JS-黄俊杰 | 2019年11月29日 的日报 中品

评论

分享到

【任务2】 [深圳|结业弟子]JS-黄俊杰 | 2019年11月29日的日报中品