Vue初探笔记

绑定事件

绑定事件可以用v-on，并且在函数中 this 指向了data,
一般文档操作需要转换思路，改为 对 app对象进行操作 比如

this.message = [String]

<pre class="lang:html decode:true"><!-- html --></pre>
<div id="app-5">{{ message }} <button> 翻滚吧！ </button></div>
<!-- js --> var app5 = new Vue({ el:"#app-5", data:{ 'message':"基拉", }, methods:{ reverseMessage: function(){ this.message = this.message.split("").reverse().join(""); } } })

结合css过渡动画

触发事件不一定要用v-on 使用@click也可以完成简单的点击触发事件
通过切换状态触发css动画，v-enter 可以用 transition的name来代替，比如 .silde-fade-enter
css动画也有技巧：

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

实例化的一些小事

如果我实例化的时候没有定义b变量，在监听a变化之后才定义值的话
第一次b会正常显示出来，但是第二次dom（{{ b }}）没有反应但赋值（vm.b）已经变了也就是，
第三次a改变，dom（{{ b }}）显示第二次的结果，但赋值（vm.b）和第三次同步
假如一开始就定义b，就不会发生这种玄学的事情