Vue.js-组件化前端开发新思路

12017.04.14 18:31:25字数 6228阅读 5632

本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来放这些文章的，顺便也当图床用。

1. 认识Vue.js

Vue.js（读音 /vjuː/，类似于view）是一套构建用户界面的渐进式框架。

如果你有react或者Angular开发经验，你肯定不会对Vue.js感到太过陌生。Vue.js是踩在Angular和React肩膀上的后来者，它充分吸收了二者的优点，是MVVM框架的集大成者。我们只需要花10分钟写一点代码，就能大概窥见Vue的本质。

1.1 数据绑定

所有的MVVM框架要解决的第一件事都是数据绑定。首先要将Model的变化渲染到View中，当有用户输入还需要把用户的修改反映到Model中。所谓的MVVM就是这么来的。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script>
    var app = new Vue({
      el: \'#app\',
      data: {
        message: \'Hello Vue\'
      }
    })
  </script>
</html>

在浏览器打开这个HTML文件后，可以看到页面上显示了“Hello Vue”字样。我们在控制台输入app.message = \'hello world\'并回车后，发现页面上的消息也变成了“Hello World”。你会发现这一切都是响应式的！Vue在背后为我们搞定了数据到视图的绑定，然而这一切并没有什么黑魔法，这背后的原理是Object.defineProperty和对象的存取器属性。

vue的数据绑定

这是Vue官网的一张图，高度概括了响应式数据绑定的原理。使用Object.defineProperty将data中的所有属性都转为存取器属性，然后在首次渲染过程中把属性的依赖关系记录下来并为这个Vue实例添加观察者。当数据变化时，setter会通知观察者数据变动，最后由观察者触发render函数进行再次渲染。

理解了这个，就不难理解Vue中视图到数据的绑定了：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>Welcom {{ name }}!</p>
      <input type="text" placeholder="Enter your name" v-model="name">
    </div>
  </body>
  <script>
    var app = new Vue({
      el: \'#app\',
      data: {
        name: \'\'
      }
    })
  </script>
</html>

1.2 条件、循环与事件

Vue中可以很方便地进行条件渲染、循环渲染和事件绑定。我们将通过一个列表的例子来体验：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
      body, html {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 20px;
      }
      .students {
        margin: 0;
        padding: 0 0 20px 0;
        list-style: none;
      }
      .students > li {
        padding: 20px;
        border-bottom: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="students">
        <li v-for="student in students">
          <h3 class="name">
            {{student.name}}
            <span>{{student.age}}</span>
          </h3>
          <p v-if="Number(student.age) > 18">{{student.profile}}</p>
          <button v-on:click="sayHi(student.name)">Say hi</button>
        </li>
      </ul>
    </div>
  </body>
  <script>
    var students = [
      {
        name: \'Susan\',
        age: 17,
        profile: \'Hi there I\\'m a dog! Wang Wang!\'
      },
      {
        name: \'Amanda\',
        age: 21,
        profile: \'Kneel Down, Human! Miao~\'
      },
      {
        name: \'Lench\',
        age: 25,
        profile: \'боевой народ!!\'
      }
    ]
    new Vue({
      el: \'#app\',
      data: {
        students
      },
      methods: {
        sayHi (name) {
          window.alert(\'Hi \'+ name)
        }
      }
    })
  </script