Vue组件化编程

导读:本篇文章讲解 Vue组件化编程,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、模块

理解:向外提供特定功能的js程序,一般就是一个js文件。
为什么:js文件很多很复杂。
作用:复用js,简化js的编写,提高js运行效率。

模块化:
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。

二、组件

理解:用来实现应用中局部功能代码和资源的集合。
为什么:一个界面的功能很复杂。
作用:复用编码,简化项目编码,提高运行效率。

组件化:
当应用中的功能都是多组件的方式来编写的,那这个应用就是组件化的应用。

非单文件组件:
一个文件中包含有n个组件。

单文件组件:
一个文件中只包含有一个组件。

三、非单文件组件

Vue中使用组件的三大步骤:

  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件(写组件标签)

几个注意点:

  • 关于组件名:
            一个单词组成:
                第一种写法(首字母小写):school
                第二种写法(首字母大写):School
            多个单词组成:
                第一种写法(kebab-case命名):my-school
                第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
            备注:
            (1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
            (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
  • 关于组件标签:
            第一种写法:<school></school>
            第二种写法:<school/>
            备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。
  • 一个简写方式:
            const school = Vue.extend(options) 可简写为:const school = options

(1)创建组件

script代码:

        // 创建组件需要使用API:extends
        const girl = Vue.extends({
            //newVue里面的配置对象这里的使用方式几乎一样
            //data必须写成函数
            data() {
                return {
                    name: 'Mary',
                    age: 18
                }
            },
        })

        // 创建组件需要使用API:extends
        const boy = Vue.extends({
            //newVue里面的配置对象这里的使用方式几乎一样
            //data必须写成函数
            data() {
                return {
                    name: 'Mike',
                    age: 19
                }
            },
        })

(2)注册组件

script代码:

        //创建vm
        new Vue({
            el: '.root',
            //注册组件(局部注册)
            components: {
                //里面是键值对的方式,当组件名和变量名相同时可缩写
                girl,
                boy
            }
        })

(3)使用组件

使用template可以配置组件结构:

            template: `
            <div>
            <h1>男生信息</h1>
            <h2>姓名:{{name}}</h2>
            <h2>年龄:{{age}}</h2>
            </div>`

            template: `
            <div>
            <h1>女生信息</h1>
            <h2>姓名:{{name}}</h2>
            <h2>年龄:{{age}}</h2>
            </div>`

在html结构中编写组件标签:

    <div class="root">
        <!-- 编写组件标签 -->
        <boy></boy>
        <hr>
        <!-- 编写组件标签 -->
        <girl></girl>
    </div>

最终页面输出效果:

Vue组件化编程

 四、组件的嵌套

注意:注册给谁就把组件标签写在谁的template里边

假设我们准备了一个学校组件和一个学生组件,学生组件包含在学校组件里面。

(一)首先我们需要在定义一个学校组件和一个学生组件:

        const student = Vue.extend({
            template: `
            <h1>学生名字:{{name}}</h1>
            `,
            data() {
                return {
                    name: '张三',
                }
            },
        })

        const school = Vue.extend({
            template: `
            <h1>学校名字:{{name}}</h1>
            `,
            data() {
                return {
                    name: '北京大学',
                }
            },
        })

(二)注册组件

            //在Vue里面注册学校组件
            components: {
                school
            }

            //在学校组件里面注册学生组件
            components: {
                student
            }

(三)使用组件

   //在HTML编写school组件标签
    <div class="root">
        <school></school>
    </div>

    template: `
     <div>
     <h1>学校名字:{{name}}</h1>
    //在school组件里面编写student标签
     <student></student>
     </div>`

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/6244.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!