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 源码解析不错的 博客
在通过大量时间去 去做 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 的错。
