关于Vue的组件与模板的初步理解

最新推荐文章于 2022-01-27 16:41:36 发布

snacy

最新推荐文章于 2022-01-27 16:41:36 发布

阅读量462

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript es6

本文链接：https://blog.csdn.net/snacy/article/details/109126756

版权

Vue 组件 data绑定方法计数器

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先在script标签外面定义一个模板

<template id="zj2">
		<div>
			<button type="button" @click="ja">+</button>
			<h3>{{count}}</h3>
		</div>
	</template>

然后在script标签里创建一个组件

<script type="text/javascript">
		var obj = {count:0};
		Vue.component('zujian',{
			template:'#zj2',
			data:function(){
				return {count:0};
			},
			methods:{
				ja(){
					this.count++;
				}
			}
			
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})
	</script>

然后在HTML标签内使用组件名标签

<div id="app">
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
		</div>

最终结果：

在这里插入图片描述

完整的代码页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
			<hr >
			<zujian></zujian>
		</div>
	</body>
	
	<template id="zj2">
		<div>
			<button type="button" @click="ja">+</button>
			<h3>{{count}}</h3>
		</div>
	</template>
	
	<script type="text/javascript">
		var obj = {count:0};
		Vue.component('zujian',{
			template:'#zj2',
			data:function(){
				return {count:0};
			},
			methods:{
				ja(){
					this.count++;
				}
			}
			
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})
	</script>
</html>

snacy

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于Vue的组件与模板的初步理解

首先在script标签外面定义一个模板<template id="zj2"> <div> <button type="button" @click="ja">+</button> <h3>{{count}}</h3> </div> </template>然后在script标签里创建一个组件<script type="text/javascript"> var obj
复制链接

扫一扫