vue.js 知识点（四）

看完了vue.js的官方文档，大概对这些知识有了那么一点的了解了，但是很多具体的运用还不太清楚，现在就总结一下，关于其中的一些知识点的运用：

v-bind:  动态绑定指令，默认情况下，是给html 标签自带的属性绑定数据，比如input的value属性，a标签href属性等等。

　　　　v-bind:value 可以简写为  :value

v-model: 主要用于表单控件，比如input ,textarea 标签，主要用于双向数据绑定！

　　　　双向绑定：data数据的参数，为msg，  假如msg变化，则input输入框中会变化；若是input输入框中的改变，msg也会变化！

v-on :  　监听事件，v-on:click 点击事件， v-on:blur  失去焦点   v-on:focus  得到焦点；

　　　　可以简写为 @click    @blur   @focus　　

style样式： 在标签内添加属性

　　　　<div v-bind:class="{basicStyle:basic}">hello world</div>

　　　　第一个参数basicStyle，是标签的class属性，

　　　　第二个参数basic，是判断是否显示出这个样式的数据；

@click 和 @click.native  的区别：

　　　　普通标签的点击事件，用@click 就可以，比如点击出现，点击消失，

　　　　对于引用的组件上点击事件的时候，必须使用@click.native 　才能触发点击事件；

对于vue.js 也是可以进行css创建动画，不仅仅只有v-show

　　　　

　　　　<transition>这个过渡组件，包括3对状态，分别是：

　　　　进入：

　　　　v-enter：开始状态。

　　　　v-enter-active：过渡中。（active就是激活、正在的意思）

　　　　v-enter-to：结束状态。（to就是到达、结束的意思）

　　　　离开：

　　　　v-leave：开始状态。

　　　　v-leave-active：过渡中。

　　　　v-leave-to：结束状态。

　　例如想使用fade属性，则就是fade-enter,fade-enter-active,fade-enter-to

　　同理其他的也是一样的！

怎么通过input来进行数据的更新改变呢？

　　在react中，是统一通过setState（）统一更新数据，其他地方才能拿到更新过的数据！

　　但是在vue.js 中，我可以在点击事件中，通过监听事件的函数，直接更改数据

　　例如：

　　clickhandle:function(event){

　　　　　this.message = event.target.value;

　　}

　　message就是  数据，直接将this,message 修改为输入的内容。

　　这样在其他地方拿到的数据，就是更新过的数据！