vue中组件的创建

最新推荐文章于 2021-12-02 17:08:06 发布

博皓爱学习

最新推荐文章于 2021-12-02 17:08:06 发布

阅读量34

点赞数

分类专栏：初学vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_38495652/article/details/120752496

版权

初学vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标题vue中组件的创建

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="" name="" id="" v-model="inputValue" />
			<button type="button" @click="handleBtn()">提交</button>
			<!-- <ul>
				<li v-for="(item,key) in list" @click="deleteLi(key)">{{item}}</li>
			</ul> -->
			<todo-item v-for="(item,key) in list"></todo-item>
			
		</div>
		<script src="./vue.js"></script>
		<script type="text/javascript">
		// 全局组件
			Vue.component("TodoItem",{
				template:"<li>todo item</li>"
			})
		
		
			var a = new Vue({
				el:"#app",
				data() {
					return{
						list:['item1','item2','item3'],
						inputValue:''
					}
				},
				methods:{
					handleBtn(){
						this.list.push(this.inputValue);
						this.inputValue='';
					},
					deleteLi(key){
						this.list.splice(key,1);
					}
					
				}
				
				
			})
		</script>
	</body>
</html>

在script中

Vue.component("TodoItem",{
				template:"<li>todo item</li>"
			})

这里的TodoItem 不是组件的名，组件名是todo-item。有点意思。。。。初学记录一下

博皓爱学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue中组件的创建

vue中组件的创建直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="" name="" id="" v-model="inputValue" /> <button ty
复制链接

扫一扫