Vue2.5入门-2

todolist功能开发

代码

<!DOCTYPE html>
<html>
<head>
	<title>vue 入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="root">
		<div>
			<input type="text" v-model="value"/>
			<button @click="add">提交</button>
		</div>
		<div>
			<ul>
				<li v-for="(item,index) of list" v-bind:key="index">{{item}}</li>
			</ul>
		</div>
	</div>
	<script>
		new Vue({
			el: "#root" ,//和哪一个dom节点绑定
			data: {
				value: null,
				list: []
			},
			methods:{
				add: function(){
					console.log(123);
					this.list.unshift(this.value);
					this.value = '';
				}
			}
		})
	</script>
</body>
</html>

组件拆分

代码

<!DOCTYPE html>
<html>
<head>
	<title>vue 入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="root">
		<div>
			<input type="text" v-model="value"/>
			<button @click="add">提交</button>
		</div>
		<div>
			<ul>
				<todo-item v-for="(item,index) of list" :key="index" :content="item" @dele="dele"></todo-item>
			</ul>
		</div>
	</div>
	<script>
		//定义一个全局组件
		// Vue.component('todo-item', {
		// 	template: '<li>{{content}}</li>'
		// })

		//定义一个局部组件
		var TodoItem = {
			//如果父组件向子组件传值，那么子组件需要定义参数
			props: ['content'],
			template: '<li @click="dele">{{content}}</li>',
            methods: {
				dele(){
					//console.log(this.index);
					this.$emit('dele',this.index);
				}
			}
		}
		new Vue({
			el: "#root" ,//和哪一个dom节点绑定
			//如果是全局组件，那么需要定义props接收参数
			props: ['content'],
			//如果是局部组件，需要做一个注册
			components: {
				'todo-item': TodoItem
			},
			data: {
				value: null,
				list: []
			},
			methods:{
				add: function(){
					console.log(123);
					this.list.unshift(this.value);
					this.value = '';
				},
                dele(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>

组件和实例的关系

每一个组件就是一个vue实例

Vue2.5入门-2

todolist功能开发

组件拆分

组件和实例的关系

实现todolist的删除功能