Vue组件化编程【Vue】

news/2024/4/28 21:20:54/文章来源:https://blog.csdn.net/weixin_53943447/article/details/129916872

2.Vue 组件化编程

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

2.1.1 模块

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

2.1.2 组件

  1. 理解：用来实现局部（特定）功能效果的代码集合
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码，简化项目编码，提高运行效率

2.1.3 模块化

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

2.1.4 组件化

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

2.2 非单文件组件

定义：一个文件中包含有 n 个组件。

2.2.1 基本使用

Vue中使用组件的三大步骤：

  • 定义组件（创建组件）
  • 注册组件
  • 使用组件（写组件标签）
  1. 如何定义一个组件？

使用 Vue.extend(options) 创建，其中options和 new Vue(options)时传入的那个 options 几乎一样，但也有点区别：
区别如下：
（1）el不要写，为什么？
因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
（2）data必须写成函数，为什么？
避免组件被复用时，数据村子啊引用关系。

备注：使用 template 可以配置组件结构。

  1. 如何注册组件？
    （1）局部注册：靠 new Vue 的时候传入 components 选项
    （2）全局注册：靠 Vue.component('组件名'，组件)

  2. 编写组件标签：< 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>Document</title><script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><hello></hello><hr><h1>{{msg}}</h1><hr><!-- 第三步：编写组件标签 --><school></school><hr><!-- 第三步：编写组件标签 --><student></student></div><div id="root2"><hello></hello></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>`,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)new Vue({el: '#root',data: {msg: '你好啊',},//第二步：注册组件（局部组件）components: {school: school,student: student,}})new Vue({el: '#root2',})
</script>
</html>

2.2.2 几个注意点

  1. 关于组件名：

一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case）：my-school
第二种写法（CamelCase）：MySchool（需要Vue脚手架支持）

备注：
（1）组件名尽可能回避HTML中已有的元素名称。例如：h2、H2都不行。
（2）可以使用name配置项指定组件在开发者工具中呈现的名字。

  1. 关于组件标签：
    第一种写法：< school >< /school >
    第二种写法：< school/ >

备注：不使用脚手架时，< school/ >会导致后续组件不能渲染

  1. 一个简写的方式：const school = Vue.extend(options) 可简写为：const school = options

2.2.3 组件的嵌套

<!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>Document</title><script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"></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: 18,}}})//定义school组件const school = Vue.extend({name: 'school',template: `<div><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><student></student></div>`,data(){return {name: '张三',address: '西安',}},//注册组件（局部）components: {student}})//定义hello组件const hello = Vue.extend({template: `<h1>{{msg}}</h1>`,data(){return {msg: '欢迎来到西安文理学习！'}}})//定义app组件const app = Vue.extend({template: `<div><school></school><hello></hello></div>`,components: {school,hello,}})//创建 vmnew Vue({template: `<app></app>`,el: '#root',//注册组件（局部）components: {app}})
</script>
</html>

关于Vuecomponent：

  1. school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  2. 我们只需要写 < school/ >或< school >< /school >,Vue解析时会帮我们创建school组件的实例对象。
  3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
  4. 关于this指向：
    （1）组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    （2）new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    Vue的实例对象，以后简称vm。

2.2.4 一个重要的内置关系

  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这关系：让组件实例对象（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>Document</title><script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body><!-- 准备好一个容器 --><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>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showX">点我输出x</button></div>`,data(){return {name: '张三',address: '西安',}},methods: {showX(){console.log(this.x);}}})//创建一个vmnew Vue({el: '#root',data: {msg: '你好'},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__);//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99Demo.prototype.x = 99console.log('@', d);*/
</script>
</html>

2.3 单文件组件

定义：一个文件中只包含一个组件。
1.一个.vue 文件的组成(3 个部分):
（1） 模板页面

<template>
页面模板
</template>

（2）JS 模块对象

