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

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

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

		
hello world
		toggle
		

			
{{item}}
		
	

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

知识点二 定义组件

使用Vue.component来定义组件。

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

		
		提交
		

		     
		
	

		//全局组件
		Vue.component('todo-item',{
			props:['content'],
			template:'
{{content}}
',
			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)
				}
			}
		})