VueJs教程 : 超简单的MVVM

Posted VueJs技术分享

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueJs教程 : 超简单的MVVM相关的知识,希望对你有一定的参考价值。

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教程 : 超简单的MVVM的主要内容,如果未能解决你的问题,请参考以下文章

MVVM Light:在 XAML 中添加 EventToCommand 而不使用 Blend、更简单的方法或片段?

vuejs点滴

vuejs入门

vue 笔记一

一起学Vuejs----- MVVM

干货|初探Vuejs