017_Vue组件

最新推荐文章于 2024-08-07 19:03:55 发布
最新推荐文章于 2024-08-07 19:03:55 发布
阅读量292 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/122880696
版权

1. 全局组件

1.1. 全局组件注册语法

Vue.component(组件名称, {
	data: 组件数据,
	template: 组件模板内容,
	methods: {}
})

1.2. 组件使用, 组件可以重用

<div id="app">
	<组件名称></组件名称>
    <组件名称></组件名称>
    <组件名称></组件名称>
</div>

1.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全局组件</title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
		    <button-counter></button-counter>
		    <button-counter></button-counter>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 自定义全局组件
			Vue.component("button-counter", {
				data: function(){
					return {
						count: 0
					}
				},
				template: "<button @click='handle'>点击了{{count}}次</button>",
				methods: {
					handle: function(){
						this.count += 1;
					}
				}
			});

			var vm = new Vue({
				el: "#app",
				data: {
					
				}
			});
		</script>
	</body>
</html>

1.4. 效果图

1.5. 组件的注意事项

1.5.1. data必须是一个函数。

1.5.2. 组件模板内容必须是单个根元素。

2. 模板字符串

2.1. 组件模板内容可以是模板字符串, 模板字符串需要浏览器提供支持(ES6语法), 解决模板内容较长问题。

 

2.2. 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件模板字符串</title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component("button-counter", {
				data: function() {
					return {
						count: 0
					}
				},
				template: `
					<div>
						<button @click="handlePlus">加加{{count}}</button>
						<button @click="handleMinus">减减{{count}}</button>
					</div>
				`,
				methods: {
					handlePlus: function(){
						++this.count;
					},
					handleMinus: function(){
						--this.count;
					}
				}
			});

			var vm = new Vue({
				el: "#app",
				data: {
					
				}
			});
		</script>
	</body>
</html>

2.3. 效果图

3. 组件命名方式

3.1. 短横线方式

Vue.component('my-component', {})

3.2. 驼峰方式(尽可能不用)

Vue.component('MyComponent', {})

3.3. 如果使用驼峰式命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件。

3.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件命名</title>
	</head>
	<body>
		<div id="app">
			<hello-world></hello-world>
			<button-counter></button-counter>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 如果使用驼峰式命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件。
			Vue.component("HelloWorld", {
				data: function() {
					return {
						msg: "HelloWorld"
					}
				},
				template: "<div>{{msg}}</div>"
			});

			Vue.component("button-counter", {
				data: function() {
					return {
						count: 0
					}
				},
				template: `
					<div>
						<button @click="handle">点击了{{count}}次</button>
						<HelloWorld></HelloWorld>
					</div>
				`,
				methods: {
					handle: function(){
						++this.count;
					}
				}
			});

			var vm = new Vue({
				el: "#app",
				data: {

				}
			});
		</script>
	</body>
</html>

3.5. 效果图

4. 局部组件

4.1. 局部组件使用方式

 

4.2. 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>局部组件</title>
	</head>
	<body>
		<div id="app">
			<hello-world></hello-world>
			<button-counter></button-counter>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var helloWorld = {
				data: function() {
					return {
						msg: "HelloWorld"
					}
				},
				template: "<div>{{msg}}</div>"
			};

			var buttonCounter = {
				data: function(){
					return {
						count: 0
					}
				},
				template: "<button @click='handle'>点击了{{count}}次</button>",
				methods: {
					handle: function(){
						this.count += 1;
					}
				}
			}

			var vm = new Vue({
				el: "#app",
      			components: {
        			'hello-world': helloWorld,
        			'button-counter': buttonCounter
      			}
			});
		</script>
	</body>
</html>

