2016年，总结篇 之 VueJS 如何入门（一）

接着 2016 年的总结，我们来看看 2016年 国内最火且没有之一的前端MVVM 框架 VueJs

虽然 到写文章的这个时间点，VueJs已经发布了 2.1.x 了， 但是对于很多 Vuejs 的初学者来讲，我建议还是 从 VueJs 1.x 的最后一个版本开始看。

毕竟如果你掌握了 1.X 那么你在学习 2.X 的时候，可能只需要一天时间，就能掌握，真的 是一天教会你 VueJs 感觉不要太爽噢~

不要问我为什么，还是那句话，你试过就知道。

这次就不过多的废话了，毕竟 深V 说 “你能不能深入点，再深入点...”

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

入门以及如何使用 vueJS（对，没错。就是 入门以及如何使用）

那么我们来思考一个问题， 学习一款框架。什么样的程度才算是入门，以及学习一门框架的方式方法。（每个人可能都不一样，但是我们还是要总结一下）

从一个 陌生的 框架 。比如之前的 JQ 的学习 进程应该是这样的。

在没有构建的基础上，先是引入这个库，然后开始照着文档开始写 最简单的 DEMO =》 尝试着把文档中介绍的大部分的API 都自己写一遍 =》 实际的项目中去应用发现坑 =》 解决遇到的坑 =》最后在提升原理层面

这里我推荐两个 做JQ 源码解析不错的 博客

分别是 艾伦 Aaron 、 ChokCoco

在通过大量时间去 去做 JQ 的源码解析，一方面能够提升你在 JS 语言 的理解，加深对 JS 语法、闭包、继承 等多方面的提升， 另外一方面也加深了你对 JQ 的理解。所以好处多多

后续，也会出JQ 源码分析的文章（希望站在 巨人的肩膀上可以看的更远）

欢迎访问 vuejs 中文社区 ， http://vuejs.com.cn

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

这里讲完了 我们熟悉的 JQ 这个库的 学习曲线。那么我们开始思考一下 Vue 这个框架，应该如何下手呢？

总结一个模式吧，任何一款框架的学习，一定是 一边手写 DEMO 一边 看文档 API =》 加入构建 =》 项目应用 =》 发现坑 =》 查找 issues 解决坑

当然 这些环节中 发现坑 和 解决坑 的过程一定是艰难的。 渡过了这个时期，剩下的就是手到擒来。 基本框架以内的问题，均能够去解决。

那么下面，我就介绍一些 入门级 API （指令 或者 方法）

1.1 关于 vueJS 系统自带常规指令的用法

1 ： v-show

	<div v-show="true">
		this is true
	</div>

原理： 类似我们在使用 JQ 时候的时候控制 DOM 显示隐藏 的 display：none / block

因为在还没有看 Vue 的源码的前提下，我们可以通过 改变 属性值 来查看 View 层的变化

这里就是 动态的给对应的 Dom 添加了一个 style 的 display 的样式

2 ： v-if (v-else)

	<div v-if="true">
		this is A ( true )
	</div>

	<div v-else>
		this is B ( fasle)
	</div>

原理： 类似我们在使用 JQ 时候的时候 动态的 添加/删除 DOM

eg： var Dom = $(" <div title='香蕉'>香蕉</div >")  body.append(Dom)  /  Dom .remove()

熟悉 JQ 的同学应该 很容易就可以查看到 其中的原理了。是不是很简单

3 ： v-for

	<div>
		<ul>
			<li v-for='item in items'>
				{{item.name}}
				<span>{{item.age}}</span>
			</li>
		</ul>
	</div>

	new Vue({
		el: 'body',
		data: {
			items: [
				{name: 'zhangsan', age: 21},
				{name: 'lisi', age: 22},
				{name: 'wangwu', age: 23},
				{name: 'zhaoliu', age: 24}
			]
		}
	})

注一： *** v-for 的 render 效果如下***

	<div>
		<ul>
			<li> zhangsan <span>21</span> </li>
			<li> lisi <span>22</span> </li>
			<li> wangwu <span>23</span> </li>
			<li> zhaoliu <span>24</span> </li>
		</ul>
	</div>

这个 v-for 如果没有接触过 上篇文章中提到过的 TP 这类MVC 框架开发的同学，可能稍微难以理解一点。

那这里我们还是拿 JQ 的例子来说吧

在 JQ 开发中，我们常常会用 字符串 拼接的方式来 解决 ajax 返回数据的 显示。 如果ajax返回一个数组的话，

我们就会在返回的时候 用 for 循环 来 生成我们最后想要是 字符串 然后 再 append 到对应的 节点位置。

但是在 vue 中就不存在 字符串拼接，那样看着 辣眼睛的代码 啦 是不是 很清爽的感觉啊

4 ： v-bind

	<div>
		<span v-bind='isA'></span>
	</div>

	new Vue({
		el: 'body',
		data: {
			isA: 'this is dataA'
		}
	})

注一： ***v-bind 的 render 效果如下***

	<div>
		<span>this is dataA</span>
	</div>

注二： v-bind 同样也可以直接 用 胡子标签替换

	<div>
		<span> {{isA}} </span>
	</div>

这里我们同样用JQ 的例子 来解释 为什么会是这样子的

在JQ 中如果，我们需要动态的去展示一个 属性值的话， 我们首先 需要 获取节点 $ =》 然后再生成 拼接之后的字符串 =》 然后再 append 到对应的节点位置 =》 属性值发生改变 =》我们又需要改变一下 我们拼接是字符串 =》 再 append 到对应的节点位置

