Vue.js
首先学习vue.js，应该要了解前段开发基础：html、css、js等，熟悉前端模块化基础，对ES6有初步的了解。
vue.js的官网：http://cn.vuejs.org
vue.js官网教程: http://cn.vuejs.org/guide/installation.html
vue.js的一个组件就是一个*.vue文件。
1.安装vue.js
推荐使用淘宝的npm镜像: cnpm
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm -v #查看版本
$ sudo cnpm install -g vue-cli #全局安装 vue-cli
$ vue #查看vue是否安装
$ vue init webpack my-first-project #创建一个基于 "webpack" 模板的新项目
# 创建项目后按回车，输入项目描述介绍、作者名、是否使用ESLint语法检查工具等（输入n即可）
$ cd my-first-project
$ sudo cnpm install # 安装依赖
$ npm run dev #运行项目
运行项目后，在浏览器里打开localhost:8080即可查看页面效果，可进行热更新。另外在编辑项目过程中，一般在项目目录src下编写代码文件。像vue.js这样来编写页面其实就是进行模板渲染的应用。
2.vue.js组件的重要选项
- data是一个对象，代表数据
- methods - 方法
- watch - 监听数据方法等变化
模板指令:
数据渲染: v-text 、v-html 、{{}}
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>
控制模块隐藏: v-if 、v-show
<p v-if="isShow"></p>
<p v-show="isShow"></p>
渲染循环列表: v-for
<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
事件绑定: v-on
<button v-on:click="doThis"></button>
<button @click="doThis"></button>
属性绑定: v-bind
<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, {classB: isB, classC: isC}]"></div>
3.总结：
- new一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。
- 其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。
- vue对象里的设置通过html指令进行关联。
- 重要的指令包括
- v-text 渲染数据
- v-if 控制显示
- v-on 绑定事件
- v-for 循环渲染 等
