【Vue组件化编程】

news2024/12/25 23:55:03

Vue组件化编程

  • 1 对组件的理解
  • 2 非单文件组件
    • 2.1 基本使用
    • 2.2 几个注意点
    • 2.3 组件的嵌套
    • 2.4 VueComponent构造函数
    • 2.5 一个重要的内置关系
  • 3 单文件组件

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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1060786.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣 -- 96. 不同的二叉搜索树

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int numTrees(int n) {vector<int> dp(n1);//初始化dp[0]1;//填表for(int i1;i<n;i){for(int j1;j<i;j){//状态转移方程dp[i](dp[j-1]*dp[i-j]);}}//返回值return dp[n];} }; 你学会了吗&…

SpringBoot美食网站系统

采用技术:springbootvue 项目亲测可以完美运行

typscript开发环境搭建

typescript是基于javascript的强类型标记性语言&#xff0c;使用typescript语言可开发出不同规模的、易于扩展的web页面应用&#xff0c;本文主要描述typescript的开发环境搭建。 npm install -g typescript 如上所示&#xff0c;在本地开发环境中&#xff0c;使用nodejs运行…

苹果ios应用ipa文件签名为什么需要签名才能上架?有没有别的方式替代苹果签名?

近年来&#xff0c;苹果设备的普及程度逐渐加深&#xff0c;随之而来的是越来越多的应用程序涌入了苹果的应用商店。为了保障用户设备和数据的安全&#xff0c;以及减少恶意程序和恶意软件的传播&#xff0c;苹果公司实行了一套严格的应用安全机制&#xff0c;其中就包括应用程…

【现代机器人学】学习笔记十四:中文版印刷/翻译勘误

首先声明&#xff0c;这个印刷/勘误并非经过官方的认可&#xff0c;只是我个人的粗浅的理解。如果内容有误&#xff0c;恳请大家谅解指正。 其实有的并不算错&#xff0c;只是我个人认为不太准确&#xff0c;在我学习过程中产生了一些小疑惑和误解。 都是一些小毛病&#xff…

2024级199管理类联考之数学基础(下篇)

平面几何(平均2题) 三角形(性质、特殊三角形、全等与相似) 性质 由不在同一直线的三条线段首尾依次连接所组成的图形三条边、三个内角、三个定点三角形内角和为180度,外角和为360度,多边形的外角和为360度,n多边形的内角和为(n-2)*180度一个外角等于不相邻的两个内角之和任意…

NXP公司K60N512+PWM控制BLDC电机

本篇文章介绍了使用NXP公司提供的塔式快速原型系统来驱动控制带霍尔传感器的无刷直流电机。文章涉及的塔式快速原型系统主要包括以下四个独立板卡&#xff1a;1.塔式系统支撑模块&#xff08;TWR-Elevator&#xff09;&#xff0c;用以连接微控制器以及周边模块&#xff1b;2.低…

雷达编程实战之提高探测速度

有效帧频率作为雷达一个非常核心的指标&#xff0c;它代表了雷达探测识别的速度&#xff0c;速度越快&#xff0c;后级各项智能驾驶功能就能得到更快、更有效的判断。本篇文章首先从硬件的角度&#xff0c;提供了一种合理利用片上资源提高探测识别速度的常用方法&#xff0c;然…

qt 5.15.2 安卓 macos

macos环境安卓配置 我的系统是monterey12.5.1 打开qt的配置界面 这里版本是java1.8&#xff0c;注意修改这个json文件&#xff0c;显示包内容 {"common": {"sdk_tools_url": {"linux": "https://dl.google.com/android/repository/comm…

Boost程序库完全开发指南:1-开发环境和构建工具

Boost官方于2019年12月发布的1.72版编写&#xff0c;共包含160余个库/组件&#xff0c;涵盖字符串与文本处理、容器、迭代器、算法、图像处理、模板元编程、并发编程等多个领域&#xff0c;使用Boost&#xff0c;将大大增强C的功能和表现力。环境&#xff1a;Windows 10&#x…

JAVA学习(4)-全网最详细~

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

vertx的学习总结6

Beyond the event bus 一、章节覆盖&#xff1a; 如何在事件总线之上公开服务 verticles和事件总线服务的异步测试 动态代理&#xff1a; MyService 接口 package porxy.test;import io.vertx.codegen.annotations.ProxyGen;ProxyGen public interface MyService {void he…

Linux学习之悟空派上实现OLED的无线网IP及CPU温度显示【守护进程】

起因 最近各种网购平台似乎都在推送99元的悟空派全志H3的开发板&#xff0c;出于好奇就买了一块来试试水&#xff0c;由于这块板子基本上和orangepi-Zero的硬件结构一模一样&#xff0c;所以设备树、boot这些就用orangepi现成的部件了。 因为本人比较喜欢使用SSH操作&#xff…

全志ARM926 Melis2.0系统的开发指引①

全志ARM926 Melis2.0系统的开发指引① 1. 编写目的2. Melis2.0 系统概述3. Melis2.0 快速开发3.1. Melis2.0 SDK 目录结构3.2. Melis2.0 编译环境3.3. Melis2.0 固件打包3.4. Melis2.0 固件烧录3.5.串口打印信息3.6. Melis2.0 添加和调用一个模块3.6.1. 为什么划分模块&#xf…

Sentinel-微服务保护

一、初识Sentinel 1、雪崩问题及解决方案 雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。 解决雪崩问题的常见方式有四种&#xff1a; 1、超时处理&#xff1a;设定超时时间&#xff0c;请求超过一定时间…

【C语言】内存函数的详细教学和模拟实现

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是gugugu。希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f194;本文由 gugugu 原创 CSDN首发&#x1f412; 如需转载还请通知⚠…

全志ARM926 Melis2.0系统的开发指引②

全志ARM926 Melis2.0系统的开发指引② 编写目的4. 编译工具链使用4.1.工具链通用配置4.2.模块的工具链配置4.3.简单的 makefile 5. 固件烧录工具的安装5.1.PhoenixSuit 的安装步骤5.2.检验 USB 驱动安装5.3.使用烧录软件 PhoenixSuit -全志相关工具和资源-.1 全志固件镜像修改工…

Python:操作SQLite数据库简单示例

本文用最简单的示例演示python标准库提供的SQLite数据库进行新增、查询数据的过程。 代码文件app.py # -*- coding: UTF-8 -*- from flask import Flask import sqlite3app Flask(__name__)app.route(/) def hello_world():return Hello World!#创建数据库 app.route(/creat…

Go基础之变量和常量

Go基础之变量和常量 文章目录 Go基础之变量和常量一. 标识符、关键字、内置类型和函数1.1 标识符1.2 关键字1.3 保留字1.4 内置类型1.4.1 值类型&#xff1a;1.4.2 引用类型&#xff1a;(指针类型)1.5 内置函数1.6 内置接口error 二.Go变量命名规范2.1 采用驼峰体命名2.2 简单、…