学习Vue.js:介绍

文章目录

前段时间参与了一个微信小程序的项目,感觉小程序的这些数据绑定和模型渲染的处理方式还是挺容易理解。只要会一点前端基础,对照着小程序的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 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'}
]
}
})

演示

原文链接:学习Vue.js:介绍 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/vuejs-introduce.html)

发表评论

请登录后发表评论: