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

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

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

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

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

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

入门以及如何使用 vueJS(对,没错。就是 入门以及如何使用)

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

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

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

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

分别是 艾伦 AaronChokCoco

在通过大量时间去 去做 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年,总结篇 之 VueJS 如何入门(一)的更多相关文章

  1. vuejs小白入门

    后端做不好,是时候学习一下前端了,听说在很流行vue,那么久跟风学习一波. unbuntu下安装npm,然后安装node,这应该算是开发工具或者执行引擎吧. 感觉web前端框架怎么变,都是对html, ...

  2. MyBatis 实用篇(一)入门

    MyBatis 实用篇(一)入门 MyBatis(http://www.mybatis.org/mybatis-3/zh/index.html) 是一款优秀的持久层框架,它支持定制化 SQL.存储过程 ...

  3. MacOS下VUEJS简单入门

    微信搜索"艺术行者",关注并回复关键词"vue"获取课程资料 上传的在线学习视频(黑马和传智双元,感谢) VueJs概述与快速入门 学习之前假设你已了解关于 H ...

  4. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  5. .NET Core实战项目之CMS 第四章 入门篇-Git的快速入门及实战演练

    写在前面 上篇文章我带着大家通过分析了一遍ASP.NET Core的源码了解了它的启动过程,然后又带着大家熟悉了一遍配置文件的加载方式,最后引出了依赖注入以及控制反转的概念!如果大家把前面几张都理解了 ...

  6. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...

  7. 一篇不错的CUDA入门

    鉴于自己的毕设需要使用GPU CUDA这项技术,想找一本入门的教材,选择了Jason Sanders等所著的书<CUDA By Example an Introduction to Genera ...

  8. 接上一篇:vue零基础入门记录

    上一篇的vue项目已经搭建运行了起来,我用惯了idea这里也用的idea打开的项目.貌似其他软件写前端更好. 打开项目的项目路径是这样的 写惯了后台,第一眼看的时候感觉这个项目路径很乱,后面才知道我们 ...

  9. 想写一篇jvm的工具入门

    为什么要写一个jvm的工具入门呢,一是自己也不会,二是因为不会所以想学一下,还有就是这个确实很重要,对学习jvm有很多的用处,对定位问题有很大的便利,以前毕业那会我记得有个笔试,知道JAVA_HOME ...

随机推荐

  1. Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE

    Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE 晚上在测一个widget,前面测的好好的,后面再安装的时候发现如下错误:[2009-06- ...

  2. Android apk反编译基础(apktoos)图文教程

    本文主要介绍了Android apk反编译基础,使用的工具是apktoos,我们将用图文的方式说明apktoos工具的使用方式,你可以参考这个方法反编译其它APK试试看了 很久有写过一个广工图书馆主页 ...

  3. CodeForces 614C Peter and Snow Blower

    简单计算几何,只要算出圆心到多边形上的最短距离和最长距离即可 #include<cstdio> #include<cstring> #include<cmath> ...

  4. PHP foreach 遍历数组是打印出相同的数据

    https://www.toptal.com/php/10-most-common-mistakes-php-programmers-make PHP makes it relatively easy ...

  5. 关于OC和Swift使用GIT创建项目

    1.先进入码云,点击自己的头像 ->   ,2.里面有一个SSH公钥,点击   ,3.之后在终端输入 ssh-keygen -t rsa -C “xxxxx@xxx.com”,注意:”” 要用英 ...

  6. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  7. CentOS 6.4 利用 Awstats 7.2 分析 Nginx 日志

    一.配置Nginx 日志分割 (略) 二.配置FCGI 1.安装CPAN wget http://search.cpan.org/CPAN/authors/id/A/AN/ANDK/CPAN-2.00 ...

  8. 十大滤波算法程序大全(Arduino精编无错版)(转)

    源:十大滤波算法程序大全(Arduino精编无错版) 转载请注明出处:极客工坊  http://www.geek-workshop.com/thread-7694-1-1.html

  9. iOS开发——九切片

    这个虽然就我来说,感觉它没啥用,但还是放这吧,有时间了把内容补上.

  10. view添加阴影无效

    需求:需要给cell里的imageview添加阴影 问题:按照标准的代码添加阴影,然并卵:代码如下: imageview.layer.shadowColor = [[UIColor blackColo ...