移动互联网的第二个浪潮

2017-01-09 本文已影响1261人撩课_叶建华

先聊一聊昨晚发生的事

昨晚，微信小程序刷爆了朋友圈，使用了自选股、美团等好多个不同类型的轻应用，体验还是很不错的，不少和原生开发的区别已经很细微了，相对稳定的底层结合热更新、热部署，这也标志着各种围绕着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 的系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js入门</title>
</head>
<body>
   <div id="app">
       {{message}}
   </div>
   
<!--引入Vue.js生产包-->
<script src="js/vue.js"></script>
<script>
    (function () {
        var app = new Vue({
            el: '#app',   // el是作用域
            data: {      // 数据，json格式
                message: '小码哥 旋之华'
            }
        })
    })();
</script>
</body>
</html>

灵活进行数据绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js入门</title>
</head>
<body>
   <div id="app">
       <!--
          数据关联在message, 只要文本框中的数据改变, p标签中的数据也会进行联动改变
       -->
       <input type="text" v-model="message">
        <!--
          <p>{{* message}}</p>  如果在前面加*号，则只会被加载一次
       -->
       <p>{{message}}</p>
   </div>

<script src="js/vue.js"></script>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: {
                message: '全局数据 一改全改!'
            }
        })
    })();
</script>
</body>
</html>

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

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

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<div id="app">
    <!--
       根据数据的类型往标签中动态注入内容
    -->
    <p v-html="html"></p>
    <p v-text="text"></p>
</div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    // 1. 构造器
    var app = new Vue({
        el: '#app',
        data: {
            html: '<div>![](http:https://img.haomeiwen.com/i1268909/75ea58436edb6483.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p>大家好,我是旋之华!</p></div>',
            text: 'Hello, world!'
        }
    });

</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
   <div id="app">
      <!--
        语法格式: xx of xxs
      -->
      <p v-for="item of items">
         {{ item.name }}
      </p>
   </div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    // 1. 构造器
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {name: '张三丰'},
                {name: '章四风'},
                {name: '张五分'},
                {name: '占六分'}
            ]
        }
    });

    // 2. 往构造器的数据数组中添加数据
    app.items.push({name: '占七分'});

    // 3. 从构造器的数据数组中删除数据
    app.items.pop();

    // 4. 往构造器的数据数组最前面插入元素
    app.items.unshift({name: '小二'});

</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
   <div id="app">
       <p>旋之华的考试的分数是: {{score}} </p>
       <!-- v-if:最终的运算结果, boolean类型 -->
       <p v-if="score >= 80">成绩优秀!</p>
       <p v-else>成绩及格!</p>

       <p>{{ result ? '结果是真的' : '结果是假的' }}</p>
   </div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            score: _.random(60, 100),    // 注意:在Vue的数据中心是具备运算功能的
            result: false                // 采用三目运算符的方式
        }
    });
</script>
</body>
</html>

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

  <!-- 完整语法 -->
  <a v-on:click="doSomething"></a>
  <!-- 缩写 -->
  <a @click="doSomething"></a>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
   <div id="app">
       <p>做出的题数:{{count}}</p>
       <p>每道题的分数:{{scoreValue}}</p>
       <p>最终成绩:{{countScore}}</p>
       <button v-on:click="plus">点我+1</button>
       <button @click="minus">点我-1</button>
   </div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    // 1. 构造器
    var app = new Vue({
        // 1.0 作用域
        el: '#app',

        // 1.1 初始数据
        data: {
            count: 0, // 已做题数
            scoreValue: 5, // 每题5分
            countScore: 0  // 总得分
        },

        // 1.2 定义方法
        methods: {
            // 做对一道题目
            plus: function () {
                this.count ++;
                if(this.countScore >= 100){
                    this.countScore = 100;
                    this.count = 100 / this.scoreValue;
                    alert('你已经对的够多了!');
                }
                this.countScore = this.count * this.scoreValue
            },
            // 做错一道题目
            minus: function () {
                this.count --;
                if(this.countScore <= 0){
                    this.countScore = 0;
                    this.count = 0;
                    alert('你已经不能再错了!');
                }
                this.countScore = this.count * this.scoreValue
            }
        },

        // 1.3 监听数据的改变
        watch: {
           "countScore": function () { // 监听总分数的变化
               if(this.countScore == 90){
                   alert('成绩达到优秀');
               }
           }
        }
    });

</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
</head>
<body>
<div id="app">
    <!--
       根据数据的类型往标签中动态注入内容
    -->
    <p v-html="html" v-show="flag"></p>
    <p v-text="text" v-if="flag"></p>

    <button @click="change">切换</button>
</div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    // 1. 构造器
    var app = new Vue({
        el: '#app',

        data: {
            html: '<div>![](http://upload-images.jianshu.io/upload_images/1268909-75ea58436edb6483.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p>大家好,我是旋之华!</p></div>',
            text: 'Hello, world!',
            flag: true // 用于控制标签的显示和隐藏
        },

        methods: {
            // 控制标签的显示和隐藏
            change: function () {
                this.flag = (this.flag == true) ? false : true;
            }
        }
    });

</script>
</body>
</html>

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

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

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

场景案例如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .green{
            background-color: green;
        }

        .size{
            width:100px;
            height: 100px;
        }

        .bg-color{
            background-color: orangered;
        }

        .class-A{
            background-color: red;
        }

        .class-B{
            width: 200px;
            height: 200px;
            padding: 100px;
        }

        .class-C{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--动态绑定标签的src属性-->
    ![](imgSrc)
    ![](imgSrc)

    <!--
    给v-bind:class一个对象,可以动态地切换class;
    此外, 也可以在对象中传入更多属性用来动态切换多个class,
    而且v-bind:class指令可以与普通的 class 属性共存
    -->
    <p :class="{'green': isGreen}">根据数据决定是否加载css的green样式</p>
    <p :class="{'size': isSize, 'bg-color': isBgColor}">同时设置多个css样式</p>
    <p :class="['class-A', 'class-B', 'class-C']">通过数组设置多个样式</p>

    <!--
    给v-bind:style一个对象,可以动态地切换style;
    -->
    <p :style="{backgroundColor: bgColor, width: width, height: height}">设置行内样式</p>
    <p :style="[styleA, styleB, styleC]">可以通过数组设置多个行内样式</p>
</div>

<script src="js/UnderScore-min.js"></script>
<script src="js/vue.js"></script>
<script>
    // 1. 构造器
    var app = new Vue({
        el: '#app',
        data: {
           imgSrc: 'http://h.hiphotos.baidu.com/image/pic/item/72f082025aafa40f7c884d31af64034f79f0198b.jpg',
           isGreen: true, // 加载green样式
           isSize: true,
           isBgColor: true,

           bgColor: 'blue',
           width: '200px',
           height: '300px',

           styleA:{
               fontSize: '30px'
           },

           styleB:{
               width: '200px',
               height: '200px',
               backgroundColor:'yellow',
               padding:'40px'
           },

           styleC:{
                borderRadius: '50%'
           }
        }
    });

</script>
</body>
</html>

写在最后

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