草庐IT

Vue的组件化编程

暗武逢天 2024-02-20 原文

非单文件组件

注册局部组件



此时上面书写的组件都是局部组件,每一个vue实例要想使用上面的组件时都需要在components中进行注册才可以使用,此时如果再创建一个Vue实例vms,这个实例不在components中注册就直接使用组件会产生什么变化:


此时控制台报错 ‘是否正确注册了组件?对于递归组件,请确保提供“name”选项’(翻译后)
此时我们注册一个全局组件,然后在vms中也不注册任何组件,然后调用者全局组件来试试看


此时再观察页面时发现全局组件被引用成功,vms实例中也没有注册如何组件

小总结
Vue中使用组件三大步骤
一 定义组件(创建组件)
使用Vue.extend(options)创建 其中options和new Vue(options)时传入的那个options几乎一样 但也有区别
区别如下:
1 el不可以书写 最终所有的组件都要经过一个Vue的实例管理,由Vue实例中的el决定服务于哪个容器
2 data必须写成函数形式 避免组件被复用时 数据之间存在引用关系
注意: 使用template配置组件结构主主体时,template下只能有一个根节点
二 注册组件
1 局部注册: 直接在new Vue的实例中传入components选项中书写定义的组件名称或起别名
2 全局注册: Vue.component(‘组件名’,组件)

三 使用组件(在调用处书写组件标签)
比如注册的组件名为 altman 使用时:

组件的嵌套



组件容器包裹嵌套



此时vm实例中只用注册包裹其他组件的app组件即可

VueComponent构造函数

   1 比如上面定义的altman组件本质其实是一个名为VueComponent的构造函数 并且不是程序员定义的 
   是Vue.extend生成的
   2 我们只需要些<altman/>(单闭合标签建议只在vue脚手架环境下写) 或<altman></altman> Vue解析时会帮我们创建altman组件的实例对象
   3 特别注意: 每次调用Vue.extend时返回的都是一个全新的VueComponent
   4 关于this的指向
        (1) 组件配置中:
            data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[VueComponent实例对象]
        (2) new Vue()配置中:
            data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[Vue实例对象]  
   5 VueComponent的实例对象 可以简称vc(此处简称只代表个人,组件实例对象)
      Vue的实例对象可以简称vm(此处简称只代表个人,根据vue的MVVM模型简称)  
   6 一个重要的内置关系:
     VueComponent.prototype.__proto__===Vue.prototype
     有这个关系是为了让组件实例对象(vc) 可以访问到Vue原型上的属性 方法

单文件组件




此时书写好的组件和页面是不可以用浏览器直接打开的

控制台报错: 不能在模块外部使用 import 语句(翻译后)
后缀为.vue的文件必须在脚手架环境下运行才可以

Vue脚手架启动

安装vue脚手架教程可以百度查询
此处已经安装好,直接用vue脚手架进行创建demo例子

创建好后可以先运行命令: npm run serve 查看demo是否成功
demo成功后可以直接将前面创建的文件进行复制替换创建的demo中的文件

复制替换完后输入启动命令:npm run serve
如果启动后有报如下错误的

可以在vue.config.js中添加lintOnSave: false 这行代码,然后重新输入启动命令npm run serve启动就可以了

ref属性
在获取页面上的dom元素已经自定义组件标签的实例时,vue提供了ref属性来进行获取,在dom元素上配置属性ref,然后vue实例中用$refs属性 进行获取
1 被用来给元素或子组件注册引用信息(id的替代者)
2 应用在给html标签上获取的是真实dom元素 应用在组件标签上是组件实例对象

观察页面效果

props属性
功能: 让组件接收外部调用自己时传过来的数据
(1) 传递数据:
调用的地方:
(2) 接收数据
第一种方式(精简版,只接收不做任何限制,默认基本接的都是字符串类型)
props:[‘name’]
第二种方式(限制类型)
props:{
name:String,
age:Number
}
第三种方式(限制类型,限制接收数据的必要性,指定默认值)
props:{
name:{
type:String,//类型
required:true//必要性
default:‘赛罗’ //默认值
}
}
注意: props是只读的 vue底层会检测对props的修改,如果进行了修改,就会发出警告
可以在data中定义数据来存放props接收来的数据,然后修改data中的数据,此时的props就相当于中转站


