Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
作用：实现数据的双向绑定，将编程的关注点放在数据上。
官网：https://cn.vuejs.org

Vue 快速入门

效果：左边输入，右边会跟着变。

Vue 常用指令

v-bind

如果写v-bind时出现红色，按alter+enter添加一个命名空间即可。
双向绑定和单向绑定用法的区别：

v-on

事件绑定的函数需要定义写Vue对象参数的methods属性中。
注意属性名methods有s。

v-if和v-show

<body>
<!--2.编写视图-->
<div id="app">
    <!-- 有四个条件：type值等于A或B或C或D，则显示"优秀"或"良好"或"及格"或"不及格"所在的div -->
    <div v-if="type=='A'">优秀</div>
    <div v-else-if="type=='B'">良好</div>
    <div v-else-if="type=='C'">及格</div>
    <div v-else>不及格</div>
    <hr/>
    <div v-show="type=='A'">优秀</div>
    <div v-show="type=='B'">良好</div>
    <div v-show="type=='C'">及格</div>
    <div v-show="type=='D'">不及格</div>
</div>
<script>
    // 3.创建Vue对象
    new Vue({
        el: "#app",
        data: {
            type: "C"
        }
    });
</script>
</body>