Vue组件的使用

一：什么是Vue组件？干什么用的？二：组件的使用1.非单文件组件（1）定义：一个文件中包含有n个组件（2）非单文件组件的使用步骤（非单文件组件扩展知识点）1.关于组件名:2.关于组件标签3.一个简写方式:2.单文件组件：实际开发中大部分使用的都是单文件组件............

道貌岸然304

4309人浏览 · 2022-07-16 21:27:06

道貌岸然304 · 2022-07-16 21:27:06 发布

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文件,还需要配置脚手架，过两天再补

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^