Vue.js开发入门(一)

Vue.js的介绍

1.vue是什么?

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或
既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
页应用提供驱动。

2.vue能做什么?

他与知名前端框架 AngularJS,Ember等一样,vue.js在设计模式上也是用了MVVM(Model-View-view-Model)模式
MVVM模式是由经典的软件框架MVC衍生来的。当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然
。View和ViewModel之间通过双向绑定(data-binding)建立联系。他主要还是一个js框架,帮你把DOM操作都绑定到数
据操作上，省去了开发者写操作DOM的代码，同时给了你一套规范，让你的代码更容易维护，可复用性更高，让开发体验更
好，可以轻松做出APP体验的页面。

3.vue.js和jQuery的区别

俩个共用一个css如下:

.h1{
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
        background: #fff;
        color: #69c;
        font-size: 14px;                
    }

1).jQuery代码:

HTML:
    <div id="app">
        <h1 id="text"></h1>
        <input id="input" type="text">
        <a onclick="empty()">点击</a>
        </input>
    </div>

JAVASCRIPT:
    var $text = $('#text');
    var $input = $('#input');
    var text = '这里显示输入的内容';
    $text.text(text);
    $input.val(text);
    $input.keyup(function(){
        $text.text($(this).val())  
    });
    function empty(){
        $text.text('');
        $input.val('');
    }

2).vue.js代码:

HTML:
    <div id="app">
        <h1 id="text"></h1> 
        <input id="input" type="text">
        <a @onclick="empty()">点击</a>
    </div>

JAVASCRIPT:
    new Vue({
       el:'#app',
       data:{
           text:'这里显示输入的内容'
       },
       methods:{
           empty:function(){
               this.text = '';
           }
       }      
    })

通过上面的代码,是不是发现,vue.js要比jQuery的代码要简单很多,而且业务逻辑也少了很多呢,vue.js只有用到了,才能慢慢体会他的强大。