v-model：创建双向数据绑定
过渡动画：Vue中提供<transition>标签进行封装
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .fade-enter-active, .slide-leave-active{ transition: opacity 5s; } .fade-enter,.slide-leave-to{ opacity: 0; } </style> </head> <body> <div id="app"> <!-- 属性name会跟框架追加的类名一致,<transition>标签只能套在要改变的标签外面--> <transition name="fade"> <h1 v-if="show">hello</h1> </transition> <button type="button" @click="show=!show">变换</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ show:true } }) </script> </body> </html>
原文：https://www.cnblogs.com/by-young/p/12961207.html