mixins(混入)
功能: 可以把多个组件共用的配置或者方法提取成一个混入对象
使用方式:
(1) 定义混合
{
data(){…}
methods:{…}

}
(2) 使用混入
(1) 全局混入: Vue.mixin(xxx)
(2) 局部混入: mixins:[‘xxx’]

插件
功能: 用于增强Vue
本质: 包含install方法的一个对象 install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件:
对象.install = function (Vue,options){
// (1) 添加全局过滤器
Vue.filter(…)
// (2) 天剑全局指令
Vue.directive(…)
// (3) 配置全局混入(合)
Vue.mixin(…)
// (4) 添加实例方法
Vue.prototype. m y M e t h o d = f u n c t i o n ( ) . . . V u e . p r o t o t y p e . myMethod = function(){...} Vue.prototype. myMethod=function()...Vue.prototype.myProperty = xxx

scoped
作用:当多个组件内部的样式名称相同时,被同一个父级所引用时,防止样式名重复造成的冲突
写法: *<style scoped></style>*

有关Vue的组件化编程的更多相关文章

  1. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  2. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑:需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手(建立连接)数据传输四次挥手(断开连接)TCP和UDP对比网络编程基础知识

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  5. ruby - 如何以编程方式删除实例上的 "singleton information"以使其编码(marshal)? - 2

    我创建了一个由于“在运行时执行的单例元类定义”而无法编码的对象(这段代码的描述是否正确?)。这是通过以下代码执行的:#defineclassXthatmyusesingletonclassmetaprogrammingfeatures#throughcallofmethod:break_marshalling!classXdefbreak_marshalling!meta_class=class我该怎么做才能使对象编码正确?是否可以从对象instance_of_x的classX中“移除”单例组件?我真的需要一个建议,因为我们的一些对象需要通过Marshal.dump序列化机制进行缓存。

  6. Ruby 元编程问题 - 2

    我正在查看Ruby日志记录库Logging.logger方法并从sourceatgithub提出问题与这段代码有关:logger=::Logging::Logger.new(name)logger.add_appendersappenderlogger.additive=falseclass我知道类 最佳答案 这实际上删除了方法(当它实际被执行时)。这是确保close不会被调用两次的保障措施。看起来好像有嵌套的“class 关于Ruby元编程问题,我们在StackOverflow上找到一

  7. ruby - Paperclip:以编程方式分配图像并设置其名称 - 2

    使用Paperclip,我想从这样的URL抓取图像:require'open-uri'user.photo=open(url)问题是我最后得到一个像“open-uri20110915-4852-1o7k5uw”这样的文件名。有什么方法可以更改user.photo上的文件名?作为一个额外的变化,Paperclip将我的文件存储在S3上,所以如果我可以在初始分配中设置我想要的文件名就更好了,这样图像就会上传到正确的S3key。像这样:user.photo=open(url),:filename=>URI.parse(url).path 最佳答案

  8. ruby - 如何以编程方式检查证书是否已被吊销? - 2

    我正在开发一个xcode自动构建系统。在执行一些预构建验证时,我想检查指定的证书文件是否已被撤销。我了解securityverify-cert验证其他证书属性但不验证吊销。我如何检查撤销?我正在用Ruby编写构建系统,但我对任何语言的想法都持开放态度。我阅读了这个答案(Openssl-Howtocheckifacertificateisrevokedornot),但指向底部的链接(DoesOpenSSLautomaticallyhandleCRLs(CertificateRevocationLists)now?)进入的Material对我的目的来说有点过于复杂(用户上传已撤销的证书是一

  9. ruby - 如何保持我不常用的编程语言技能 - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗?Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby​​-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的,这与ruby​​有很大不同。由于我与ruby​​之间的差距如此之大,我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西,我想知道是否有一些我可以订阅的网站,并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗?

  10. ruby - 如何以编程方式将 mp3 转换为 itunes 可播放的 aac/m4a 文件? - 2

    我一直在寻找一种以编程方式或通过命令行将mp3转换为aac的方法,但没有成功。理想情况下,我有一段代码可以从我的Rails应用程序中调用,将mp3转换为aac。我安装了ffmpeg和libfaac,并能够使用以下命令创建aac文件:ffmpeg-itest.mp3-acodeclibfaac-ab163840dest.aac当我将输出文件的名称更改为dest.m4a时,它无法在iTunes中播放。谢谢! 最佳答案 FFmpeg提供AAC编码功能(如果您已编译它们)。如果您使用的是Windows,则可以从here获取完整的二进制文件。

随机推荐