Vue(组件)

最新推荐文章于 2022-08-04 22:15:28 发布

qq_1405449844

最新推荐文章于 2022-08-04 22:15:28 发布

阅读量117

点赞数

分类专栏： Vue 文章标签： Vue(组件)

本文链接：https://blog.csdn.net/qq_45621713/article/details/103135401

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue组件</title>
	<script src="../libs/vue-2.4.0.js"></script>
</head>
<body>
	<DIV id="app">
		<!-- <my-com1></my-com1> -->
		<mycom3></mycom3>
		
	</div>

	<script>
		//前两种方法 时通过Vue.extend  结合Vue.component
		//第三种直接通过Vue.component创建组件

		//===========第一种创建组件的方式=============================
		//1. 使用Vue.extend 创建全局的Vue组件
		/*var temp = Vue.extend({
			template:"<h3>这是使用Vue组件创建的元素</h3>"
		})
		//2. 使用Vue.component('组件名称', 生成的模板对象)
		Vue.component('myCom1', temp);*/

		//注意   当使用驼峰命名法时 则在引用组件要将大写的字母转成小写的字母  同时两个单词用中横线隔开


		//===========第二种创建组件的方式=============================
		Vue.component('mycom2', Vue.extend({
			template: "<h3>第二种创建组件的方式</h3>"
		}))

		//===========第三种种创建组件的方式=============================
		Vue.component('mycom3', {
			template: "<h3>第三种创建组件的方式</h3>"
		})


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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>终极解决方案</title>
	<script src="../libs/vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<mycom1></mycom1>
		<login></login>
	</div>
	
	<!-- 注意 在组件DOM结构中 有且只有一个唯一的根元素来进行包裹 -->
	<template id="temp1">
		<div>
			<h3>这是通过tempalte元素 在外部定义的组件结构 这个方式  有代码提示 非常好</h3>
			<h3>今天真冷</h3>
		</div>
	</template>

	<template id="temp2">
		<div>
			<h3>登陆组件</h3>
		</div>
	</template>

	<script>
		Vue.component('mycom1',{
			template: "#temp1"
		});

		var vm = new Vue({
			el: "#app",
			components: {
				login: {
					template: "#temp2"
				}
			}
		})
	</script>
</body>
</html>

组件中展示数据和响应事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件中展示数据和响应事件</title>
	<script src="../libs/vue-2.4.0.js"></script>

</head>
<body>
	<!-- 
		1. 组件可以拥有自己的data数据
		2. 组件的data 和 实例的data 有些不同 实例中的data是一个对象  组件中的data是一个方法
		3. 组件中的data 除了必须是一个方法以外  还必须返回一个对象
		4. 除此之外 两者的使用方式相同 
	-->
	<div id="app">

		<mycom1>{{this.msg}}</mycom1>

	</div>
	
	<template id="temp1">
		<h3>今天很冷 {{msg}}</h3>
	</template>

	<script>
		Vue.component('mycom1',{
			template: "#temp1",
			// data: {
			// 	msg: '贾乃亮'
			// }
			data: function() {
				return {
					msg: '贾乃亮'
				}
			},
			methods: {
				
			}
		})

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../libs/vue-2.4.0.js"></script>
	<style type="text/css">
		li {
			list-style: none;
			border: 1px dashed #999;
			margin: 1px;
			line-height: 35px;
			padding-left: 10px;
			width: 100%;
		}
		li:hover {
			background-color: hotpink;
			transition: all 0.8s ease;
		}

		.v-enter,
		.v-leave-to {
			opacity: 0;
			transform: translateX(150px);
		}

		.v-enter-active, 
		.v-leave-active {
			transition: all 1s ease;
		}
	</style>

</head>
<body>
	<div id="app">
		<div>
			<label>
				ID: <input type="text" v-model="id">
			</label>
			<label>
				姓名: <input type="text" v-model="name">
			</label>
			
			<input type="button" value="添加" @click="add">
			
				<!-- <ul>
					<transition>
						<li v-for=" (item, i) in list" :key="item.id" @click="del(i)">
							{{ item.id }} --- {{ item.name }}
						</li>
					</transition>
				</ul> -->
			<!-- transition-group 用来修饰一组元素  tag  默认是以span渲染内容   appear 实现入场动画 -->

			<transition-group tag="ul" appear>
				<li v-for=" (item, i) in list" :key="item.id" @click="del(i)">
					{{ item.id }} --- {{ item.name }}
				</li>
			</transition-group>
		</div>


	</div>
	

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				list: [{"id":1, "name": "林黛玉"},
					{"id":2, "name": "贾乃亮"},
					{"id":3, "name": "王多鱼"},
					{"id":4, "name": "薛鹏超"}
				],
				id: '',
				name: ''
			},
			methods: {
				del(i) {
					this.list.splice(i, 1);
				},
				add() {
					this.list.push( {id: this.id, name: this.name })
				}
			}
		})
	</script>
</body>
</html>

qq_1405449844

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(组件)

Vue组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue组件</title> <script src="../libs/vue-2.4.0.js"></script></head>...
复制链接

扫一扫

专栏目录