Vue2.0入门(译)

字数 1231阅读 597

Vue简介

Vue是什么?

Vue (发音 /vju:/, 类似于view) 是构建用户界面的先进框架。它不像其他全能的框架,Vue是从头开始逐渐设计起来的。核心库只专注于视图层,它非常容易上手并且可以与其他库或现有的项目进行整合。在另一方面,当与相关工具和支持库结合使用时,Vue也能完美的驱动复杂的单页面应用。

如果你是一名有经验的前端工程师并且想知道Vue和其他库/框架的区别,查看 Comparison with Other Frameworks

入门

尝试Vue.js的最简单的方法用 JSFiddle Hello World example 。随意在另一个选项卡里打开它,接下来我们通过一些基础案例。如果你喜欢从一个包管理器下载/安装,查看 安装 页面。

声明式渲染

Vue.js的核心系统使我们能用声明的方式使简单的模块语法渲染数据到DOM中

HTML:

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

JS:

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

运行结果:

Hello Vue

我们已经构建了第一个Vue应用!看起来非常像仅渲染了一个字符串模块,但是Vue在底层做了很多事。DOM会自动响应数据的变化,我们怎么知道?打开你浏览器javascript控制台并设置 app.message 不同的值。在上述相关的更新中,你应该会看到渲染过例子。

除了文本插值,我们也能绑定元素属性,比如这样:

HTML

<div id="app-2">
    <span v-bind:id="id"><span>
</div>

JS

var app2 = new Vue({
    el: '#app2',
    data: {
        id: 'inspect-me'
    }
})

运行结果

inspect me

在这里我们遇到新的东西。你看到的 v-bind 属性是一个指令。指令前缀用 v- 表示它们是由Vue提供的特殊属性,正如你可能猜想到的,它们应用特殊反应行为渲染DOM。这基本来说:“在Vue实例中,绑定元素 id 变量到 id 属性”。

用浏览器开发工具查看元素,你会看到id的值是 inspect-me 。是的,如果在控制台里修改 app2.id ,它也会被更新。

<div id="app-2">
    <span id="inspect-me">Inspect me</span>
</div>

条件和循环

切换元素的显示/隐藏非常简单,如下:

HTML:

<div id="app-3">
    <p v-if="seen">Now you see me</p>
</div>

JS:

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})

运行结果:

Now you see me

在控制台继续输入app3.seen = false . 你会看到此信息被隐藏。

这个案例演示,我们不仅可以绑定数据到文本和属性,也可以到DOM结构里。除此之外,Vue也提供一些强有力的过度效果系统,当元素通过Vue被插入/更新/被移除时,这个系统能自动运用过渡效果。

还有不少其他指令,每个指令都有它自己独特的功能。比如,v-for 指令通过一组数组,能被用于显示数据项的列表。

HTML:

<div>
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

JS:

var app4 = new Vue({
    el: '#app-4',
    todos:[
        { text: 'Learn Javascript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
    ]
})

运行结果:

1. Learn Javascript
2. Learn Vue
3. Build Something awesome

在控制台里输入 app4.todos.push({ text: 'New item' }) 。你会看到一个新的选项添加到这个列表中了。

处理用户输入

为了让用户与应用互动,在我们Vue实例中,我们用 v-on 指令附加事件监听器来调用方法。

HTML:

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JS:

var app5 = new Vue({
    el: '#app-5',
    data: {
        message:'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

运行结果:

Hello Vue.js

点击按钮后结果

!sj.euV olleH

注意:在方法里,我们没有碰DOM,我们仅更新了应用程序的状态。所有的DOM操作是通过Vue处理的,并且你写的代码是专注于底层逻辑。

Vue也提供 v-model 指令使表单输入和应用程序状态之间轻易的实现双向绑定。

HTML:

<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message">
</div>

JS:

var app6 = new Vue({
    el:'#app-6',
    data:{
        message: 'Hello Vue!'
    }
})

运行结果:

Hello Vue!

如果你改变输入框里的值,显示的文本也会跟着变动。

使用组件组成

在Vue里,组件系统是另外一个重要的概念,因为它是使我们能够建立小型的,独立的,而且可重用的组件组成的大型应用程序的抽象。如果我们仔细想想,几乎任何类型的应用程序接口能被抽象成一棵组件树:

image

在Vue里,一个组件实质上是一个预先定义过的选项的Vue实例。注册组件是非常容易的。

JS:

// 定义一个组件为todo-item
Vue.component('todo-item', {
    template: '<li>This is a todo</li>' 
})

现在你可以用其他组件的模板来组合它。

HTML:

<ul>
    <!--
    创建一个todo-item组件实例输出数据中的dotos数组  
    -->
    <todo-item v-for="todo in todos"></todo-item>
</ul>

但是这为每个todo渲染相同的文本,这个不是我们要的效果。我们应该能够从父作用域传递数据到子组件里。让我们修改组件定义,让其接受一个 prop :

Vue.component('todo-item', {
    /* todo-item组件接受一个“prop”,
    它像一个自定义属性。这个属性叫todo 
    */ 
    props:['todo'],
    template:'<li>{{ todo.text }}</li>'
})

现在我们用 v-bind 传递todo数据到每个重复组件里。

HTML:

<div id="app7">
    <ol>
        <todo-item v-for="todo in todos" v-bind:todo="todo">
    </ol>
</div>

JS:

var app7 = new Vue({
    el: '#app-7',
    data: {
        todos: [
            'Learn JavaScript',
            'Learn Vue',
            'Build something awesome'
        ]
    }
})

运行结果:

1. Learn Javascript
2. Learn Vue
3. Build Something awesome

推荐阅读更多精彩内容