位置: IT常识 - 正文

【学Vue就跟玩一样】组件-非单文件组件的使用(vue学不懂怎么办)

编辑:rootadmin
【学Vue就跟玩一样】组件-非单文件组件的使用 一,什么是组件

推荐整理分享【学Vue就跟玩一样】组件-非单文件组件的使用(vue学不懂怎么办),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:学vue用什么软件,vue入门视频教程,vue自学,vue学起来困难吗,vue自学,vue入门视频教程,vue学起来困难吗,学vue用什么软件,内容如对您有帮助,希望把文章链接给更多的朋友!

实现应用中局部功能代和资源的集合(简单来说就是将html,js,css,资源整合起来的一个小盒子)

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

为什么:一个界面的功能很复杂

作用:复用编码,简化项目编码,提高运行效率

组件又分为非单文件组件和单文件组件,一般常用的就是单文件组件

二,非单文件组件2.1使用组件的三大步骤 1.创建组件

(1)如何定义一个组件?

使用Vue.extend(options )创建,其中options和new Vue(options)时传 入的那个options儿乎一样。但是也略有不同,组件内不需要写el该属性,因为组件是直接服务于Vue实例的,所以并不需要在组件内写,并且组件写完之后不只是服务于一个地方,这里就体现了组件的复用性,所以组件不能写el。

2.注册组件

(2)如何注册组件?

1.局部注册:靠new Vue的时候传入components选项

2.全局注册:靠Vue.component( '组件名,组件)

3.使用组件

(3)如何使用组件

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

下面是创建非单文件组件的全过程

(4)为什么data必须写成函数?

避免组件被复用时,数据存在引用关系。

【学Vue就跟玩一样】组件-非单文件组件的使用(vue学不懂怎么办)

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

<body><div id="user"><!-- 第3步使用组件编写组件标签 --><school></school><br><xuesheng></xuesheng></div><div class="user2"><hello></hello></div></body><script>// 第一步:创建组件// 创建school组件const school = Vue.extend({template: `<div><h2>学校名称:{{schoolName}}</h2><h2>地址:{{address}}</h2></div>`,// 组件里不用写el也不能写el,而且组件里必须写函数式data() {return {schoolName: '山鱼屋',address: 'Nanbian'}}})// 创建student组件const student = Vue.extend({template: `<div><h2>学生名称:{{studentName}}</h2><h2>年龄:{{age}}</h2><button @click = 'showName'>点我出名</button></div>`,// 组件里不用写el也不能写el,而且组件里必须写函数式data() {return {studentName: '山鱼屋',age: 20}},methods: {showName() {alert(this.studentName)}},})// 创建全局组件const hello = Vue.extend({template: `<div><h2>你好呀!{{name}}</h2></div>`,data() {return {name: 'shanyu',}}})// 注册全局的组件Vue.component('hello', hello);// 创建vmnew Vue({el: '#user',// 第2步.注册组件components: {// 键值对形式(若键值对同名可简写)school,xuesheng: student}})new Vue({el: '.user2',})</script>4.关于写法的注意点

1.关于组件名

一个单词组成: 第一种写法( 首字母小写):+ school,第二种写法(首字母大写) School

多个单词组成: 第一种写法(kebab-case命 名):my-school,第二种写法(Came1Case命 名): MySchool (需要Vue脚手架支持)

注:

(1),组件名尽可能回避HTML中已有的元素名称,例如: h2、 H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签

第1种写法: <school></school>

第2种写法: <school/> 备注:不用使用脚手架时,<schoo1/> 会导致后续组件不能渲染。

3.简写方式

const school = Vue.extend(options)可简写为: const school = {options}

2.2组件的嵌套

和俄罗斯套娃差不多,大件套小件(其实vm下面还有一个名为app的组件,他管理着所有的组件)

<body><div id="user"></div><script>// 创建room组件const room = {template:`<div><h2>房间号{{num}}</h2><h2>puwei:{{pnum}}</h2></div>`,data() {return {num: '222',pnum: '8'}}}// 创建students组件const students = {template:`<div><h2>姓名:{{name}}</h2><h2>学号:{{studentnum}}</h2><room></room></div>`,data() {return {name: '山鱼',studentnum: '9657'}},components: {room}}// 创建school组件const school = {template:`<div><h2>校名:{{sname}}</h2><h2>地址:{{address}}</h2><students></students></div>`,data() {return {sname: '山鱼学院',address: '华山道9088号'}},components: {students}}const app = {template:`<school></school></div>`,components: {school}}// 创建app组件new Vue({template:`<app></app>`,el: '#user',components: {app,}})</script></body>关于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实例对象]。

(2) new Vue(options )配置中data函数、methods中的函数、watch中的函数、computed中 的函数 它们的this均是[Vue实例对象]。

点赞:您的赞赏是我前进的动力!👍收藏:您的支持我是创作的源泉!⭐评论:您的建议是我改进的良药!✍山鱼的个人社区:欢迎大家加入我的个人社区——山鱼社区

本文链接地址:https://www.jiuchutong.com/zhishi/297528.html 转载请保留说明!

上一篇:vue-router传参的四种方式超详细(vue router怎么传值)

下一篇:谈谈uni-app(谈谈社会公德普通话三分钟)

  • iqoo8怎么开启智能接听(iqoo3智慧按键在哪设置)

    iqoo8怎么开启智能接听(iqoo3智慧按键在哪设置)

  • 荣耀X30Max是5g手机吗(荣耀x30max值得买吗)

    荣耀X30Max是5g手机吗(荣耀x30max值得买吗)

  • oppofindx2pro是什么处理器呢(oppofindx2pro是什么调光)

    oppofindx2pro是什么处理器呢(oppofindx2pro是什么调光)

  • 华为nova7pro电池容量是多少(华为nova7pro电池多少钱一块)

    华为nova7pro电池容量是多少(华为nova7pro电池多少钱一块)

  • 拼多多商家版可以两个手机同时登录吗(拼多多商家版可以赚钱吗)

    拼多多商家版可以两个手机同时登录吗(拼多多商家版可以赚钱吗)

  • 滴滴忘记付款有影响吗(滴滴忘了付款会影响征信吗)

    滴滴忘记付款有影响吗(滴滴忘了付款会影响征信吗)

  • 如何把微信聊天记录转到电脑(如何把微信聊天记录打印出来)

    如何把微信聊天记录转到电脑(如何把微信聊天记录打印出来)

  • qq群聊匿名能查出是谁吗(qq群聊匿名能查出来吗)

    qq群聊匿名能查出是谁吗(qq群聊匿名能查出来吗)

  • alt+printscreen键的功能是(printscreen键在哪)

    alt+printscreen键的功能是(printscreen键在哪)

  • 微信紧急冻结后别人还能登上吗(微信紧急冻结后要多久可以解冻)

    微信紧急冻结后别人还能登上吗(微信紧急冻结后要多久可以解冻)

  • 移动光猫los亮红灯闪烁(移动光猫显示los亮红灯)

    移动光猫los亮红灯闪烁(移动光猫显示los亮红灯)

  • 路由器pin是什么(路由器192.168.0.1)

    路由器pin是什么(路由器192.168.0.1)

  • 哔哩哔哩怎么缓存视频(哔哩哔哩怎么缓存电视剧)

    哔哩哔哩怎么缓存视频(哔哩哔哩怎么缓存电视剧)

  • word连续选择按什么键(在word中选择连续文本,可以按住什么左键拖动)

    word连续选择按什么键(在word中选择连续文本,可以按住什么左键拖动)

  • 华为mate30 5G版怎么返回(华为mate30 5g版怎么用4g网络)

    华为mate30 5G版怎么返回(华为mate30 5g版怎么用4g网络)

  • iphonex底部扬声器不响(iphonex底部扬声器没声音用力按屏幕才有)

    iphonex底部扬声器不响(iphonex底部扬声器没声音用力按屏幕才有)

  • 苹果私密相册怎么弄(苹果私密相册怎么打开)

    苹果私密相册怎么弄(苹果私密相册怎么打开)

  • qq文件下载不了是什么原因(qq文件下载不了怎么办)

    qq文件下载不了是什么原因(qq文件下载不了怎么办)

  • l1154f和lr44通用吗(l1154和l1154f一样吗?)

    l1154f和lr44通用吗(l1154和l1154f一样吗?)

  • vivoz5x反向充电需要线吗(vivoz5x反向充电怎么用)

    vivoz5x反向充电需要线吗(vivoz5x反向充电怎么用)

  • 如何删除金山文档小程序(如何删除金山文档中的文件QQ)

    如何删除金山文档小程序(如何删除金山文档中的文件QQ)

  • 荣耀20i有红外吗(荣耀20i有红外线功能吗?)

    荣耀20i有红外吗(荣耀20i有红外线功能吗?)

  • 云闪付扫一扫在哪里(云闪付扫一扫付款后钱在哪里看)

    云闪付扫一扫在哪里(云闪付扫一扫付款后钱在哪里看)

  • 抖音小助手是什么功能(抖音小助手是什么功能,为什么要@抖音小助手|自媒体...)

    抖音小助手是什么功能(抖音小助手是什么功能,为什么要@抖音小助手|自媒体...)

  • 加工费怎么做账
  • 土地增值税间接费用扣除
  • 企业所得税税款可以扣除吗
  • 保险服务保费会计分录
  • 企业购入车辆会计分录
  • 住宿费机打发票税率多少
  • 给员工购消费卡怎么做账
  • 微小企业税率由3%变为1%客户要求降价
  • 变更法人税务怎么变更
  • 发票边上的虚线是什么
  • 营改增租赁服务有哪些
  • 防暑降温列支什么费用
  • 分公司税率怎样确定
  • 境外个人所得税计算
  • 行政事业单位如何加强内部控制
  • win10如何设置一键还原系统
  • 银行余额调节表例题和答案
  • 全免增值税企业有哪些
  • 出口报关单有什么用
  • 公司之间往来借款利息怎么记账
  • linux系统的
  • linux shell语句
  • 预收和应收怎么转换
  • php字符串赋值
  • php字符串型数据的定义方式
  • 出口零申报步骤
  • 硬盘跳线设置
  • php实现微信发红包的方法
  • 消费税的会计分录怎么写
  • 建筑工程甲级什么意思
  • 常用的php操作mysql的函数有哪些
  • 运输发票税金怎么算
  • 一个红苹果多少钱
  • 备用金报销怎么做账
  • gpt gtp
  • 好用的移动端ui框架
  • 偿还应付账款会使得资产报酬率增加吗
  • tcpdump 监听指定端口
  • at命令每天任务
  • 借入资金用于生产经营
  • 企业净利润率是多少好
  • 织梦如何使用
  • python转换数字
  • 补计提工资什么意思
  • 上传附报资料是哪些资料
  • 小企业会计准则适用于哪些企业
  • 发票金额 含税
  • 预缴税金用于抵减税费
  • 社保缴费基数怎么算
  • 应交税费会计核算
  • 免抵退税和留抵退税计算题
  • 开办费账务处理实操案例
  • 装修费没发票怎么记账
  • 企业个人工资薪金换了电脑怎么能导得出来
  • 上一年度的费用怎么做会计分录
  • 结转成本涉及的科目
  • 微信转账和支付宝转账有法律效力么
  • 水费能抵扣进项税吗
  • 空头支票是什么数字
  • 固定资产净额怎么计算公式
  • sql server 数据库介绍
  • sqlserver2008r2创建实例
  • sqlserver如何保留两位小数
  • xp系统新建用户后原来的用户没有了
  • centos7安装MySQL8.0
  • xp 桌面图标
  • 自动登录xp系统怎么办
  • win7旗舰版安装教程u盘
  • WIN10系统英文怎么改中文?
  • linux wc-w
  • windows7开机启动
  • win8.1安装程序无法确定支持的安装选项
  • uibutton设置圆角
  • yarn和npm一起使用冲突
  • Vuforia unity3d 发布 eclipse工程
  • shutil模块 python安装
  • 深入解析windows第7版pdf
  • python错误和异常处理
  • 增值税报表进项税和销项税都不填可以吗
  • 房产税纳税义务时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设