Vue2 第十二节 Vue组件化编程(一)

1.模块与组件,模块化与组件化概念

2. 非单文件组件

3. 组件编写注意事项

4. 组件的嵌套

一. 模块与组件,模块化与组件化

传统方式编写存在的问题

(1)依赖关系混乱,不好维护

(2)代码的复用率不高 

组件方式编写应用

1.1 模块

① 模块:向外提供特定功能的js程序,一般就是一个js文件

② 为什么要引入模块化:因为按照传统方式进行编程,js文件很多,引入逻辑很复杂

③ 引入模块化的作用:简化js的编写,复用js,提高js的运行效率

1.2 组件

① 定义:用来实现局部(特定)功能效果的代码集合

② 为什么要引入组件:因为一个界面往往功能都比较多,也比较复杂

1.3 模块化和组件化

① 模块化:当应用中的js都以模块来编写,那么这个应用就是一个模块化的应用

② 组件化:当应用中的功能都是多组件的方式来编写的(以功能点来拆分),那这个应用就是一个组件化的应用

二. 非单文件组件

2.1 概念理解

① 非单文件组件:一个文件中包含n个组件   xxx.html

② 单文件组件:一个文件中只有一个组件   xxx.vue (开发中常用)

2.2 编码示例

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

     (1)定义组件(创建组件)

     (2) 注册组件

     (3)使用组件(写组件标签)

② 创建组件示例:使用Vue.extend(options)创建,其中options和new Vue(options)传入的options几乎一样

注意:

  • el不要写,最终所有的组件都要经过一个vm的管理,由vm中的el属性决定服务哪个容器
  • data必须写成函数:避免组件被复用,数据存在引用关系
  • 使用template配置项将结构写进去,注意所有结构需要包在一个div中

③ 注册组件

注册组件有两种方式:全局注册和局部注册

  • 全局注册:靠Vue.components('组件名', 组件)

 

  • 局部注册 :靠new Vue的时候传入components选项(使用的比较多)

④ 使用组件: <school></school>  在模板中使用组件标签

三. 组件编写注意事项

3.1.关于组件名

  • 由一个单词组成

       ① 第一种写法(首字母小写):school

       ② 第二种写法(首字母大写):School

  • 多个单词组成

      ① 第一种写法(kebab-case命名)my-school,但是在使用的时候需要用引号包起来

      ② 第二种写法:(CamelCase命名)MySchool(必须在脚手架环境下才能运行)

注意:

  • 组件名尽可能回避HTML中已有的元素名称,h2或者H2都不行
  • 可以使用name配置项指定组件在开发者工具中呈现的名字

注册的时候用的名字是School

 在模板中使用的时候也得用这个名字

 上面name的配置项修改的是开发者工具中呈现的名字

 3.2 组件标签

(1)第一种写法:<school></school>

(2)第二种写法(自闭合):<school/>  这种写法必须在脚手架环境下才可以,如果不在脚手架环境,会导致后续组件不能渲染

