移动互联网的第二个浪潮

先聊一聊昨晚发生的事

昨晚，微信小程序刷爆了朋友圈，使用了自选股、美团等好多个不同类型的轻应用，体验还是很不错的，不少和原生开发的区别已经很细微了，相对稳定的底层结合热更新、热部署，这也标志着各种围绕着H5的技术愈加成熟。
从去年以来，React-Native技术的火爆，紧接着阿里开源Weex，再到微信的应用号、小程序的出现，基本都是封装了底层，自定义了一整套标签、组件...，规范了自己的开发标准，开放了API，我们只需要专注于上层开发就OK了，但想成为大牛，我们需要不断去剖析它们的底层，而JavaScript无疑是我们最重要的一个手段。
以上各种框架、平台的出现，标志着PC到移动互联网过渡的第一个阶段已经结束: 把PC端的应用搬砖式的搬到移动端。那移动互联网的第二个浪潮又是什么呢？其中一个分支可能是：场景化应用、万物互联。这意味着：我们的手机中可能不再需要很多的App，只要保持几个几乎每天都会用的就OK了，其他的场景式需求只需要一个统一的入口（二维码、关键字、...）,用完即走。对于开发者而言，一个项目无论是PC还是移动，如果能够通过脚手架构项目，并可以充分结合热部署、热更新以及灵敏的代码风格检查，这是很美妙的事情。

如果喜欢我的文章，可以关注我、公众号:旋之华，也可以来小码哥，了解下我们的iOS/HTML5培训课程。本专题的所有资料请进入公众号直接下载。

前言

移动互联网这几年的重心肯定还是在手机上，未来可能是一块手表、一副眼镜。所以，接下来企业中Hybrid App开发的需求会更大。本专题主要是带着大家一起学习下Vue.js这样一个前端框架，本专题将通过三个阶段(全面入门、设计模式灵活运用、综合项目实战）来帮助大家灵活的把Vue.js应用到我们已有的项目中，并能够做出一个比较完整的移动端项目。本篇文章为第一个阶段的入门--指令篇。

Vue.js可以用来干嘛？

Vue.js准确来说：是用于开发web(PC端和移动端)界面的前端框架。因为Vue的关注点在开发的视图层，是自底向上增量开发的模式，所以非常容易与我们已有的项目整合。而且，Vue.js让我们可以非常灵活的实现响应数据绑定和开发复杂的单页应用。
目前比较成熟的开发方案是：vue+vue-strap+babel(es6)+webpack+vue-router。而且，Vue.js与jQuery的兼容非常好，非常适合MVVM思想的形成，从而后期可以非常快速过渡到React，angularjs等开发框架。
Vue.js在很多公司都在被使用，稍微大一点的公司比如：淘宝，美团，途牛，苏宁云商，饿了么等等，随着大前端的到来，很多公司会选择Vue.js作为以数据为核心的页面构建方案。

Vue.js快速入门

下载Vue.js生产版本的js文件，放入本地的目录中。来，一起体验下：
- Vue.js是通过类似构造函数方式的构造器简洁声明式的将数据渲染进 DOM 的系统




    
    Vue.js入门


   
       {{message}}

灵活进行数据绑定：




    
    Vue.js入门


   
       
       
        
       {{message}}

上述案例中用到了v-model指令，v-model指令可以在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

轻松搞定Vue.js中常用指令

v-text， v-html 可以通过给标签属性赋值的方式往标签内部插入文本和HTML网页。此外也可以在标签中间直接写入，比如：{{message}}, 两种的写法方式不一样，作用也不一样，后面案例中再分析其中不同点。

 


    
    v-for

v-for 根据数据遍历更新UI界面




    
    v-if


   
      
      
         {{ item.name }}

v-if 将根据" "中表达式的值的真假来做出相应的UI界面操作，表达式可以是true和false、三元表达式、条件判断等




    
    v-if


   
       旋之华的考试的分数是: {{score}} 
       
       成绩优秀!
       成绩及格!

       {{ result ? '结果是真的' : '结果是假的' }}

v-on 监听事件调用，主要的写法有 v-on:事件="方法" 和 @事件="方法"：

通过v-on，我们就可以操作数据控制界面的改变，这就在慢慢的去接近了MVVM的设计模式。具体请参照下面案例：




    
    v-on


   
       做出的题数:{{count}}
       每道题的分数:{{scoreValue}}
       最终成绩:{{countScore}}

v-show 可以控制标签中的内容进行显示和隐藏




    
    v-show

v-show 和 v-if 都能够实现标签的显示和隐藏，主要区别在于：v-if是预加载，调用的是js，显示的速度比较慢，一般用于逻辑比较复杂，又需要被多次调用的场景； v-show是没有预加载的，控制的是CSS标签，显示速度比较快。

v-bind
- Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。我们可以通过v-bind去绑定。此外，在 v-bind 用于 class 和 style 时，表达式的结果类型除了字符串之外，还可以是对象或数组。

场景案例如下：

    


    
    v-bind
    



    
    ![](imgSrc)
    ![](imgSrc)

    
    根据数据决定是否加载css的green样式
    同时设置多个css样式
    通过数组设置多个样式

    
    设置行内样式
    可以通过数组设置多个行内样式

写在最后

本篇文章主要介绍了Vue.js中常见的指令，这对于我们后面做综合应用还是比较重要的，下一篇主要会带着大家一起了解下Vue.js开放的API, 包括自定义指令等。。。