<script>
export default {
data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>

（3） 样式

<style>
样式定义
</style>
  1. 基本使用：
    （1）引入组件
    （2）映射成标签
    （3）使用组件标签

School.vue组件

<template><div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button></div>
</template><script>/* 组件的交互相关的代码（数据、方法等等)*/export default {name: 'School',data(){return {schoolName: '西安文理',address:'西安雁塔'}},methods: {showName(){alert(this.schoolName)}}}</script><style>/*组件的样式*/.demo{background-color: orange;}
</style>

App.vue（汇总所有的组件）

<template><div><School></School></div>
</template><script>//引入组件import School from './School'export default {name: 'App',components: {School,}}
</script><style></style>

main.js（创建Vue实例并且指明为哪个容器服务）

import App from './App.vue'new Vue({el: '#root',comments: {App}
})

index.js

<!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><script type="text/javascript" src="../js/vue.js"></script>//先让模板出来，再引入 main.js<script type="text/javascript" src="./main.js"></script>
</body>
</html>

这里运行会报错，因为.vue文件浏览器不能直接运行，import语句浏览器不认识。
需要把以上代码放入到脚手架上才能运行。

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

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

接口自动化【一】（抓取后台登录接口+postman请求通过+requests请求通过+json字典区别）

接口自动化【一】（抓取后台登录接口+postman请求通过+requests请求通过+json字典区别）

文章目录 前言一、requests库的使用二、json和字典的区别三、后端登录接口-请求数据生成四、接口自动化-对应电商项目中的功能五、来自postman的代码-后端登录总结前言 记录&#xff1a;json和字典的区别&#xff0c;json和字段的相互转化&#xff1b;postman发送请求与Python…
阅读更多...
source insight4.0使用技巧总结

source insight4.0使用技巧总结

一、技巧1&#xff1a;查看函数调用关系 步骤 1&#xff1a;在主菜单中点击下图中的按钮 图 1 打开relation界面 步骤 2&#xff1a;在弹出的relation界面点击“设置”按钮&#xff0c; 图2 点击“设置”按钮 步骤3&#xff1a; 在“设置”界面中&#xff0c;“Levels”选择…
阅读更多...
AC7811-FOC无感控制代码详解

AC7811-FOC无感控制代码详解

目录 矢量控制原理 矢量控制框图 电流采样方式 电流在整个控制过程中的传递 采样关键点 三电阻 双电阻 单电阻 三者对比 坐标变换 dq轴电流的PI控制 启动方式 启动波形 脉冲注入 高频注入 Startup 预定位到指定角度 PulseInject_api hfi_api Speed loop s…
阅读更多...
前端学习：HTML块、类、Id

前端学习：HTML块、类、Id

目录 快 一、块元素、内联元素 二、HTML 元素 三、HTML元素 类 一、分类块级元素 二、分类行内元素 Id 一、使用 id 属性 二、 class与ID的差异 三、总结 快 一、块元素、内联元素 大多数HTML元素被定义为块级元素或内联元素。 块级元素在浏览器显示时&#xff0c;通常会…
阅读更多...
FTP-----局域网内部传输文件（1）

FTP-----局域网内部传输文件（1）

在日常工作中&#xff0c;如果需要跨设备的传输文件&#xff0c;您需要借助USB数据线或者借助应用实现无线互联&#xff0c;将所需文件传输到对应设备&#xff0c;这一来一去&#xff0c;花费的时间与精力变多了&#xff0c;那么&#xff0c;怎么实现不使用第三方软件来实现跨设…
阅读更多...
3-5年以上的功能测试如何进阶自动化？【附学习路线】

3-5年以上的功能测试如何进阶自动化？【附学习路线】

做为功能测试人员来讲&#xff0c;从发展方向上可分两个方面&#xff1a; 1、业务流程方向 2、专业技能方向。 当确定好方向后&#xff0c;接下来就是如何达到了。(文末自动化测试学习资料分享) 一、业务流程方向 1、熟悉底层的业务 作为功能测试工程师来讲&#xff0c;了解…
阅读更多...
【C++高级】手写线程池项目-经典死锁问题分析-简历项目输出指导

【C++高级】手写线程池项目-经典死锁问题分析-简历项目输出指导

作为五大池之一&#xff0c; 线程池的应用非常广 泛&#xff0c;不管是客户端程序&#xff0c;还是后台服务程序&#xff0c;掌握线程池&#xff0c;是提高业务处理能力的必备模块 本课程将带你从零开始&#xff0c;设计一个支持fixed和cached模式的线程池&#xff0c;玩转C11、…
阅读更多...
IGA_PLSM3D的理解1

IGA_PLSM3D的理解1

文章目录前言一、IgaTop3D_FAST.m给的参数二、Material properties 材料特性对Geom_Mod3D的理解对Pre_IGA3D的理解 输出1-----CtrPts&#xff1a; 输出2-----Ele&#xff1a; 输出3-----GauPts&#xff1a;前言 只是为方便学习&#xff0c;不做其他用途 一、IgaTop3D_FAST.m给的…
阅读更多...
Python爬虫-某跨境电商(AM)搜索热词

Python爬虫-某跨境电商(AM)搜索热词

前言 本文是该专栏的第42篇，后面会持续分享python爬虫干货知识，记得关注。 关于某跨境电商(AM)，本专栏前面有单独详细介绍过，获取配送地的cookie信息以及商品库存数据，感兴趣的同学可往前翻阅。 1. python爬虫|爬取某跨境电商AM的商品库存数据(Selenium实战) 2. Seleni…
阅读更多...
5.39 综合案例2.0 - STM32蓝牙遥控小车1(手机APP遥控)

5.39 综合案例2.0 - STM32蓝牙遥控小车1(手机APP遥控)

综合案例2.0 - 蓝牙遥控小车1- 手机APP遥控成品展示案例说明器件说明连线小车源码手机遥控APPAPP使用说明成品展示 案例说明 用STM32单片机做了一辆蓝牙控制的麦轮小车&#xff0c;分享一下小车的原理和制作过程。 控制部分分为手机APP&#xff0c;语音模块控制&#xff0c;Ha…
阅读更多...
15-721 chapter2 内存数据库

15-721 chapter2 内存数据库

Background 随着时代的发展&#xff0c;DRAM可以容纳足够的便宜&#xff0c;容量也变大了。对于数据库来说&#xff0c;数据完全可以fit in memory&#xff0c;但同时面向disk的数据库架构不能很好的发挥这个特性 这张图是disk database的cpu instruction cost 想buffer pool…
阅读更多...
第5章 继承-Java核心技术·卷1

第5章 继承-Java核心技术·卷1

文章目录Java与C不同基本概念继承&#xff1a;基于已有的类创建新的类。构造器多态定义超类变量可以引用所有的子类对象&#xff0c;但子类变量不能引用超类对象。子类引用的数组可以转换成超类引用的数组覆写返回子类型强制类型转换阻止继承&#xff1a;final类和方法多态 vs …
阅读更多...
ROS学习-ROS简介

ROS学习-ROS简介

文章目录1.ROS1.1 ROS概念1.2 ROS特征1.3 ROS特点1.4 ROS版本1.5 ROS程序其他名词介绍1. 元操作系统2. IDL 接口定义语言一些网站1.ROS 1.1 ROS概念 ROS(Robot Operating System&#xff0c;机器人操作系统) ROS 是一个适用于机器人的开源的元操作系统&#xff0c;提供一系列…
阅读更多...
linux驱动开发 - 04_Linux 设备树学习 - DTS语法

linux驱动开发 - 04_Linux 设备树学习 - DTS语法

文章目录Linux 设备树学习 - DTS语法1 什么是设备树&#xff1f;2 DTS、DTB和DTC3 DTS 语法3.1 dtsi 头文件3.2 设备节点3.3 标准属性1、compatible 属性2、model 属性3、status 属性4、#address-cells 和#size-cells 属性5、reg 属性6、ranges 属性7、name 属性8、device_type…
阅读更多...
人工智能专题-知识表示

人工智能专题-知识表示

文章目录人工智能专题-知识表示大纲2.1 知识表示的概念2.1.1 知识表示观点2.1.2 知识表示的要求2.2 一阶谓词逻辑表示法2.2.1 一阶谓词概念2.2.2 谓词逻辑表示方法2.3 产生式表示法2.4 语义网络表示法2.5 框架表示法人工智能专题-知识表示 大纲 大纲&#xff1a;掌握知识表示方…
阅读更多...
思科路由器发现重大漏洞，解决方法是……

思科路由器发现重大漏洞，解决方法是……

晚上好&#xff0c;我是老杨。 思科知名度高&#xff0c;待遇也好&#xff0c;很多网工心生向往&#xff0c;也有很多人考过思科认证的相关证书&#xff0c;对思科的印象还是不错吧&#xff1f; 而且&#xff0c;作为美国著名的网络设备厂商&#xff0c;思科是全球路由器巨头…
阅读更多...
【面试】如何设计SaaS产品的数据权限？

【面试】如何设计SaaS产品的数据权限？

文章目录前言数据权限是什么&#xff1f;设计原则整体方案RBAC模型怎么控制数据权限&#xff1f;1. 数据范围权限控制2. 业务对象操作权限控制3. 业务对象字段权限控制总结前言 一套系统的权限可以分为两类&#xff0c;数据权限和功能权限&#xff0c;今天我们从以下几个点&am…
阅读更多...
【RabbitMQ】初识消息中间件MQ

【RabbitMQ】初识消息中间件MQ

目录 一、什么是MQ 二、MQ的优缺点 1、MQ的优点 1.应用解耦 2.削峰填谷 3.异步提速 2、MQ的缺点 1.可用性低 2.系统复杂度高 3.数据一致性问题 三、MQ使用场景 四、常见的MQ 一、什么是MQ MQ&#xff08;Message Queue&#xff09;&#xff1a;消息队列&#xff0c…
阅读更多...
代码随想录_二叉树_leetcode654 617

代码随想录_二叉树_leetcode654 617

leetcode654 最大二叉树 654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 …
阅读更多...
【FPGA实验4】举重比赛机制

【FPGA实验4】举重比赛机制

举重比赛有三名裁判&#xff0c;当运动员将杠铃举起后&#xff0c;须有两名或两名以上裁判认可&#xff0c;方可判定试举成功&#xff0c;若用A、B、C分别代表三名裁判的意见输入&#xff0c;同意为1&#xff0c;否定为0;F为裁判结果输出&#xff0c;试举成功时F1&#xff0c;试…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业