vue指令用法

v-for

	<template>
	  <div>
	      <ul v-for="(item,index) in option" :key="item.id">
	      		<li>{{item.name}}</li>
	      		<li @click="delClick(item.id,index,option)">删除</li>
	      </ul>
	  </div>
	</template>
	export default{
		data(){
			return{
				option:[{name:"香蕉",id:1},{name:"苹果",id:2},{name:"樱桃",id:3},{name:"西瓜",id:4}]
			}
		},
		methods:{
			delClick(id,item,list){	
				//第一种删除方法：this.option.splice(index, 1)
				//第二种删除方法：this.option = this.option.filter(item => { return item.id!= id })
			}
		}
	}

• Vue会基于key，移除key不存在的元素

v-bind

	<template>
	  <div class="main">
	      <a :herf="url"></a>
	  </div>
	</template>
	export default{
		data(){
			return{
				url:"http://www.baidu.com"
			}
		}

• 作用:当表达式的值改变时，响应式作用于DOM

v-on

<template>
	  <div class="main">
	      <span @click="add("1")" ></a>
	  </div>
	</template>
	export default{
		data(){
			return{
				url:"http://www.baidu.com"
			}
		},
		methods:{
			add(item){	
				console.log(item);
			}
		}

• 给元素绑定方法，绑定事件从methods中设置