Vue.js让web开发更简单--入门篇

本帖最后由叶建华老师于 2017-1-10 12:39 编辑

# 移动互联网的第二个浪潮
### 先聊一聊昨晚发生的事
- 昨晚，微信小程序刷爆了朋友圈，使用了```自选股、美团```等几个轻应用，体验还是很不错的，和原生开发的区别已经很细微了，这也标志着H5技术的愈加成熟。
- 从去年以来，React-Native技术的火爆，紧接着阿里开源Weex，再到微信的应用号、小程序的出现，基本都是封装了底层，自定义了标签，规范了自己的开发标准，开放了API，我们只需要专注于上层开发就OK了，但想成为大牛，我们需要不断去剖析它们的底层，而JavaScript是我们最重要的一个手段。

- 以上各种框架、平台的出现，标志着PC到移动互联网过渡的第一个阶段已经结束: ```把PC端的应用搬砖式的搬到移动端```。  那移动互联网的第二个浪潮又是什么呢？其中一个分支可能是：```场景化应用、万物互联```。  这意味着：我们的手机中可能不再需要很多的App，只要保持几个几乎每天都会用的就OK了，其他的场景式需求只需要一个统一的入口（二维码、关键字、...）,用完即走。  对于开发者而言，我们必须要做到一专多能才能适应大前端的人才需求。

- 如果喜欢我的文章，可以关注简书、公众号:```旋之华```， 也可以来小码哥，了解下我们的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>

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js入门</title>
</head>
<body>
   <div id="app">
       
       <input type="text" v-model="message">
        
       <p>{{message}}</p>
   </div>

- 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>
</body>
</html>
```
  
- v-for  根据数据遍历更新UI界面

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

// 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>
       
       <p v-if="score >= 80">成绩优秀!</p>
       <p v-else>成绩及格!</p>

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

```
  
  <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>

// 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>

data: {
            html: '<div><img src="http://upload.jianshu.io/users/upload_avatars/1268909/cf00e900409f.jpg?imageMogr/thumbnail/240x240/quality/100"><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">
    
    <img v-bind:src="imgSrc" width="200">
    <img :src="imgSrc" width="200">

<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>

<p :style="{backgroundColor: bgColor, width: width, height: height}">设置行内样式</p>
    <p :style="[styleA, styleB, styleC]">可以通过数组设置多个行内样式</p>
</div>

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, 包括自定义指令等。。。

大道至简 · 发表于 2017-02-08 13:21

跟你讲个故事：六一那天我玩lol，我进游戏就打了一句61快乐，有3个人说了谢谢，我赶紧退出，我果断退出游戏。

我不想静静 · 发表于 2017-02-08 09:06

围观楼主

崇拜 · 发表于 2017-02-08 08:39

祝愿小码哥越来越红火！！红红火火恍恍惚惚！

GHOST · 发表于 2017-02-08 06:59

好文章，必须帮顶！！！

踮脚怪 · 发表于 2017-02-08 03:41

活跃活跃论坛气氛~求楼主加好友

杨楷 · 发表于 2017-02-07 23:57

给楼主32个赞！！！！！

愚人花园 · 发表于 2017-02-07 22:05

1 先请大家注意我的头像。看到什么诡异的吗。 2 然后请大家仔细看我的ID，有什么内涵？ 3 没看出来就默念我的ID 十遍，然后结合我的头像一起看！！ 4 好了，你继续往楼下看吧，我就是来混脸熟的。

我不是很6 · 发表于 2017-02-07 21:47

跟你讲个故事：六一那天我玩lol，我进游戏就打了一句61快乐，有3个人说了谢谢，我赶紧退出，我果断退出游戏。

哥哥在哪儿 · 发表于 2017-02-07 21:33

跟你讲个故事：六一那天我玩lol，我进游戏就打了一句61快乐，有3个人说了谢谢，我赶紧退出，我果断退出游戏。

Vue.js让web开发更简单--入门篇

最新评论

正序排列

活跃教师 · 活跃度排行榜

精彩推荐