1.v-on指令
<h1 v-on:click="fn()">{{flag?'你真棒':'你还需要努力'}}</h1>
<!-- v-on: vue的指令 可以简写为 @click -->
2. v-if指令
<!-- v-if是控制dom存在或者不存在的指令
为true 就代表存在 为false就会把dom删除 -->
<!-- <h1 v-if="flag1">我是虎胆小肥羊</h1>
<h1 v-if="flag2">我是小肥羊火锅</h1> -->
3.v-show指令
<!-- v-show是控制css的display的none或者block -->
<!-- 当值为false的时候，不会把dom删除，只会设置成display:none -->
<!-- <h1 v-show="flag1">现在人都喜欢吃海底捞不喜欢吃小肥羊了</h1> -->
v-if与v-show区别：
<!-- vue的存在就是为了减少了dom操作从而提高性能 -->
<!-- v-if频繁操作会减少性能 因为dom会频繁删除和添加 -->
<!-- v-show只是改变了css的样式display:none 或者block，
所以更推荐，更利于提高性能 -->
<!-- v-if推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载
例如权限菜单 -->
<!-- v-show 例如：tab页需要频繁切换，所以这种场景就推荐使用v-show -->
4.v-bind指令
5.v-clock指令
6.v-model指令
<!-- v-model能轻松实现表单输入和应用状态之间的双向绑定 -->
<!-- v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上 -->
<!-- :v-bind 叫动态绑定 -->
<!-- :value="msg" msg是vue实例化对象里面的属性-->
<!-- <input type="text" v-bind:value="msg"> -->
<!-- v-model是原生value属性的语法糖
实际改的还是value 但是v-model做了一些其他的处理，
实现了双向数据绑定 -->
例子：选择对应的选项可以打印出相应的选取内容
