Vue组件注册语法糖和父子组件、模板分离~VUE学习笔记(3)

最新推荐文章于 2024-04-12 10:47:29 发布
最新推荐文章于 2024-04-12 10:47:29 发布
阅读量237 收藏
点赞数
分类专栏： Vue笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44476929/article/details/103749967
版权

###Vue注册语法原理:
先创建组件构造器对象(.extend)，然后注册组件(.component)在使用，案例代码如下：
注册组件分为全局变量及局部变量

<div id="comb">
			<!-- 3.使用组件 -->
			<mycpn></mycpn>
			<mycpn></mycpn>
		</div>
		
		<script>
			//1.创建组件构造器对象
			const componentc = Vue.extend({
				template:`
					<div>
						<h2>我是标题</h2>
						<p>这是内容，哈哈哈</p>
						<p>这是结尾，嚯嚯嚯</p>
					</div>`
			})
			//2.注册组件(全局变量)
			// Vue.component('mycpn',componentc)
			
			const vm=new Vue({
				el:"#comb",
				data:{
					
				},
				//局部变量
				components:{
					mycpn: componentc
				}
			})
		</script>

局部组件只能在实例div里面使用

父子组件案例：

<body>
		<div id="app_fSon">
			<cpnc2></cpn2>
		</div>
		
		<script type="text/javascript">
			const cpn1=Vue.extend({
				template:`
				<div>
					<h2>这是标题1</h2>
					<p>这是内容:叭叭叭</p>
				</div>`
			})
			
			const cpn2=Vue.extend({
				template:`
				<div>
					<h2>这是标题2</h2>
					<p>这是内容:啦啦啦</p>
					//子组件
					<cpnc1></cpnc1>
				</div>`,
				components:{
					cpnc1: cpn1
				}
			})
			
			const vm=new Vue({
				el:"#app_fSon",
				data:{},
				components:{
					cpnc2: cpn2
				}
			})
		</script>
	</body>

组件注册语法糖及两种模板分离案例:

<body>
		<div id="app_spe">
			<cpnc1></cpnc1>
			<cpnc2></cpnc2>
		</div>
		<!-- script模板分离 -->
		<script type="text/x-template" id="cpn1">
			<div>
				<h2>这是标题1</h2>
				<p>这是内容，锤锤</p>
			</div>
		</script>
		
		<!-- template模板分离写法 -->
		<template id="cpn2">
			<div>
				<h2>这是标题2</h2>
				<p>这是内容，榔头</p>
			</div>
		</template>
		
		<script type="text/javascript">
			//注册组件全局语法糖
			Vue.component(
				'cpnc1',{
					template:'#cpn1'
				}
			)
			
			const vm=new Vue({
				el:"#app_spe",
				data:{},
				//注册组件局部语法糖
				components:{
					'cpnc2':{
						template:'#cpn2'
					}
				}
			})
		</script>
	</body>
