浅谈Vue构造、Vue实例、Vue组件的区别

🌵 作者主页:仙女不下凡

🌵 前言介绍:以下👇 内容都是我个人对于前端知识的总结,会定期更新欢迎持续关注!

🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!


🌵1.Vue构造、Vue实例、Vue组件的关系

🌼vue构造、vue组件和vue实例这三个是不同的概念,一个vue构造可以有多个不同的vue组件,一个vue组件也可以有多个不同的vue实例。

vue构造 => vue组件 => vue实例

🌾2.Vue构造

🌼什么是vue构造?语法格式如下👇🏻👇🏻👇🏻

<script>
	Vue.extend({
		props: [],
		data: function() { return {} },
		template: ""
 
	});
</script>

🌼特点:只能通过自身初始化结构。
🌼使用范围:❶挂载在某元素下❷被Vue实例的components引用❸Vue.component组件引用。

🌴3.Vue组件

🌼什么是vue组件?语法格式如下👇🏻👇🏻👇🏻

<script>
	Vue.component("mycomponent", {
		props: [],
		data: function() { return {} },
		template: ""
	});
</script>

🌼特点:❶可通过自身初始化组件结构❷可通过引入Vue.extend初始化组件结构❸可通过第三方模板template.html初始化组件结构。
🌼使用范围:任何已被vue初始化过的元素内。

☘️4.Vue实例

🌼什么是vue实例?语法格式如下👇🏻👇🏻👇🏻

<script>
	new Vue({
		el: "",
		data: {}
	});
</script>

⚠️this.$options.key表示其自定义属性值,this.$??表示系统属性值,如this.$el
🌼特点:❶可以通过自身components引用Vue.extend构造,通过自身data向构造传参❷可以通过自身components引用组件模板,通过自身data向组件传参。
🌼使用范围:仅限于自身。

🌿5.构造选项options

💨⑴什么是构造选项options

🌼当我们调用一个Vue实例时,返回的并不是对象本身而是一个可以操作这个元素的方法和属性的API对象。其中options代表的就是。

const vm = new Vue(options);  /这就是一个Vue实例 前面变量声明可以不写 参数options就是构造选项/

🌼其中vm就是Vue实例的别称,这个是Vue作者推荐的,我觉得可以参考 MVVM模型1中的VM

💨⑵五类最常见的options

🌼①数据datapropspropsDatacomputedmethodswatch
🌼②DOMeltemplaterenderrenderError
🌼③生命周期钩子(函数): beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestroydestroyederrorCaptured
🌼④资源directivesfilterscomponents
🌼⑤组合parentmixinsextendsprovideinject
🌼⑥等等


  1. MVVM模型:Vue参考了该模型,❶data中所有的属性,最后都出现在了vm身上;❷另外vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。 ↩︎

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

仙女不下凡

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值