使用组件改造TodoLIst

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<input type="" name="" v-model = 'inputvalue'>
		<button type="" v-on:click = 'btnClick'>提交</button>
		<ul>
			<todo-item v-bind:content = 'item'
					   v-for = 'item in list'>
				
			</todo-item>
		</ul>
	</div>
	<script>
		Vue.component("TodoItem", {
			props : ['content'],
			template : '<li>{{content}}</li>'
		});
		var app = new Vue({
			el : '#app',
			data : {
				list : [],
				inputvalue : ''
			},
			methods : {
				btnClick : function () {
					this.list.push(this.inputvalue);
					this.inputvalue = '';
				}
			}
		});
	</script>
</body>
</html>

首先我们定义了一个component一个全局组件，名字是TodoItem，所以我们可以直接在Html中使用我们的组件，然后通过v-for来决定到底要输出多少个TodoItem这个组件，同时将每一个v-for的item内容通过v-bind保存在content中，且传递给todo-item这个组件，然后通过props来进行接收，再在模板template中使用content（最后todo-item标签会被component模板中的标签templeate所替换）

刚才是全局组件的方法，现在讲一下局部组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<input type="" name="" v-model = 'inputvalue'>
		<button type="" v-on:click = 'btnClick'>提交</button>
		<ul>
			<todo-item v-bind:content = 'item'
					   v-for = 'item in list'>
				
			</todo-item>
		</ul>
	</div>
	<script>
		var TodoItem = {
			props : ['content'],
			template : '<li>{{content}}</li>'
		}
		var app = new Vue({
			el : '#app',
			components : {
				TodoItem : TodoItem
			},
			data : {
				list : [],
				inputvalue : ''
			},
			methods : {
				btnClick : function () {
					this.list.push(this.inputvalue);
					this.inputvalue = '';
				}
			}
		});
	</script>
</body>
</html>

使用组件改造TodoLIst

猜你喜欢