3.3 组件简写形式

  ①  简写形式

 const s = {name:'atguigu',// 组件定义时不要写el配置项// el:'#root',template:`<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址: {{address}}</h2><button @click="showName">点我提示学校名</button></div>`,data() {return {schoolName:'尚硅谷',address:'北京昌平'}},methods: {showName() {alert(this.schoolName)}},}

② 完整形式

        const s = Vue.extend({name: 'atguigu',// 组件定义时不要写el配置项// el:'#root',template: `<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址: {{address}}</h2><button @click="showName">点我提示学校名</button></div>`,data () {return {schoolName: '尚硅谷',address: '北京昌平'}},methods: {showName () {alert(this.schoolName)}},})

四.组件的嵌套

(1)定义app组件,app组件中包含school组件和hello组件

 (2)定义school组件,school组件包含student

 (3)student组件

(4) hello组件

 

 vm管理app, app管理所有组件

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

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

相关文章

炒股杠杆途乐证券;股票买入卖出时间规则?

股票买入卖出时刻规则是指出资者在股票商场上进行生意交易时需求遵循的一系列时刻规定。正确的买入和卖出时刻能够协助出资者最大化出资回报&#xff0c;一起降低风险。但是&#xff0c;在股票商场上&#xff0c;生意时刻的挑选是一个复杂的问题&#xff0c;需求从多个角度剖析…

vSphere ESXI 7.0 网络规划

ESXi 网络 业务网络、Vmotion&#xff08;漂移&#xff09;、管理网络、存储网络 ESXi 管理网络 vCenter Server 管理网络 vCenter Server SSO域名 Single Sign-on域名&#xff1a;在没有指定的情况下&#xff0c;默认填写 vsphere.local VMware vSphere整体解决方案和网络…

汽车行业案例 | 联合汽车电子全新质量问题管理平台上线,燕千云助力汽车电子领军者实现数字化质量管理

据权威调研机构显示&#xff0c;2022年中国智能电动汽车的销量已占新能源汽车的52%以上。到2025年&#xff0c;在新能源汽车50%的汽车出行市场渗透率的基础上&#xff0c;智能电动汽车的销量将超1220万辆&#xff0c;占新能源汽车的80.1%。在技术进步和产业变革快速推进的背景下…

git常用指令

git add命令 作用&#xff1a;移动文件&#xff1a;工作区-->暂存区 git add .&#xff1a;把所有文件都放到暂存区 git commit命令 作用&#xff1a;移动文件&#xff1a;暂存区-->本地仓库 git status命令 作用&#xff1a;查看修改状态 git log命令 作用&#xf…

嵌入式软件开发有没有捷径

嵌入式软件开发有没有什么捷径&#xff1f;不定期会收到类似的问题&#xff0c;我只想说&#xff1a;嵌入式软件开发没有捷径 说实话&#xff0c;有这种想法的人&#xff0c;我其实想劝你放弃。对于绝大多数普通人&#xff0c;一步一个脚印就是捷径。 当然&#xff0c;这个问题…

VLAN介绍

目录 VLAN的特点: VLAN的好处: VLAN的实现原理 VLAN标签 VLAN的划分方式 接口划分VLAN--接口类型 Access接口 Trunk接口 Hybrid接口 实现VLAN之间通信 使用路由器物理接口 使用子接口 使用三层交换机的VLANIF接口 配置 VLANIF的转发流程 三层交换机参与下的三层…

IDEA偶尔编译的时候不识别lombok

偶尔IDEA启动项目的时候会识别不到lombok,识别不到get()跟set()方法 方案 在settings添加下面代码 -Djps.track.ap.dependenciesfalse

dialog => :before-close的属性应用

在element-ui里面关闭弹窗的时候before-close会触发。 也就是点击X的时候回触发before-close这个属性, 代码实例: <el-dialogtitle"新增用户":visible.sync"dialogVisible"width"50%":before-close"handleClose"> handleClose…

linux学习笔记(2)----汇编LED灯实验

MX6ULL 的 IO IO的复用功能 这里的只使用了低五位&#xff0c;用来配置io口&#xff0c;其中bit0~bit3(MUX_MODE)就是设置 GPIO1_IO00 的复用功能的&#xff0c;GPIO1_IO00 一共可以复用为 9种功能 IO&#xff0c;分别对应 ALT0~ALT8。每种对应了不同的功能 io的属性配置 HY…

在线餐饮油烟实时监测系统的设计与实现

安科瑞 华楠 摘 要&#xff1a;为了解决传统油烟检测方法中成本高、效率低、实时性差等问题&#xff0c;设计开发了一种在线油烟实时监测系统&#xff1b;系统由采集、通讯、服务器和用户交互四个模块组成&#xff1b;采集模块采集油烟数据&#xff0c;通过GPRS通讯技术将数据发…

KL15 是什么?ACC,crank,on等

KL含义 KL is the abbreviation for klemme which is the German term for connector / connection.KL是“ klemme”的缩写&#xff0c;这是德语中连接器或连接的术语。 KL30 &#xff0c;通常表示电瓶的正极。positive KL31&#xff0c;通常表示电瓶的负极。negative KL15, 通…

面试题:JS中的String常见方法有哪些?

面试题&#xff1a;说不出五个就尴尬了&#xff01;我目前只写了几个方法&#xff0c;待更新中。。。 1、length2、slice()3、substr()4、substring()5、split()6、indexOf() 1、length 作用&#xff1a;检测字符串的长度。 let str abcde console.log(str.length) // 52、sl…

微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

前言 最近在做微信小程序项目中&#xff0c;有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能&#xff0c;遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题&#xff0c;网上很多说给scroll-view设置一个高度啥的就可以解决&#xff0c;有些人设置了…

hadoop与HDFS交互

一、利用Shell命令与HDFS进行交互 在进行HDFS编程实践前&#xff0c;需要首先启动Hadoop。可以执行如下命令启动Hadoop&#xff1a; cd /usr/local/hadoop ./sbin/start-dfs.sh #启动hadoop Hadoop支持很多Shell命令&#xff0c;其中fs是HDFS最常用的命令&#xff0c;利用fs…

HCIA-datacom数通题库和录播视频资料

HCIA-Datacom&#xff0c;是华为数通认证的初级考试&#xff0c;培训与认证具备数通基础通用知识和技能水平的工程师&#xff0c;只是入门了解数通的一些基础通用知识&#xff0c;适用于小白了解和学习数通知识点起点。 个人建议还是有必要考的&#xff0c;如果在企业考试考试…

Kubernetes (k8s)理论介绍

一&#xff1a;K8s 简介 1、K8s作用 2、K8s 来历 3、为什么要用 K8S? 4、Kubernetes 功能 二&#xff1a;Kubernetes 集群架构与组件 1、Kubernetes 集群架构与组件 2、核心组件 -Master 组件 &#xff08;1&#xff09;Kube-apiserver &#xff08;2&#xff09;Kube…

【数据预测】基于蜣螂优化算法DBO的VMD-KELM光伏发电功率预测 短期功率预测【Matlab代码#53】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第6节&#xff1a;资源获取】1. 蜣螂优化算法DBO2. 变分模态分解VMD3. 核极限学习机KELM4. 部分代码展示5. 仿真结果展示6. 资源获取 【可更换其他算法&#xff0c;获取资源请见文章第6节&#xff1a;资源获取】 1. 蜣螂…

实现Feed流的三种模式:拉模式、推模式和推拉结合模式

在互联网产品中&#xff0c;Feed流是一种常见的功能&#xff0c;它可以帮助我们实时获取我们关注的用户的最新动态。Feed流的实现有多种模式&#xff0c;包括拉模式、推模式和推拉结合模式。在本文中&#xff0c;我们将详细介绍这三种模式&#xff0c;并通过Java代码示例来实现…

关于BQ27427的配置问题

EVM是TI家做的BQ27427的开发板&#xff0c;这款芯片还挺新的。 大概是这样&#xff0c;一块开发板要一千多块钱&#xff0c;使用的时候还出现了一些奇怪的问题。 配置使用的是买的盗版的EV2400&#xff0c;就是黑色的那个东西&#xff0c;使用的通信方式IIC。 TI手册上写的软件…

Spring框架 —— AOP面向切面编程

前言 前面荔枝已经梳理了Spring框架中的IOC部分的知识&#xff0c;接下来荔枝继续梳理Spring框架的另一大重点&#xff1a;AOP面向切面编程。在这篇文章中&#xff0c;荔枝会着重弄清楚AOP的概念并对实现AOP的两种方式进行梳理&#xff0c;同时荔枝也会相应给出代码样例。毕竟荔…