前段时间参与了一个微信小程序的项目，感觉小程序的这些数据绑定和模型渲染的处理方式还是挺容易理解。只要会一点前端基础，对照着小程序的API来写代码，跟平常制作也没啥区别。今天开始学习一下Vue.js。
一个Vue实例是一个对象，数据放在data里面，前端通过数据来更新。当触发前端的事件时，实际是在改变data里面的数据，使其更新。
1.声明式渲染
数据和DOM绑定在一起，所有元素都是响应式的。当我们试试改变app.message时，例子也会相应的更新
<div id="app">{{message}}</div>
var app = new Vue({
el:'app',
data:{
message:'hello'
}
})
从下面代码一路看下来，猜测{{myVar}}这样子在前端显示出来的只能用在纯文本中，而不能随便放。比如，放在某个属性里面，title=”{{title}}这样子是没有读出来data里面的title的，需要增加一个v-bind:title=”title”才行，不像小程序，{{myVar}}代表data数据，想放在那里就放在那里，只要你改变它的能力就行。
2.使用指令
带有前缀v-,以表示它们是Vue.js提供的特殊属性，它们会在渲染过的DOM上应用特殊的响应式行为。将元素节点某个属性与Vue实例的属性绑定到一起。
<div id="app-2" v-bind:title="title">test</div>
var app2 = new Vue({
el:'#app-2',
data:{
title:'hello world '+ new Date()
}
})
3.条件与循环
条件使用if判断某个元素是否存在，若存在则显示，否则会移除
<div id="app-3">
<p v-if="seen">Now you seen me</p>
</div>
var app3 = new Vue({
el:'#app-3',
data:{
seen:true
}
})
4.过渡效果
在显示与消失的过程，我们还可以使用一些css类来定义，默认有两个过渡。
进入和消失，两种过渡各自有两种状态，开始和结束
1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
假如我们需要给元素加一个默认的过渡
<transition> <p v-if="seen">如果没定义name则使用vue默认的类.v-enter和.v-leave</p> </transition>
假如我们有自定义动画效果，也可以另外给transition加上一个name值
<transition name="fade"> <p v-if="seen">我们就可以通过.fade-enter、.fade-leave来定义这两种过渡的方式了。</p> </transition>
CSS动画区别于CSS过渡的地方在于，元素会在animationend 事件触发时才删除元素.
5.循环语句
<ul id="app-4">
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
var app4 = new Vue({
el:'#app-4',
data:{
todos:[
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
6.绑定事件
使用v-on指令绑定一个监听事件用于调用我们Vue实例中定义的方法
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el:'#app-5',
data:{
message:'hello qdkfweb.cn'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
},
update:function(){
this.reverseMessage();
}
}
})
从上面的更新中可以看到this.message直接更新data里面的内容，方法是统一放在methods对象里面。方法作为methods里面的子方法。
7.双向数据更新
v-model:当更新了一个地方，会直接更新data里面的数据，更新了data也就是更新输出。
例如输入一个文本框
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el:'#app-6',
data:{
message:'hello qdkfweb.cn'
}
})
8.自定义组件
通过给组件增加props字段，将数据从父作用域传递到子组件。使用 v-bind 指令将 todo 传到每一个重复的组件。
<div id="app-7">
<ol>
<todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
</ol>
</div>
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
var app7 = new Vue({
el:'#app-7',
data:{
todos:[
{text:'learn JavaScript'},
{text:'learn vue'},
{text:'build something awesome'}
]
}
})
