Vue学习日记(三) v-if v-show v-for 定义组件

知识点一 v-if 和v-show的区别

v-if是判断为真时就会渲染这个标签，而v-show其实是设置他的display属性，它一直都是占用dom文档流的。

<div id="root">
		<div v-if="show">hello world</div>
		<botton @click="handleClick">toggle</botton>
		<ul>
			<li v-for="(item,index) of list" :key="index">{{item}}</li>
		</ul>
	</div>

new Vue({
			el:"#root",
			data: {
			   show:true,
			   list:[1,2,3]
			},
			methods:{
				handleClick:function(){
					this.show=!this.show
				}
			}
		})

知识点二 定义组件

使用Vue.component来定义组件。

使用$emit使子组件来触发父级事件。

<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
		     <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
		</ul>
	</div>

		//全局组件
		Vue.component('todo-item',{
			props:['content'],
			template:'<li @click="handleClick">{{content}}</li>',
			methods:{
				handleClick:function(){
					//子组件的删除,监听delete事件
					this.$emit('delet',this.index)
				}
			}
		})

		new Vue({
			el:"#root",
			
			data:{
				inputValue:'',
				list:[]
			},
			methods:{
				handleSubmit:function(){
					this.list.push(this.inputValue);
					this.inputValue=" "
				},
				handleDelete:function(){
					this.list.splice(index,1)
				}
			}
		})