2016年，总结篇续如何从 JQ 转到 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 的错。

巴特西

2016年，总结篇续如何从 JQ 转到 VueJS 开发（一）

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

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

1 ： v-show

2 ： v-if (v-else)

3 ： v-for

4 ： v-bind

5 ： v-bind: class

6 ： v-bind:style

7 ： v-bind : href

8 ： v-click

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

最新文章

热门文章

巴特西

2016年，总结篇 续 如何从 JQ 转到 VueJS 开发（一）

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

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

1 ： v-show

2 ： v-if (v-else)

3 ： v-for

4 ： v-bind

5 ： v-bind: class

6 ： v-bind:style

7 ： v-bind : href

8 ： v-click

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

最新文章

热门文章

2016年，总结篇续如何从 JQ 转到 VueJS 开发（一）

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

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