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,一经查实,立即删除!

相关文章

ROI draw_rake

dev_get_window (WindowHandle) dev_set_color (green) * 1. 创建ROI draw_rake函数 Elements:20 DetectHeight:120 DetectWidth:35 draw_rake (Regions, WindowHandle, Elements, DetectHeight, DetectWidth, Row1, Column1, Row2, Column2) 绘制过程中&#xff0c;需要沿着…

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

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

Vue上线打包优化

Vue上线打包优化 在开发Vue项目时&#xff0c;我们通常需要对项目进行打包和优化&#xff0c;以便在生产环境中提供更高性能的应用程序。本篇博客将介绍一些Vue上线打包优化的技巧&#xff0c;帮助您优化应用程序的加载速度和性能。 一、禁止生成sourceMap文件 Vue项目在打包…

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…

设计模式七:适配器模式(Adapter Pattern)

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;用于将一个类的接口转换成客户端所期望的另一个接口。它允许不兼容的接口能够协同工作。 适配器模式涉及角色&#xff1a; 目标接口&#xff08;Target Interface&#xff09;&#xff1a…

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

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

4-7月预测价差方向准确率统计

月度 预测价差方向准确率 4月 33.6% 5月 28.4% 6月 25.7% 7月 34.2% 4-7月合计 30.6%

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…

Git rebase、merge、cherry-pick用法

项目开发过程中&#xff0c;一般会有一个主分支&#xff0c;用来进行版本发布&#xff0c;研发会新建一个属于自己的开发分支&#xff0c;一个功能开发完成后会合入主分支 新建分支 D:\workspace\android>git checkout -b develop_test origin/develop_main Switched to a…

在外地ssh远程连接家里ubuntu服务器(Coplar内网穿透)

官网&#xff1a;https://www.cpolar.com/ 步骤&#xff1a; 按照官网文档&#xff08;https://www.cpolar.com/docs&#xff09;在家里ubuntu上安装&#xff0c;并且开通隧道即可&#xff0c;不需要在自己笔记本安装 需要注意的是&#xff1a; 可以先安装ssh许可&#xff0c…

微信小程序 - 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…