4.3. 效果图

 

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 组件不受全局样式影响_Vue 组件之间样式冲突
weixin_27021789的博客
01-30 4274
Vue 组件之间样式冲突vue 组件化，各组件内都可以在 style 部分写样式，这些样式却不是相互独立的，最终组合在一起，难免就会产生样式的污染。首先来看一下两个 vue 组件代码：1.ParentTestStyle.vue父组件控件：testParentStyle样式穿透子组件控件：import childStyle from "./ChildTestStyle";export default...
vue组件加载完成之后执行方法_Vue组件加载完成后对应的钩子？
weixin_34242698的博客
12-31 3439
在vue组件中，使用了如下一个组件：<complain-list :list="complainData"></complain-list>模板如下：<template id="complain-list"><div class="collapse-card" v-for="data in dataList"><div class="colla...
vue 1.x 组件数据传递
lkycan的博客
08-29 276
本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。1.获取父组件数据疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢？验证方法：1.先在组件里面定义data 的数据，模版以及子组件2.在子组件里面直接使用父组件里面的data数据 components:{ //父级组
对ant design vue 1.x 组件进行二次封装
qq_44353287的博客
03-21 3119
<a-table ref="tableElRef" v-bind="getBindValues" // 通过计算属性，获取父级传入的非prop属性 :columns="columns" :data-source="virtualData" // 需要对原有属性进行二次改造，则设置prop @expand="expand" // 改造原有事件同理 @expandedRowsChange="expandedRowsChange" .
vue滑块组件_vue1.x和vue2.x的Vue滑块组件
cuk5239的博客
07-21 531
vue滑块组件 Vue-Slider-Component (vue-slider-component) Can use the slider in vue1.x and vue2.x. 可以在vue1.x和vue2.x中使用滑块。 更新资料 (Update) Remove class-name & styles (can use vue native props [style, cl...
vue如何主动销毁子组件_vue组件什么条件下需要摧毁？
热门推荐
weixin_34638141的博客
12-23 1万+
Vue 是数据驱动的MVVM框架，所以上来你思考的是如何组织你的数据。v-if与组件的自动销毁在文档中有这样一句话，v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果我们有这样一个组件销毁我们通过点击按钮改变v-if的值，销毁Child组件var Child = {template: `{{ data }}`,data () {return {data: 'Child ...
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
weixin_32512187的博客
12-30 8385
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)第一步: 将document.body.clientWidth赋值给data中自定义的变量dat...
vue组件获取props_Vue中子组件怎么获取父组件的值？（props实现）
weixin_39943868的博客
12-24 9102
vue中父组件的数据如何传送到子组件中？组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一接口。所以子组件引用父组件就需要用props实现。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是：一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不...
vue组件获取props_vue中子组件的methods中获取到props中的值方法
weixin_39952074的博客
12-24 3883
父子组件通信这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可例如：父组件中数据统计统计：销售数量 {{number}}销售金额 {{amount}}利润统计 {{profits}}data(){return {number: null,amount: null,profits: null,chartData: [10,10,10]}},子组件中export ...
vue 组件属性监听_vue props监听变化的几种方式
weixin_36009977的博客
12-28 8158
应用场景在vue中父子组件是通过props传递数据的。通常有以下几种场景：子组件展示父组件传递过来的props，一般是字符串子组件通过父组件的props计算得到某个值子组件修改父组件传递过来的propscomputed 计算属性使用场景：当pros传递过来的值不能直接使用的时候，就可以使用计算属性了。比如：完整的地址需要将省市区3个字段拼接后展示。计算属性是基于依赖进行缓存的，当props不变时，...
使用 Vue.js 构建大屏可视化系统
qq_42072014的博客
08-04 992
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
JAVA毕业设计|ssm基于java的健身房管理系统的设计与实现vue包含文档代码讲解
2401_86480677的博客
08-03 341
前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。如图5.4显示的就是健身器材列表页面，此页面提供给管理员的功能有：对全部的健身器材的一个管理、可以根据健身器材名称进行模糊查询、根据时间区间来进行判断器材的是否损坏。如图5.1显示的就是会员管理页面，此页面提供给管理员的功能有：对会员信息的一个管理，不同会员看到的页面是不一样的，会员信息也是不同的.
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 678
SignList这三个页面就是需要切换的页面。
Vue的所有面试题
本人小可爱
08-06 478
在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。页面显示的数据和data中的数据已经保持同步了，都是最新的。
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 112
vue实现放大缩小，拖动盒子完整代码付效果图
视频教程 - 自研Vue3 Tree组件高级功能：虚拟滚动新增节点实现自动滚动
felix_alone2012的博客
08-03 219
感谢小伙伴们对本套自研vue3 tree组件教程的关注，在前一篇《媲美Element Plus JuanTree终极实战：虚拟滚动》的功能演示中发现了小bug，特地整理了相关录屏来说明怎么一步步解决bug的，来回馈小伙伴们的支持。
Vue3：【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用
weixin_52268321的博客
08-03 410
Vue3：【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用
vue前端项目--路由vue-router
As_Yua的博客
08-07 579
早期的网站开发中，服务器负责生成完整的 HTML 页面，并将其发送给客户端展示。每个 URL 对应一个特定的控制器(Controller)，该控制器负责处理请求并生成相应的 HTML 内容。这种方式有利于搜索引擎优化（SEO），因为搜索引擎可以轻松抓取完整的 HTML 内容。缺点是页面更新时需要重新加载整个页面，导致用户体验不佳，且 HTML 和业务逻辑混杂在一起，难以维护。随着 Ajax 技术的出现，前后端分离成为可能。
简单介绍下vue3中为什么使用ref包裹数组会失去push的方法呢？
最新发布
m0_62626838的博客
08-07 132
2、简单的说就是当你使用ref定义一个响应式的数组时，此时你的数组时响应式的，但是当你对数组做push等方法时，就失去响应式了，这是因为在 Vue 的响应式系统中，属性的添加或删除被视为改变原始对象的引用，而不是改变原始对象本身。1、有的小伙伴在使用vue3的过程中想省事情，针对vue3的两种响应式，即ref与reactive往往会只选择使用ref,然后就报错数组没有push方法了。不，可以解决，要记住ref在setup中写要加上.vue,在模板结构中使用不加.value。
vue 部门tree样式_Vue组件tree实现树形菜单
05-28
Vue组件tree可以实现树形菜单的功能，具体实现步骤如下： 1. 安装vue-tree组件 可以使用npm安装vue-tree组件，命令如下： ``` npm install --save vue-tree ``` 2. 在Vue组件中引入vue-tree组件 在Vue组件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值