目录

一:什么是Vue组件?干什么用的?

二:组件的使用     

        1.非单文件组件

      (1)定义:一个文件中包含有n个组件

      (2)非单文件组件的使用步骤

(非单文件组件扩展知识点)

            1.关于组件名:

            2.关于组件标签

            3.一个简写方式:

2.单文件组件 :实际开发中大部分使用的都是单文件组件


一:什么是Vue组件?干什么用的?

        1.Vue组件的定义:实现应用中局部功能代码资源的集合。

                局部就是只控制一小块的地方,比如header组件,就只负责顶部这一块,其他的都不归他管,每个部分都有组件控制

                代码包括 HTML ,CSS,JS等,资源比如视频,音频,图片等。

        2.作用:复用代码,简化项目编码,提高运行效率。

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

   

二:组件的使用     

        组件分为非单文件组件和单文件组件

        1.非单文件组件

                (1)定义:一个文件中包含有n个组件

                (2)非单文件组件的使用步骤

         分为三步:     1.定义组件

                                2.注册组件

                                3.使用组件

                       

<script>
    Vue.config.productionTip = false;

    //第一步: 定义组件(创建组件)
    const vc = Vue.extend({
        // el:'',//不可以写el,因为最终都是为vm实例对象选择的容器服务
        // 模板代码
        template:`
        <div>
        <h1>创建组件的步骤</h1>
        <h3>{{type1}}</h3>
        <h3>{{type2}}</h3>
        <h3>{{type3}}</h3>
        </div>
        `,
        data(){
            return {
                type1:'1.定义组件',
                type2:'2.注册组件',
                type3:'3.使用组件'
            }
        }
    })

    // 创建实例对象
    new Vue({
        el:'.box',
        // 第二步: 注册组件(局部注册)
        components:{
            // aaa是使用时的名字,vc是组件的名字,这两个可以一样比如vc:vc,
            aaa:vc,
        }
    })
</script>

        使用组件可以直接在容器中写<组件名></组件名>,也可以在实例中new的时候传入template

第一种方式:

<body>
    <div class="box">
        <!-- 第三步: 使用组件 -->
        <!-- 这里的aaa是注册组件时的命名 -->
        <aaa></aaa>
    </div>

</body>

第二种方式:

几个需要注意的点!!! :

        1. 在定义组件时,不能写el属性,因为最终都是为了实例化对象el属性选择的容器服务        

        2. template属性中的模板代码只能有一个根标签

        3.data属性有两种写法之前已经说过了,但是这里只能写成函数式,以返回值的形式使用data里的数据 (每使用一次组件时返回新的数据,不会和之前的产生关联)     

        4.实例对象中components属性是注册组件时用到的,和data,el同级别,里面的命名可以是一样的比如{ vc:vc}(  简写为{vc}  )

至此,非单文件组件已被成功使用

(非单文件组件扩展知识点)

        1.关于组件名:

                一个单词组成的: 

                        (1)全小写如school

                        (2)首字目大写School

               多个单词组成的

                        (1)kebab-case : 'my-school'  需要加引号

                        (2)CamelCase : MySchool(需要脚手架)      

               备注:

                        (1)组件名要回避HTML中已有的元素名称,例如h2(H2也不可)

                        (2)可以使用name配置项指定组件在开发者工具中呈现的名字

使用name属性例子如下

const vc = Vue.extend({
        name:'组件',
        // 模板代码
        template:`
        <div>
        <h1>创建组件的步骤</h1>
        <h3>{{type1}}</h3>
        <h3>{{type2}}</h3>
        <h3>{{type3}}</h3>
        </div>
        `,
        data(){
            return {
                type1:'1.定义组件',
                type2:'2.注册组件',
                type3:'3.使用组件'
            }
        }
    })

            2.关于组件标签

                第一种<school></school>

                第二种<school />(需配合脚手架使用,不然无法多次复用)    

 <div class="box">
        <!-- 第三步: 使用组件 -->
        <!-- 这里的aaa是注册组件时的命名 -->
        <aaa></aaa>
        <!-- 或者下面这样写 -->
        <aaa />
    </div>

            3.一个简写方式:

               定义组件时可以简写   const school = options

const vc = {}   //Vue检测到之后会自动转成Vue.extend()

 组件的嵌套,多个组件可以嵌套在一起使用

<script>  
//   创建组件
const vc= {
    template:`<h3>vc</h3>`
} 
const app={
    template:`
    <div>
        <vc></vc>
       <h2>app</h2>
    </div>`,
//注册组件,把vc组件嵌套在app组件里
    components:{vc}//简写
}
    // 创建实例
    new Vue({
        el: '.box',
        template: '<app></app>',//可以直接在容器中写<app></app>,也可以直接用template模板替换掉整个box容器
        // 注册组件
        components: { app }
    })
</script>

 2.单文件组件 :(实际开发中大部分使用的都是单文件组件)

       1.定义:一个文件只包含有一个组件,实际开发中大部分使用的都是单文件组件。

       2.单文件的使用不再是HTML文件啦,而是创建vue文件(比如School.vue)

         

下面只是创建了一个组件还没有注册,使用。

怎么样使用呢?

我们需要再创建一个App.vue来管理所有的组件,虽然我只写了一个,但是以后会写很多所以得了解这一点

<template>

<!-- 模板代码 -->

<!-- 必须只有一个根节点 -->

  <div class="demo">

    <h3>姓名:{{name}}</h3>

    <h3>年龄:{{age}}</h3>

    <button @click="showName()">点击</button>

  </div>

</template>

<script>

//js交互

// 创建一个组件

const vc = Vue.extend({

    name:'Practice',

    data(){

        // template:``  //这里就没有这个属性了  上面那个就是

        return{ name:'张三', age:18}    

    },

    methods:{

            showName(){console.log(this.name);}

        }

})

// 默认暴露   这里是es6模块化的内容

export default vc

</script>

<style>

/* css样式 */

.demo{

    width: 100px;

    height: 100px;

    background-color: pink;

}

</style>

 然后还需要再建一个main.js 来调用App.vue

 然后就只主页面index.html了,  主页面要调用vue.js框架,还需要调用main.js

至此单文件组件就算是全部完成,

然后运行,成功获取另外的错误,这个错误不是代码错误 

因为浏览器不能执行vue文件,还需要配置脚手架,过两天再补 

Logo

前往低代码交流专区

更多推荐