但是在 Vue 中 就会简单很多。如上图。 当 data 对象中属性值发生改变，vue 实例化过程会给其属性均添加 getter setter 方法去监听其值的改变，最后反应在视图上。根本不需要我们手动去改任何东西

5 ： v-bind: class

	<div v-bind:class="{'active': isActive}">
		<span> {{isA}} </span>
	</div>

	// 这里是css文件
	.active{
		color: red;
	}

	new Vue({
		el: 'body',
		data: {
			isA: 'this is dataA',
			isActive: true
		}
	})

注一： ***v-bind:class 的 render 效果如下***

	<div class="active">
		<span> this is dataA </span>
	</div>

注二： ***v-bind:class 同样也可以直接 用 : class 简写 ***

	<div :class="{'active': isActive}">
		<span> {{isA}} </span>
	</div>

这里是 动态的给节点 添加 / 删除 Class 样式。 在JQ 中我们通常是 先获取节点 $ =》 再 $.addClass('xxx'); => 删除的话 $.removeClass('xxx')

啊，长时间的写 Vue 再让我去写JQ 好难受啊啊啊啊啊

6 ： v-bind:style

>  注一： ***v-bind:style 的用法同 v-class  类似***

	<div v-bind:style="{ color: isColorA, fontSize: fontSize + 'px'}">
		<span> this is dataA </span>
	</div>

	new Vue({
		el: 'body',
		data: {
			isA: 'this is dataA',
			isActive: true,
			isColorA: blue,
			fontSize: 20
		}
	})

注二： ***v-bind:style 的 render 效果如下***

	<div style="color: blue; font-size: 20px;">
		<span> this is dataA </span>
	</div>

注三： ***v-bind:style 可以 简写如下 ***

	<div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
	</div>

这里是 动态的给节点 添加 / 删除 Class 或 style 样式。 在JQ 中我们通常是 先获取节点 $ =》 添加样式的话 $.css('height': "20px") => 删除样式 $.removeAttr("style")

难受。

7 ： v-bind : href

>  注一： ***v-bind : href 的用法同 v-class  类似***

	<div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
		<a v-bind:href="hrefUrl"> this is a link </a>
	</div>

	new Vue({
		el: 'body',
		data: {
			isA: 'this is dataA',
			isActive: true,
			isColorA: blue,
			fontSize: 20,
			hrefUrl: 'http://h5.runjiaoyu.com.cn'
		}
	})

 注二： ***v-bind : href 的 render 效果如下***

	<div style="color: blue; font-size: 20px;">
		<span> this is dataA </span>
		<a href='http://h5.runjiaoyu.com.cn'></a>
	</div>

注三： ***v-bind : href 可以 简写如下 ***

	<div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
	</div>

注四： ***v-bind : href  同样也可以可以 简写如下 ***

	<div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
		<a href={{hrefUrl}}> this is a link </a>
	</div>

同样 当我们同JQ 去改变某个 a 标签的 href 的值的时候， 首先获取a标签节点 $ =》 改变它的值 $.attr('href', 'www.xxx.com');

继续难受。

8 ： v-click

	<div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
		<a href={{hrefUrl}}> this is a link </a>
		<button v-click='toDo($index)'> click Me </button>
		<button v-click='nextToDo($event)'> click Me </button>
	</div>

	new Vue({
		el: 'body',
		data: {
			isA: 'this is dataA',
			isActive: true,
			isColorA: blue,
			fontSize: 20,
			hrefUrl: 'http://h5.runjiaoyu.com.cn'
		},
		methods: {
			toDo: function() {
				// to do something
			},
			nextToDo: function(e) {
				console.log(e.target)
				// to do something else
			}
		}
	})

注一： ***v-click   可以 简写如下 ***

	<div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
		<span> this is dataA </span>
		<button @click='toDo'> click Me </button>
		<button @click='nextToDo'> click Me </button>
	</div>

在 JQ 中我们 去给 节点绑定方法，首先肯定是获取节点 $ =》 然后 $.addEventsListener('click', func) / $.on('click', func)。 这类闭包写多了，代码异常难看，讲真。

不信你看看上面的 Vue 的代码。

1.1.2 关于 vueJS 、 avalon 、 Knockout 等 MVVM 标签渲染 原理解读

	var greeting = 'my name is $(name),age $(age)';
	var result = greeting.render({name:'XiaoMing',age:11});
	console.log(result); // my name is XiaoMing,age 11

我们给出一个 render 的方法 实现以上需求

代码如下：

String.prototype.render = function (obj) {
    var str = this, reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\$\\('+ v +'\\)', 'g');
        str = str.replace(reg, obj[v]);
    });

    return str;
}

var greeting = 'my name is $(name),age $(age)';
var result = greeting.render({name:'XiaoMing',age:11});
console.log(result); // my name is XiaoMing,age 11

最后再提一点 体积。 JQ 现在 是 100K 左右， Vue 最小 30K 左右。

Vue 看起来就像是一个灵活的 小猴子呀。

此章节到此结束 文档已 归置 github

可能这个时候又有同学要问了，卧槽，不是说好了要介绍 Vue 的入门么？

为什么你的入门里面，基本上都是讲的 用法什么的，对于我这个一无所知的 我来说很难理解啊。

记住Vue 作者 尤雨溪 曾经说过的一句话，如果 学习Vue 通过看文档都不能学会，那就是 Vue 的错。