Vue.js，第一次总是从一个例子开始
自从今年开始，去业内参加各类前端交流会每每都会多多少少提及Vue.js，目前Vue.js最新版本为2.1.3。Vue.js做为目前前端最热门的库之一，为我们快速构建并开发前端项目又多了一种思维模式。本文通过一个例子帮忙大家初步认识和了解Vue.js，并能够在代码字里行间掌握Vue.js一些基础知识。
简介
Vue.js是一个提供MVVM风格的双向数据绑定的库，专注于VM，也就是ViewModel，ViewModel绑定了Dom Listeners和Data Bingings监听器，从而保证视图和数据两者之间的一致性。熟悉AngularJS的人会发现Vue.js还借鉴了AngularJS的directive和filter的概念，但是API就比较简单易懂，整体也就轻巧了许多，上手比较容易。
例子是一个单页面简单应用，一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。总体界面如下：
实例
技术栈
为了我们快速使用Vue.js构建前端项目可能会用到：
vue-cli：Vue.js脚手架，用于自动生成Vue.js项目。
vue-router：Vue.js提供前端路由工具，实现页面路由控制，局部刷新和按需加载等。
vuex：Vue.js提供的状态管理工具，用于统一管理和存储项目中的各种数据。
ES6：Vue.js普遍使用ES6编写代码。
NPM：Node.js包管理这个就不用多说了。
Webpack：最近很火的一款强大文件打包工具。
Babel：装X必备工具，将ES6代码转化成浏览器兼容的ES5代码插件。
组件化
在Vue.js项目中，出现一个比较重要的概念就是<em>单文件组件</em>。单文件组件包含了一个功能或者模块的html、JS及CSS，并保存于以.vue后者结尾的文件中。在.vue文件里，可以通过template标签编写html模板代码块，在script标签中写JS代码逻辑以及在style标签中写CSS，当然也可以是sass后者less。项目模块组件化，个人比较喜欢从页面功能结构进行划分，如下：
代码块
Vue.js不像AngularJS需要理解依赖注入是什么东西、$digest和$apply区别等，也不需要像React那样编译JSX。在Vue.js定义中，View就是用户实际看到的DOM元素，而Model也是原生的JS对象，对于它来说，开发者就只需要关注一个new Vue构建函数。对于单页面应用来说，我们需要一个主入口组件(app.vue)来统一所有的模块组件并绑定应用在页面DOM上，直接看关键代码分析:
// index.html 关键代码
<!-- Vue.js绑定操作DOM -->
<div id="chat"></div>
<!-- 引入代码 -->
<script src="dist/vue.js"></script>
<script src="dist/main.js"></script>
由于例子是使用Webpack进行构建,使用入口JS交由main.js负责
// main.js 关键代码
// 引入app.vue
import app from './components/app';
// 构建函数
new Vue(app);
主入口组件，也是整个项目的关键，app.vue负责构建定义及页面组件归集
// app.vue 关键代码
<script>
// 组件归集引入
import store from './card';
...
export default {
el: '#chat',// 绑定到DOM
data () {// 数据对象
let serverData = store.fetch();
return {
// 登录用户
user: serverData.user,
// 用户列表
userList: serverData.userList,
// 会话列表
sessionList: serverData.sessionList,
// 搜索key
search: '',
// 选中的会话Index
sessionIndex: 0
};
},
computed: { // 创建完成后需要执行的代码块
session () {
return this.sessionList[this.sessionIndex];
}
},
watch: {
// 监听每当sessionList改变时，保存到localStorage中
sessionList: {
deep: true,
handler () {
store.save({
...
});
}
}
},
components: {// 组件指令初始化定义
card, list, text, message
}
};
</script>
在分析页面html模板标签块之前，我们需要了解Vue.js提供的指令及修饰符，常见有：
v-model：类似AngularJS的ng-model，用于数据model双向绑定
v-text：用于更新绑定元素内容，类似jQuery的text()
v-html：用于更新绑定元素的html内容，类似jQuery的html()
v-if：用于判断表达式的条件真假来判定是否渲染元素
v-show：用于判断表达式的条件真假来判定是否显示元素
v-for：遍历数据进行渲染元素或模板
v-on:+方法名：用于元素绑定事件，如v-on:click
@+命名：事件修饰符，用法同v-one如@click
:+命名：属性修饰符，如:alt="图片的alt"
主入口组件页面html模板标签块：
// app.vue 关键代码
<template>
<div>
<div class="sidebar">
<!-- 指令标签card 属性prop默认为单向绑定需要使用.sync强制双向绑定-->
<card :user="user" :search.sync="search"></card>
<list :user-list="userList" :session="session" :session-index.sync="sessionIndex" :search="search"></list>
</div>
<div class="main">
<message :session="session" :user="user" :user-list="userList"></message>
<text :session="session"></text>
</div>
</div>
</template>
主入口组件页面style块，在这你可以使用sass或less语法：
// app.vue 关键代码
<style lang="less">
.m-text {
height: 160px;
...
textarea {
padding: 10px;
...
}
}
</style>
由于篇幅有限，就不一一贴出所有组件代码。基本上所有组件代码块基本上是一样，挑一个有别于上面分析的app.vue代码块的list.vue做最后分析：
// list.vue 关键代码
<script>
export default {
props: ['userList', 'sessionIndex', 'session', 'search'],//属性定义
methods: {//方法体定义
select (value) {
this.sessionIndex = this.userList.indexOf(value);
}
},
filters: {//过滤器定义
search (list) {
return list.filter(item => item.name.indexOf(this.search) > -1);
}
}
};
</script>
<template>
<div class="m-list">
<ul>
<!-- 这里使用到v-for过滤器search，class根据当前会话进行选择赋值，@click事件修饰符等-->
<li v-for="item in userList | search" :class="{ active: session.userId === item.id }" @click="select(item)">
[站外图片上传中……(4)]
<-- 同AngularJS一样，可以直出数据到页面-->
<p class="name">{{item.name}}</p>
</li>
</ul>
</div>
</template>
最后
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
由于文章篇幅有限，就写到这里。最后，如果大家感兴趣的话可以点击下载例子的代码详细分析，谢谢！
