Vue.js教程 (1): 超简单的MVVM
发布在Vue.js 中文入门2015年2月27日view:119709MVVM
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

2015.2.26 更新:最新 0.11.5 中文版文档已发布至 http://cn.vuejs.org


注:本教程目前还是基于 0.10 版本的 API,而目前最新版本 0.11 API 有一些改动,请以上面链接的最新版本的文档为准,或者在此教程基础上参阅 0.10 -> 0.11 升级指南

Vue.js 不是一个框架,它只是一个提供 MVVM 风格的双向数据绑定的库,专注于 UI 层面。Vue.js 提供的核心是 MVVM 中的 VM,也就是 ViewModel。ViewModel 负责连接 View 和 Model,保证视图和数据的一致性。如果你用过 AngularJS,你会发现 Vue.js 同时还借鉴了 Angular 的 directive 和 filter 的概念,但是 API 要简单易懂得多,整体也轻巧得多。在组件化这一点上,Vue.js 和 facebook 的 React.js 更为接近,可以定义可复用和嵌套的组件类,并且可以在模板中声明式地使用组件。

Vue.js 的最大特点就是上手简单:你不需要理解 Angular 的依赖注入是什么东东、$digest 和 $apply, preLink 和 postLink 有什么区别,也不需要像 React 那样编译 JSX,更不需要像 Knockout 那样把所有的属性都变成函数… 在 Vue.js 的定义中,View 就是用户实际看到的 DOM 元素,而 Model 就是原生的JavaScript 对象。作为开发者,真正需要关注的只有 ViewModel,也就是 Vue.js 所提供的 Vue 构建函数:

var vm = new Vue({
    // 选项...
})

那么 ViewModel 是如何连接 View 和 Model 的呢?假设我们有这样的 HTML:

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

然后有这样的数据:

var data = {
    message: 'Hello Vue.js!'
}

我们要做的就是这样:

var demo = new Vue({
    el: '#demo',
    data: data
})

效果:http://jsfiddle.net/yyx990803/vjvMp/

看上去就像是渲染了个模板而已,但其实 Vue.js 已经建立了 DOM 和数据之间的连接,此时任何对 data.message 的改动,都会触发 DOM 的更新。而更神奇的是 v-model 这条 directive 是双向的数据绑定,当用户在输入栏里打字的时候,数据会被同步回 data.message 当中去。

另外方便的是,返回的 demo 这个 ViewModel 对象会自动代理 data 上的属性,所以你可以直接运行 demo.message = 'what!',能够得到和直接操作数据一样的结果。这个特点在之后会常常用到。

除了直接绑定一个数据值之外,你还可以在绑定中使用表达式:

<div id="demo">
    <p>{{message.split('').reverse().join('')}}</p>
    <input v-model="message">
</div>

效果:http://jsfiddle.net/yyx990803/vjvMp/1/ 你在输入框中输入的文字会被实时倒转。

怎么样,是不是很简单。如果你等不及下面的中文版教程,又对自己的英文比较有信心的话,赶紧去官网 vuejs.org 去看更多的教程和示例吧。

评论
发表评论
3个月前
赞了此文章!
9个月前
添加了一枚【评注】:1111
10个月前
添加了一枚【评注】:s
10个月前
赞了此文章!
10个月前

@烈日灼人-您可以先将页面的v-show=”false”,当数据请求完成后,再v-show=”true”,这样,就不会出现加载数据时的页面闪动

11个月前

很厉害

1年前

确实是,现在用vue 的越来越多了, WEB前端培训 先就业后付款,真正的按效果付费 对贷款说:NO 培训毕业考核通过后4个月内,找到第一份工作,按前三个月工资之和100%支付。 官网:http://www.xhanglu.com/

1年前
赞了此文章!
2年前

@尤小右 vm.$data包含了一些乱七八糟的属性和方法,不是纯正的请求数据啊,有没有这样的属性可用?

2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前

@烈日灼人- 先加载js噗噗~

2年前
赞了此文章!
2年前
赞了此文章!
2年前
添加了一枚【评注】:el 元素id data的参数可以直接传入一个json数组
2年前
添加了一枚【评注】:json数据
2年前
添加了一枚【评注】:{{}}内容被解析
2年前
添加了一枚【评注】:实例化 vm
2年前

大赞~

2年前
赞了此文章!
2年前

想问一下,图片数据可以吗

2年前

@烈日灼人- 坐等回复

3年前

浏览器先显示占位符的模板,然后vue再渲染内容,这样页面会出现闪烁的现象,这种问题Vue如何解决?

3年前
赞了此文章!
3年前
赞了此文章!
3年前
赞了此文章!
3年前
赞了此文章!
3年前
赞了此文章!
3年前

发现 React 被黑了… 手写 $ = React.DOM 然后 $.div 到底的飘过

3年前

@黑色技术 请看教程第5篇

3年前

请问一下,如果根据后台返回的数据遍历出li之类的数据,该怎么写?这种合适使用vue库或者合适使用mvvm模式嘛?

4年前

很赞,感谢作者

4年前

@0x0001 和 backbone 没有太大关系… backbone 完全没有数据绑定,需要借助第三方库。发送数据只需要直接 JSON.stringify(vm.$data) 然后 ajax 就可以了

4年前

顶…

4年前

这个和backbone是什么关系,傻傻得搞不清楚。。。 如果数据变化,自动发送到服务器要怎么写呢?之前一直是jQuery写,才刚接触这些库。

4年前

@尤小右 这教程写的也很给力,简洁明了。

4年前

@风尘 主要是针对单页富交互应用的。Vue.js 确实和 avalon 有点像,但文档和测试比 avalon 要全得多(咳咳,avalon没有单元测试)

4年前

@作者:这种模式是不是只适合一些特定应用?感觉平常做的大部分只是需要渲染个模版而已,没发现太多应用的场景。可好多都开始用这种模式。国内也有avalonjs。

4年前

@AriesDevil 不会的,Vue.js 本身只专注于 UI 层面,并且核心价值永远是 API 的简洁。其他功能比如路由、ajax 等只会提供可选的模块,并鼓励用户选择自己喜欢的方案。

4年前

希望这个库以后别变得像angular一样臃肿了

WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