【Vue2】2-组件化编程

Onlooker129

已于 2024-07-28 11:35:55 修改

阅读量382

点赞数 7

分类专栏： Vue 文章标签：前端 javascript html

于 2024-07-27 19:39:46 首次发布

本文链接：https://blog.csdn.net/m0_73902080/article/details/140739909

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

模块与组件、模块化与组件化

模块

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

组件

理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image...)
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码,提高运行效率

模块化

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

组件化

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

实现应用中局部功能代码和资源的集合

非单文件组件

模板编写没有提示
没有构建过程，无法将ES6转换成ES5
不支持组件的CSS
真正开发中几乎不用

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    Vue使用组件的三大步骤：
      1.定义组件（创建组件）
      2.注册组件
      3.使用组件（写组件标签）
     
      1.如何定义一个组件？
        使用Vue.extend(options)创建，其中options和new Vue时传入的那个options几乎一样，但也有点区别：
        区别如下：
          (1)el不要写 原因：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
          (2)data必须写成函数 原因：避免组件被复用时，数据存在引用关系
        备注：使用template可以配置组件结构
      2.如何注册组件？
        (1)局部注册：靠new Vue时传入components选项
        (2)全局注册：靠Vue.component('组件名',组件)
      3.编写组件标签：
        <school></school>
    -->
    <div id="root">
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    //第一步：创建school组件
    const school = Vue.extend({
        template:`
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
          </div>
        `,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){
            return{
                schoolName:'尚硅谷1',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template:`
          <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
          </div>
        `,
        data(){
            return{
                studentName:'张三',
                age:18
            }
        }
    })

    //第二步：注册组件（全局注册）
    Vue.component('student',student)


    //创建vm
    const vm = new Vue({
        el:'#root',
        //第二步：注册组件（局部注册）
        components:{
            school,
            student
        }
        
    })

  </script>
</html>

几个注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    几个注意点：
      1.关于组件名：
        一个单词组成：
          第一种写法（首字母小写）：school
          第二种写法（首字母大写）：School
        多个单词组成：
          第一种写法（kebab-case命名）：my-school
          第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
        备注：
          (1)组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
          (2)可以使用name配置项指定组件在开发者工具中呈现的名字
      2.关于组件标签：
        第一种写法：<school></school>
        第二种写法：<school/>
        备注：不能使用脚手架时，<school/>会导致后续组件不能渲染
      3.一个简写方式：
        const school = Vue.extend(options)可简写为：const school = options
    -->
    <div id="root">
        <school></school>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const school = Vue.extend({
        name:'atguigu',
        template:`
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
          </div>
        `,
        data(){
            return{
                schoolName:'尚硅谷1',
                address:'北京'
            }
        }
    })

    //创建vm
    const vm = new Vue({
        el:'#root',
        //第二步：注册组件（局部注册）
        components:{
            school
        }
        
    })

  </script>
</html>

组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <app></app>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    //定义student组件
    const student = Vue.extend({
        name:'student',
        template:`
          <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生年龄：{{age}}</h2>
          </div>
        `,
        data(){
            return{
                name:'张三',
                age:10
            }
        }
    })

    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <student></student>
          </div>
        `,
        data(){
            return{
                schoolName:'尚硅谷1',
                address:'北京'
            }
        },
        //注册组件（局部注册）
        components:{
            student
        }
    })


    //定义app组件
    const app = Vue.extend({
        template:`
        <div>
            <school></school>
        </div>
        `,
        components:{
            school
        }
    })



    //创建vm
    const vm = new Vue({
        el:'#root',
        //第二步：注册组件（局部注册）
        components:{
            app
        }
        
    })

  </script>
</html>

VueComponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueComponent</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    关于VueComponent：
      1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
      2.我们只需要写<school></school>或<school/>，Vue解析时会帮我们创建school组件的实例对象
        即Vue帮我们执行的：new VueComponent(options)
      3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
      4.关于this指向：
        (1)组件配置中：
          data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
        (2)new Vue()配置中：
          data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
      5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
        Vue的实例对象，以后简称vm
    -->
    <div id="root">
        <school></school>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    
     //定义school组件
     const school = Vue.extend({
        name:'school',
        template:`
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
          </div>
        `,
        data(){
            return{
                schoolName:'尚硅谷1',
                address:'北京'
            }
        }
    })

    const vm = new Vue({
        el:'#root',
        components:{
            school
        }
        
    })

  </script>
</html>

一个重要的内置关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    1.一个重要的内置关系：VueComponent.prototype__proto__ === Vue.prototype（VueComponent的原型对象的原型对象是Vue的原型对象）
    2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法 
     -->
    <div id="root">
        <school></school>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    Vue.prototype.x = 99

    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showX">点我输出x</button>
          </div>
        `,
        data(){
            return{
                schoolName:'尚硅谷1',
                address:'北京'
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        }
    })

    //创建一个vm
    const vm = new Vue({
        el:'#root',
        components:{
            school
        }
    })

    
     //定义一个构造函数
     /* function Demo(){
        this.a = 1
        this.b = 2
     }

    //创建一个Demo的实例对象
    const d = new Demo()

    console.log(Demo.prototype) //显式原型属性

    console.log(d.__proto__) //隐式原型属性

    console.log(Demo.prototype === d.__proto__) //true

    //程序员通过显式原型属性操作原型对象，追加一个属性，值为99
    Demo.prototype.x = 99

    console.log(d.__proto__.x) */
  </script>
</html>

单文件组件

App.vue：

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    //引入组件
    import School from './School.vue';
    import Student from './Student.vue';

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

<style>
    
</style>

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>
</head>
<body>
    <div id="root">
        
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

main.js：

import App from './App.vue'

new Vue({
    el:'#root',
    template:`<App></App>`,
    comments:{
        App
    }
})

School.vue：

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    //组件交互相关的代码（数据、方法等等）
    export default{
        name:'School',
        data(){
            return{
                name:'尚硅谷1',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        }
    }

</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

Student.vue：

<template>
    <!-- 组件的结构 -->
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学校年龄：{{age}}</h2>
    </div>
</template>

<script>
    //组件交互相关的代码（数据、方法等等）
    export default{
        name:'Student',
        data(){
            return{
                name:'张三',
                age:18
            }
        }
    }

</script>

一个.vue文件的组成（3部分）：

1.模板页面：

2.JS模块对象

3.样式

基本使用：

引入组件
映射成标签
使用组件标签

Onlooker129

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【Vue2】2-组件化编程

理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image...)当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用。理解:向外提供特定功能的js程序，一般就是一个js文件。作用:复用js，简化js的编写，提高js运行效率。作用：复用编码，简化项目编码,提高运行效率。实现应用中局部功能代码和资源的集合。为什么：一个界面的功能很复杂。为什么：js文件很多很复杂。
复制链接

扫一扫

专栏目录