实战Vue

已经有一个多月没更新博客，因为最近实在太忙，没额外的时间去整理和总结，后续会一步一步弄上去的。

前面两章分别介绍了Vue，本章就直接从代码入手开始讲解Vue。

本章东西讲解会特别多，因此先给大家介绍下使用到的东西：

1. git ：获取github上面的开源项目及Demo
2. node.js ：使用npm获取安装需要的框架及插件
3. webpack ：搭建前端工程化的框架
4. vue ：轻巧的MVVM框架
5. vue-loader ：组合webpack与vue，方便解析*.vue格式的web组件化文件
6. vue-router ：实现SPA单页应用所用到的路由
7. vuex： 共享全局vue实例变量
8. fastclick ：消除移动端点击时出现的300ms延迟，使用户点击更爽，解决点透问题
9. zepto ：需要用到其DOM操作及Ajax
10. animate.css ：CSS3动画实现页面与页面之间的跳转
11. http-server ：静态访问本地资源
12. CommonJS规范 ：进行模块化的代码编写
13. ES6规范：JavaScript的规范父级

1.准备工作

既然要使用Vue实现数据绑定和组件化，就需要编写*.vue后缀的文件，因此需要使用Sublime的高亮显示和自动提示功能来让前端开发更加舒适，因此需要安装Vue.js所对应的插件。

当我安装完后，用Sublime打开*.vue后缀的文件还是无法高亮，问题是：

因此，当我把SASS、CoffeeScript所对应的高亮插件也安装后，终于变颜色了。

2.搭建架构环境

该架构的成功搭建不是一时半会就能讲解清楚的，因为东西实在太多，vue+vue-loader+webpack+vue-router+vuex的搭建，fastclick+zepto+animate的使用，它们之间是如何组合在一起的，后续有时间会补充，因为是实战Vue，所以着重点会放在Vue，搭建完成的架构目录如下：

具体说明，请看：

3.语法讲解

3.1 Vue 与 JQuery

在语法讲解之前，我想先说下自己使用vue的感受。
Vue的学习成本稍大，因为，引用以前学的文章《初识Vue.js》的最后一句话：

现阶段前端人员最大的问题不是技术实现，而是思维转变。

所以在思维转变的过程是很需要时间的。
以前前端根深蒂固的思想就是使用过JQuery、Zepto等框架造成的，当年JQuery和Zepto的出现，是因为当年浏览器性能不够强大，为了解决各浏览器之间的兼容性，为了解决简化DOM操作等问题。
可如今浏览器性能已经变得非常强大，及使用IE浏览器的用户也越来越少，因此上面的问题已得到很好的解决。
以前的前端框架被硬件所制约，不得不为了硬件而妥协了业务。
而如今浏览器已强大到原生Native研发可以自己创建和销毁浏览器（webview），如QQ、淘宝、微信 App等。

JQuery、Zepto的核心思想是封装DOM操作，它们认为一切的的操作都是从查找元素开始的，这个封装只是代码层面的封装。
比如：

scene1.我要获取该页面的某个元素或多个元素时，步骤是：

1.为这个元素定义唯一标示符

1
2
3
4
5
6
7

<div>1</div>
<ul>
    <li id='first' class='selected'>列表一</li>
    <li>列表二</li>
    <li class='selected'>列表三</li>
</ul>
<div>2</div>

2.根据这个唯一标示符从该页面找元素

1
2
3
4
5
6

var first=document.getElementById('first')
var selected=document.getElementsByClassName('selected')

//JQuery写法，写法是不是简单多了
var first=$('#first')
var selected=$('.selected')

scene2.我要点击个按钮，同时隐藏两张图片
1.先定义两张图片和一个按钮

1
2
3
4
5

<div>
    <img src='xxx'></img>
    <img src='xxx'></img>
</div>
<button id='btn'>隐藏按钮</button>

2.给按钮添加点击事件，使其两张图片隐藏

1
2
3
4
5
6
7
8
9
10
11

var btn=document.getElementById('btn')
btn.addEventListener('click',function(){
    var imgs=document.getElementsByTagName('img')
    for(var i in imgs){
        imgs[i].style.display='none';
    }
})
//JQuery写法，写法是不是简单多了
$('#btn').on('click',function(){
    $('img').hide();
})

下面来说Vue、Angular，
Vue、Angular的核心思想是根据业务封装数据展示页面，它们认为一切的的操作都是从数据开始的，这个封装是业务层面的封装。
先写到这，待续。。。