【Vue组件化编程】

最新推荐文章于 2024-07-25 09:51:39 发布
最新推荐文章于 2024-07-25 09:51:39 发布
阅读量404 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64875217/article/details/133555503
版权

Vue组件化编程

1 对组件的理解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 组件：实现应用中局部功能代码和资源的集合。
  • 优点：文件好维护；依赖关系不混乱；复用率高。
  • 模块与组件：
    (1.1)模块理解：向外提供特定功能的 js 程序, 一般就是一个 js 文件
    (1.2)使用模块原因：js 文件很多很复杂
    (1.3)模块作用：复用 js, 简化 js 的编写, 提高 js 运行效率
    (2.1)组件理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
    (2.2)使用组件原因：一个界面的功能很复杂
    (2.3)组件作用：复用编码, 简化项目编码, 提高运行效率
  • 模块化与组件化：
    (1)当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
    (2)当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

2 非单文件组件

  • 定义：一个文件中包含有n个组件
    在这里插入图片描述

2.1 基本使用

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

    <!-- 仅仅为了全局注册组件而写 可忽略 -->
    <div id="root2">
        <hello></hello>
    </div>

</body>
<script>
    Vue.config.productionTip = false

    // 第一步：创建组件
    // 创建school组件
    const school = Vue.extend({
        // el:'#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){ // 创建组件时，data必须使用函数式，否则会报错
            return {
                schoolName:'霍格沃茨魔法学院',
                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
            }
        }
    })
    // 创建hello组件 仅仅为了全局注册组件而写 可忽略
    const hello = Vue.extend({
        template:`
            <div>
                <h2>你好啊！{{name}}</h2>
            </div>
        `,
        data(){
            return {
                name:'Tom'
            }
        }
    })

    // 注册组件(全局注册)
    Vue.component('hello',hello)

    // 创建vm
    new Vue({
        el: '#root',
        // 第二步：注册组件(局部注册)
        components:{
            // xuexiao:school,
            // school:school,
            // 可简写为：
            school,

            // xuesheng:student
            student
        }
    })

    // 仅仅为了全局注册组件而写 可忽略
    new Vue({
        el: '#root2',
    })
</script>
</html>

在这里插入图片描述

2.2 几个注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几个注意点</title>
    <script 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">
        <h1>{{msg}}</h1>
        <!-- 使用组件 -->
        <school></school>
        <!-- <school/>  此写法得确保在脚手架情况下使用 -->
    </div>
