全面解析Vue.js 不会的赶紧戳进来！

一、什么是Vue.js?
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
二、Vue.js的特点？
1.简洁：HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
2.数据驱动：自动追踪依赖的模板表达式和计算属性。
3.组件化：用解耦、可复用的组件来构造界面。
4.轻量：~24kb min+gzip，无依赖。
5.快速：精确有效的异步批量 DOM 更新。
6.模块友好：通过 NPM 或 Bower 安装，无缝融入你的工作流。
三、引入一个Vue.js的包？

<script src="js/vue.min.js"></script>

四、Vue.js的小例子
【1】创建一个简单的Vue的应用
HTML段：

<div id="div1">{{text}}</div>

Script段：

new Vue({
    el:"#div1",
    date:{
          text:"我是第一个Vue.js的例子"
    }
})；

【2】双向数据的绑定（v-nodel）
HTML段：

<div id="div3">
    <input type="text" v-model="Text"/>
    <p>{{Text}}</p>
</div>

Script段：

new Vue({
    el:"#div3",
    date:{
    Text:"站位"
    }
});

【3】列表输出（v-for）
HTML段：

<div id="div2">
     <ul>
        <li v-for="x in text2">{{x.name}}{{x.sex}}</li>
     </ul>
</div>

Script段：

new Vue({
    el:"#div2",
    date:{
        text2:[
           {"name":"calay","sex":"女"},
           {"name":"jaden","sex":"女"},
           {"name":"cindy","sex":"女"},
        ]
    }
});

【4】条件判断（if）
HTML段：

<div id="div5">
   <div v-if="5>2">如果5>2我就显示</div>
</div>

因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个元素当做包装元素，并在上面使用v-if，最终的渲染结果不会包含它：

<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>

【5】过滤器
{{message | uppercase}}
这样就能输出message的大写了,过滤器也能串联在一起使用:
{{message | reverse | uppercase}}
这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:

Vue.filter('reverse',function(value){
  return value.split('').reverse().join('')
})

05
小巧
说起小巧，那应该首先要关注下Vue的源码大小，Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。
小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。
如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。
是不是感觉非常的灵活？那就用起来吧！

文章原创，未经许可禁止转载。