vue介绍

一个vue实例是一个对象,数据放在data里面,前端通过数据来更新.当触发前端的事件时,实际是在改变data里面的数据,使其更新

1.声明式渲染

        数据和DOM绑在一起,所有元素都是响应式的.当我们试试改变app.message时,例子也会相应的更新

 

<div id="app">{{message}}</div>

var app = new Vue({
el:'#app',
data:{
message:'hello'
}
})

 

 

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 caibaojian.com'
},
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 caibaojian.com'
}
})

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'}
]
}
})