</body>
<script>
    Vue.config.productionTip = false

    // 定义组件
    const school = Vue.extend({
        name:'xuexiao', // 可以使用name配置项指定组件在开发者工具中呈现的名字
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>    
            </div>
        `,
        data() {
            return {
                schoolName:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        }
    })
    // 可简写为：
    /* const school = {
        name:'xuexiao', // 可以使用name配置项指定组件在开发者工具中呈现的名字
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>    
            </div>
        `,
        data() {
            return {
                schoolName:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        }
    } */

    new Vue({
        el:'#root',
        data:{
            msg:'欢迎学习Vue!'
        },

        // 局部注册组件
        components: {
            // 若组件名是多个单词写法一：
            // 'my-school':school // 加引号、单词之间用短横杠
            // 若组件名是多个单词写法二：
            // MySchool:school // 每个单词首字母大写 但前提是在脚手架环境中写

            // school:school
            school
        }
    })
</script>
</html>

在这里插入图片描述

2.3 组件的嵌套

  • app为一人(vm)之下，万人(所有其他组件)之上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 使用组件一 -->
        <!-- <app></app> -->
    </div>
</body>
<script>
    Vue.config.productionTip = false

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

    // 定义school组件(父)
    const school = Vue.extend ({
        template:`
            <div>
                <h2>学校名字：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>    
            </div>
        `,
        data() {
            return {
                name:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        },

        // 要实现嵌套
        // 注册组件(局部)
        components: {
            student
        }
    })

    // 定义hello组件(与school组件平级)
    const hello = Vue.extend({
        template:`
            <h1>{{msg}}</h1>
        `,
        data() {
            return {
                msg:'欢迎来到小王的博客!'
            }
        }
    })

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

    // 创建vm
    new Vue({
        // 使用组件二
        template:`
            <app></app>
        `,
        el:'#root',
        // 注册组件(局部)
        components:{
            app
        }
    })
</script>
</html>

在这里插入图片描述

2.4 VueComponent构造函数

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

    // 定义school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名字：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>    
            </div>
        `,
        data() {
            return {
                name:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        },
        methods: {
			showName(){
				console.log('showName',this) // 此时的this是VueComponent实例对象(vc)
			}
		}
    })

    // 定义test组件
    const test = Vue.extend({
		template:`<span>atguigu</span>`
    })

    //定义hello组件
	const hello = Vue.extend({
		template:`
			<div>
				<h2>{{msg}}</h2>
				<test></test>	
			</div>
		`,
		data(){
			return {
				msg:'你好啊！'
			}
		},
		components:{test}
	})

    // console.log('@',school)
	// console.log('#',hello)

    // 创建vm
    const vm = new Vue({
        el:'#root',
        // 注册组件
        components: {
            school,
            hello
        }
    })
</script>
</html>

在这里插入图片描述

2.5 一个重要的内置关系

  • 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  • 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个重要的内置关系</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
    </div>
</body>
<script>
    Vue.config.productionTip = false

    Vue.prototype.x = 99 // 此时vm.x = 99

    // 定义school组件
    const school = Vue.extend ({
        template:`
            <div>
                <h2>学校名字：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showX">点我输出x</button>    
            </div>
        `,
        data() {
            return {
                name:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        },
        methods:{
            showX(){
                console.log(this.x); // this指向vc 输出值为99 也就是vc.x = 99
            }
        }
    })

    // 创建vm
    const vm = new Vue({
        el: '#root',
        data: {
            msg:'你好'
        },
        components: {
            school
        }
    })

    // 验证VueComponent.prototype.__proto__ === Vue.prototype
    // console.log(school.prototype.__proto__ === Vue.prototype); // true

    // 定义一个构造函数
    /* 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

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

    console.log('@',d.x); // 99 */
</script>
</html>

3 单文件组件

  • 定义：一个文件中只包含有一个组件。
    在这里插入图片描述
  • 快捷键：输入< + v再按Enter
  • School.vue:
<template>
    <!-- 组件的结构 -->
    <!-- template标签里面必须有一个div标签 否则会标红 -->
    <div class="demo">
        <h2>学校名字：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div> 
</template>

<script>
    // 组件交互相关的代码(数据、方法等)
    // export const school = Vue.extend({ // es6分别暴露(多行暴露)，在引用时需要用对象来引用
    // 此时使用默认暴露
    // export default Vue.extend({ // 再对此写法进行简化
    export default {
        name:'School',
        data() {
            return {
                name:'霍格沃兹魔法学院',
                address:'苏格兰高地'
            }
        },
        methods: {
			showName(){
				alert(this.name)
			}
		}
    }
    // export {school} // es6统一暴露
    // export default school //es6默认暴露，一个js文件只能有一个默认暴露，默认暴露的可以是一个常量、函数、对象
</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>

在这里插入图片描述

  • App.vue:
<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    // 引入School和Student组件
    import School from './School.vue' // es6默认暴露对应的引用方法
    import Student from './Student.vue'
    
    export default {
        name:'App',
        components: {
            School,
            Student
        }
    }
</script>

在这里插入图片描述

  • main.js:
import App from './App.vue' // 引入App.vue

// 创建vm
new Vue ({
    el:'#root',
    template:`<App></App>`, // 此处写了 index.html容器中就不需要再写
    components:{
        App
    }
})

在这里插入图片描述

  • index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>

</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- <App></App> -->
    </div>
    <!-- 在main.js之前引入vue -->
    <script src="../JS/vue.js"></script>
    <!-- 在body标签最下面引入main.js文件 -->
    <script src="./main.js"></script>
</body>
</html>

在这里插入图片描述

小王小王几点了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
Vue组件化编程
这个世界上有各种各样的人.
02-12 508
组件 实现应用中局部功能代码和资源的集合 模块化 当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。 组件化 当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。
（三）Vue组件化编程
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
04-15 328
Vue,组件
Vue学习（二）—— vue组件化编程
weixin_44916936的博客
03-31 306
文章目录第二部分 vue组件化编程一、模块与组件、模块化与组件化1.模块2.组件3.模块化4.组件化二、非单文件组件三、单文件组件1.vue文件三个组成部分1.1 模板页面1.2 js模块对象1.3 **样式**2.组件示例2.1 School.vue2.2 App.vue2.3 main.js2.4 index.html四、使用组件的三大步骤1.定义组件(创建组件)2.注册组件2.1 局部注册2.2 全局注册3.使用组件(写组件标签)4.示例代码五、注意点1.关于组件名1.1 一个单词组成1.2 多个单词
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
前端入门（三）Vue组件化编程、脚手架、插槽插件、存储、vuex、组件事件、动画、代理
芸兮的博客
11-24 1317
以子组件向父组件传递数据为例：如果不用自定义事件，可以通过父组件给子组件传递函数类型的props实现step1：给子组件School绑定getSchoolName函数，相当于子组件的School的组件实例会有getSchoolName(）这个函数。step2：用props承接父组件注册的getSchoolName。按钮注册点击事件，调用该函数，并将组件的name参数传递。如果使用自定义事件来实现：step1：通过v-on: 给子组件Student绑定自定义事件atguigu。
Vue组件化编程开发
m0_64226820的博客
11-26 699
vue组件化开发的基本用法总结
前端学习笔记 | Vue组件化编程
m0_53522458的博客
04-02 923
尚硅谷vue2/vue3的vue2笔记：组件、非单文件组件、组件原理、单文件组件、vue脚手架、ref配置、props配置、mixin混入、组件化编码流程、组件自定义事件、全局事件总线、消息订阅与发布、$nextTick、配置代理、vue-resource、插槽、vuex、路由、UI组件库
浅谈Vue组件化编程思想及组件化的构建
maohe的博客
02-06 893
Vue组件化编程，对非单文件组件和单文件组件的创建方式，组件的嵌套，VC原型链的更改，vue脚手架的简易使用进行了演示和说明。
vue的组件化编程
libingjiedd的博客
05-06 591
注意：此处的data使用的是函数式返回（不是对象式）：因为多次一使用同一个组件，当后使用组件部分改变data中数据，前面组件使用组件的数据也会改变。components：{'组件名','...'} :注册组件（在Vue实例中使用此配置项）：局部注册。只需要使用组件标签就会创建组件实例=vc实例（使用两次组件标签就会实例化两次vc）// 2. 全局注册组件(组件名字，组件在哪)：可以使用在任何vue绑定的模板中。组件标签：使用组件（将组件标签写在容器中，可以写多个组件标签=复用）
Vue2基础-Vue组件化编程
ning_xiao_xuan的博客
01-25 1086
Vue2基础-Vue组件化编程
vue - Vue组件化编程.doc
07-08
总结，Vue组件化编程让开发者能够以模块化的方式组织和管理代码，提高开发效率和代码质量。通过单文件组件，我们可以清晰地看到组件的全貌，同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
Vue实现图形化积木式编程Vue前端源码
08-31
9. **src**：这是项目源代码的主目录，包含了Vue组件、路由、样式、业务逻辑等代码。 10. **public**：此目录通常存放静态资源，如HTML入口文件、图标、CSS样式文件等，这些资源会被Vue CLI直接复制到构建输出目录...
Vue.js中自定义Markdown插件实现References解析
最新发布
浮游的博客
07-25 158
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 194
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1356
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
VUE中的重点*
qq_61132537的博客
07-22 913
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue的组件化编程的实例
04-25
好的，下面是一个Vue组件化编程的实例： ``` <h1>{{ title }} <p>{{ message }} export default { name: "example-component", props: { title: String, message: String, }, }; ``` 在这个例子中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小王小王几点了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值