Dom节点的增加与删除

实现目的：一个按钮，如增加按钮，每点击一次，增加一行；删除就是点击增加的行标签，移除点击的此标签

jquery实现方法：DOM节点操作，当点击增加按钮，在下方创建一个新的行标签；当点击创建的标签时自动移除。

具体实现方法如下所示：

		<div id="app">
			<!--<button class="btn" οnclick="btn()">增加标签</button>-->
			<button class="btn" >增加标签</button>
			<ul>
				
			</ul>
		</div>

jquery操作方法，主要就是传参和remove（）方法实现，对比下列两种操作过程

var count=0;

function btn(){
		$("ul").append("<li οnclick='delFn("+count+")' class='a"+count+"'>"+count+"部分</li>")
		count++;
}
function delFn(e){
	$(".a"+e).remove();
}

$(".btn").on('click',function(){
	$("ul").append("<li>"+count+"部分</li>") 
	count++;
	delFn($("li"));
})
function delFn(e){
	e.on('click',function(){
		$(this).remove();
	})
}

vue实现方法：无DOM节点操作，数据的操作改变DOM节点。

重点：父组件向子组件传递属性，props接收，子组件向父组件传值，使用$emit函数自定义事件和父组件一致，触发父组件操作事件；注册模板template

具体实现如下：

		<div id="app">
			<button class="btn" @click="addFn">{{btn}}</button>
			<ul>
				<!--<li v-for="(item,index) of list" v-bind:key="index" v-on:click="delFn(index)">{{item}}部分</li>-->
				<li-item 
					v-for="(item,index) in list"   
					:key="index"   
					v-bind:content="item" 
					:index="index"
					@dell="delFn"
				>
				</li-item>
			</ul>
		</div>

如果不使用模板，直接在组件内操作，数组的移入移出实现：

var count=0;

new Vue({
	el:"#app",
	data:{
		btn:"增加按钮",
		list:[],
	},
	methods:{
		addFn:function(){
			this.list.push(count);
			count++;
		},
		delFn:function(e){
			this.list.splice(e,1);
		}
	}
})

如果使用模板化操作，需要在子组件内自定义事件触发父组件内的操作事件，对应的事件传递。

Vue.component("li-item",{
	props:['content','index'],
	template:"<li @click='del'>{{content}}部分</li>",
	methods:{
		del:function(){
			this.$emit('dell',this.index);
		}
	}
})
new Vue({
	el:"#app",
	data:{
		btn:"增加按钮",
		list:[],
	},
	methods:{
		addFn:function(){
			this.list.push(count);
			count++;
		},
		delFn:function(index){
			this.list.splice(index,1);
		}
	}
})

参考位置：https://github.com/yijianchuanxinwq/adelDom.git