v-on,v-show,v-if,v-bind

vue不需要获取dom元素，直接通过this.data就可以获取data的数据，主要在于数据的改变

<template>
  <h2 @click="changeFood">{{food}}</h2>
  </template>

<script>
export default {
  data(){
    return{
      food:"西红柿"
    }
  },
  methods:{
    changeFood(){
      this.food+="好好吃"//获取元素
    }
  }
}
</script>

<style>

</style>

v-on指令

作用：为元素绑定事件
指令v-on：可以简写为@
事件绑定的方法写成函数调用的形式，可以传入自定义参数

@click="changeFood(666,'老铁')"
methods:{
changeFood(p1,p2){
console.log(p1,p2)//p1,p2是形参，可以自定义名字（666，老铁）
}
}

定义方法时需要定义形参来接受传入的实参
事件的后面跟上 .修饰符 @keyup.enter 可以对事件进行限制
@keyup.enter="changeFood"

v-show v-if

v-show通过改变布尔值，改变display：none（）
v-if 本质是通过操纵dom元素来切换显示状态，表达式为false时，会从dom树中移除（可以搭配template使用，v-show不行）
区别：v-show频繁改变时开销小
v-if可以搭配template使用，v-show不行