叁玖贰拾柒？
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的语法糖
JINGinC的博客
09-29 8593
这里写自定义目录标题 一、什么是语法糖？ 语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。 使用语法糖可以简化代码，更便于程序员开发。 二、VUE中语法糖有
【Vue3】一文看懂vue3单文件组件的语法糖＜script setup＞
书呆子ITme
08-04 5146
vue setup单文件组件 (SFC) 中使用组合式 API 的编译时语法糖总结。
传说中 VUE 的“语法糖”到底是啥？
前端人的博客
09-24 5416
一、什么是语法糖？ 语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。 使用语法糖可以简化代码，更便于程序员开发。 二、VUE中语法糖有哪些？ 1、最常见的语法糖 v-model 使用 v-model 可以实现数据双向绑定，但是如何实现的呢？ v
vue语法糖
atu1111的博客
07-20 4055
vue语法糖   语法糖是指在不影响功能的情况下， 添加某种方法实现同样的效果， 从而方便程序开发。 1. v-bind    v-bind， 可以省略 v-bind, 直接写一个冒号 “：” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i
vue3.2中setup语法糖
A_ordinary_day的博客
12-17 8582
**1.**什么是setup语法糖？怎么使用？最开始Vue3.0 暴露变量方法必须 return 出来，template中才能使用；现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。 <template> <my-component :num="num" @click="addNum" /> </template&g
vue组件学习教程
08-29
学习 Vue 组件是掌握 Vue 框架的关键所在，本文将详细介绍 Vue 组件的学习教程，根据 Vue 官方文档学习的笔记，具有相当的参考价值。 一、注册组件 在 Vue 中，可以通过全局注册或局部注册两种方式来注册组件。...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
组件的局部注册和全局注册提供了灵活的组织方式，同时，Vue的父子组件通信机制使得组件间的数据传递变得简单。 Vue的语法主要包括插值表达式、指令（如v-if、v-show、v-for、v-bind、v-on等）、计算属性和事件处理...
Vue笔记，Vue笔记，Vue笔记
07-18
在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-on`指令）以及计算属性和侦听器。开发者会学习如何通过Vue实例将数据与DOM进行双向绑定，并理解响应式系统的运作原理...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
vue学习笔记不全正在学习中.docx
09-07
Vue提供了一些简化语法的糖，例如在创建组件时，可以使用简写形式`<MyComponent :prop="value" />`代替完整形式`<MyComponent :prop.sync="value" />`，这在处理父子组件交互时更为便捷。 以上是Vue学习的基础内容...
傻瓜式vuex语法糖kiss-vuex整理
12-12
前言 vuex 作为 vue 框架状态数据管理模块，诞生已有些许年头，它的出现很好地解决了兄弟组件响应式状态数据通信的问题。但是，vuex 的学习是一定门槛的，同时其声明和使用方式有一些不够简洁。一般情况下，我们会使用 new Vue({store})这种方式注入 Store，在组件中使用很 mapGetters 或 mapActions 等来引入 getters 和 actions 等，但随着项目状态数据增长，你会发觉越来越难以维护，因为这些数据和方法都太过分散。 看到这里，如果你还是不懂 vuex 是何物，或者你已经使用了 vuex 但是很不习惯它的用法，没有关系，你可以继续阅读本篇。
传说中 VUE 的“语法糖”到底是啥，字节跳动前端面试
2401_83944328的博客
03-31 334
修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符，也是语法糖。示例：链接添加点击事件，点击之后不希望跳转。//语法糖百度//普通写法methods:{go(e){console.log(‘阻止链接跳转’)prevent 修饰符是阻止默认事件。还有 submit 同样也适用。下列是常见的修饰符，与上边 .prevent 使用相同。.stop 用来阻止事件冒泡。
Vue 中语法糖的理解
最新发布
克里斯蒂亚诺更新的博客
04-12 406
在 Vue 中，语法糖的作用就是让开发者更加轻松地编写 Vue 组件，通过封装和简化一些常见的操作或模式，使得代码更加简洁、清晰和易于理解。这些语法糖使得 Vue 的 API 更加友好，同时也提高了开发效率和代码质量。Vue 中有许多语法糖，这些语法糖使得编写 Vue 组件更加简洁和便捷。这些语法糖使得编写 Vue 组件更加简洁和易读，提高了开发效率。来定义计算属性的 getter。
VUE “语法糖”
u010609022的专栏
03-06 392
语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。使用语法糖可以简化代码，更便于程序员开发。
Vue3.2(语法糖写法) 入门推荐
weixin_51220466的博客
09-23 825
Vue3.2(语法糖写法)常用方法汇总
Vue语法糖的说明
qq_39577371的博客
04-22 1273
在 Vue2.X的版本下 一些标签可以省略化 语法糖是指在不影响功能的情况下 添加某种方法实现同样的效果 从而方便程序开发。 Vue.js v-bind v-on 指令都提供了语法糖 也可以说是缩写 比如 v-bind 可以省略 v-bind, 直接写一个冒号 "：”: v-bind 可以省略为 xx:xx 如 <a v_bind:href="xx>连接</a&g...
vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值
m0_59023231的博客
06-11 8022
vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值
关于Vue中的语法糖
AirrrNinety9的博客
04-03 2077
语法糖的定义 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。（来自百度百科） vue中的语法糖 在学习Vue的过程中，经常会看到一些语法糖，很有意...
js vue3setup语法糖，父子组件input传值
05-27
在Vue3中，使用`setup`语法糖来编写组件，可以将组件的逻辑和模板分离，更加清晰和易于维护。以下是一个简单的例子，包括父子组件之间的输入框传值： 父组件template代码： ```html 输入的值是：{{ value }} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值