Vue实例的作用范围是 el 选中的元素
建议使用div标签，id选择器

在标签里修改部分内容用{{}}

v-text 显示文本
v-html 文本后隐藏标签
v-on 为元素绑定事件，指令可以用@引出，绑定的方法在methods中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<body>
    <div id = "app"> 
        <!-- 全写-->
       <input type="buttom" value="v-on指令" v-on:click="doIt">
       <!-- 简写-->
       <input type="buttom" value="v-on指令" @click="doIt">

       <input type="buttom" value="双击指令" @dblclick="doIt">

       <!-- 事件绑定-->
       <h2 @click= "changefood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            food:"西红柿炒蛋"
        },
       methods:{
           doIt:function(){
               alert("点我");
           },
           changefood:function(){
               this.food+="很好吃"
           }
       }
    })
</script>
</body>
</html>

v-show 用于改变display
v-if 根据表达式的真假切换元素的显示状态