『翻译』Vue.js简介：Rendering, Directiv

开头

如果让我用一句话总结我对 Vue 的理解，我可能会这样说“它真的非常好理解”或者“它就像一个工具，我可以随心所欲的使用它，而又不会受制于它”。在我学习 Vue 的过程中，我非常的开心，因为它很有意思，很优雅。
这篇文章是我个人对 Vue 的了解。当我第一次学习 Vue 的时候，我希望能有一篇这样的文章帮助指导我学习。如果你想要通过权威的方式学习 Vue 的话，那么你可以参考 Vue 官网的指南，非常的详细，简单明了。

Vue.js简介（1）

文章系列

Part 1: Rendering, Directives, and Events
Part 2: Components, Props, and Slots (待翻译)
Part 3: Vue-cli (待翻译)
Part 4: Vuex (待翻译)
Part 5: Animations (待翻译)

Vue 吸取并融合了其它框架的成功之处，并且它的代码非常简洁，这是我非常喜欢它的一个原因。比如下面这些特点：

• 虚拟的 DOM 和灵活的组件，提供了一种 View 层优先，props ，并且类似于 React 的 Redux 式的存储方式。
• 类似于 Angular 的条件渲染和数据绑定方式。
• 在简单性和性能方面，受到 Polymer 的启发，Vue 采用了相同的 HTML 代码，styles 样式和 JavaScript 代码书写方式。

还有其它的一些相对于它的对手的优点，也让我觉得欣喜：更干净，更语义化的 API 文档，相比 React 更好的表现，和 Polymer 一样不采用 polyfills，并且是一个独立而又不像 Angular 那样固执己见的 MVVM 框架。

---

接下来我们继续，或许你亲自去阅读他们社区的与其他框架的比较会更好。它很值得一读，如果你更愿意去书写代码的话，那么你可以跳过它。

让我们开始吧！

让我们从 "Hello,world!" 开始。按照下面这样做你就可以开始了：

<div id="app">
 {{ text }} Nice to meet Vue.
</div>

new Vue({
 el: '#app',
 data: {
   text: 'Hello World!'
 }
});

DEMO
如果你对 React 很了解的话，这种写法你也一定觉得很熟悉。通过 JavaScript 创建变量，用双大括号模板引用变量，不同的使 Vue 直接采用 Html，而 React 采用JSX语法。JSX 语法很容易上手，但是
Vue 不用把 class 转化为 className 等简洁的写法，让我真的很喜欢它。你可能也注意到Vue非常的轻量，运行起来也很迅速。
接下来我们一起尝试下Vue的一些令人喜爱的特性：循环和条件渲染。

条件渲染

我创建了一个items对象，类似导航，以便我知道我可以重用它。把它定义为一个数组可能更有意义，方便以后动态地更改。如果按照原生的 JS 写法可能会是这样的：创建数组，然后创建空的字符串对象，再把数组的每个条目嵌套上 <li> 标签，最后在外面嵌套 <ul> 标签，最后使用 innerHTML 方法操作 DOM：

<div id="container"></div>

const items = [
  'thingie',
  'another thingie',
  'lots of stuff',
  'yadda yadda'
];

function listOfStuff() {
  let full_list = '';
  for (let i = 0; i < items.length; i++) {
      full_list = full_list + `<li> ${items[i]} </li>`
  }
  const contain = document.querySelector('#container');
  contain.innerHTML = `<ul> ${full_list} </ul>`;     
}

listOfStuff();

DEMO
没问题，但是有点凌乱。现在让我们用
Vue 的循环v-for实现同样的效果：

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

const app4 = new Vue({
  el: '#app',
  data: {
    items: [
      'thingie',
      'another thingie',
      'lots of stuff',
      'yadda yadda'
    ]
  }
});

DEMO

非常的简单明了。如果你了解 Angular，这种写法对你来说肯定很熟悉。这样的条件渲染方式非常的简单，清晰。如果你还在用传统的原生 JS 而且也在寻求改变，那么你可以很容易上手 Vue。

另外一个非常好用的指令是v-model，它可以动态绑定数据。像这样：

<div id="app">
  <h3>Type here:</h3>
  <textarea v-model="message" class="message" rows="5" maxlength="72"></textarea><br>
  <p class="booktext">{{ message }} </p>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      message: 'This is a good place to type things.'  
    }
  }
});

DEMO

通过上面的例子，你可能注意到两点。首先，页面没有进行任何 DOM 操作，就能够动态的更新显示的文本内容。Vue 能够通过 v-model 指令在 <textarea> 和 <p> 标签之间创建双向的数据绑定，来实现页面展示数据的动态变换。另外一点，我们把数据存放在函数里面，没有调用这个函数，它自己就工作了。像以前的例子一样，我们也可以把它放在一个对象内部。但是它只会在 Vue 实例或者完全相同的应用下工作。Vue 实例可以引用它，并且所有的子组件也可以获取它的数据。把数据存储在函数里面是一个很好的做法，因为当我们开始使用组件并且还想让各组件保持各自的状态，我们就可以采取这种存储方式。
这些并不是唯一的简单的输入绑定，v-if可以切换，v-show显示或隐藏 DOM 。
这儿有更多的指令可供你参考。

事件处理

数据绑定确实不错，但是没有事件的处理我们什么也做不了，所以我们跳过它，开始讲事件处理！这一部分也是我非常喜爱的部分。我们将通过绑定和监听器的去监听 DOM 事件。

new Vue({
  el: '#app',
  data() {
   return {
    counter: 0
   }
  },
  methods: {
   increment() {
     this.counter++;
   }
  }
});

<div id="app">
  <p><button @click="increment">+</button> {{ counter }}</p>
</div>

我们创建了一个方法叫做increment，并且我们可以看到它自动绑定了this，然后引用了此实例中的数据和组件。不需要我们手动去操作。
Methods并不是唯一创建自定义函数的方式，你还可以通过watch方法。两种方式的不同之处主要在于methods适合小的同步计算，而watch则更有助于处理多任务的，异步的，消耗资源的不断更新数据的操作。我经常会用watch去实现动画效果。
让我们再深入一点，看看如何传递事件病进行一些动态的样式绑定。如果你还记得上面表格的内容，你可以使用快捷写法:代替v-bind，接下来我们可以通过:style或者:class方式很容易的绑定样式并且传递状态。像这样的绑定方式还有很多。
在下面的例子里面，我们采用hsl()方法——是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的方法。当我们的鼠标在屏幕上运动时，指针在屏幕上的位置就会发生变化，背景风格将得到相应的更新。在这里我们使用了ES6的模版字面量。

<div id="app" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }" @mousemove="xCoordinate">
  <p><button @click="increment">+</button> {{ counter }} <button @click="decrement">-</button></p>
  <p>Pixels across: {{ x }}</p>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      counter: 0,
      x: 0
    }
  },
  methods: {
    increment() {
      this.counter++;
   },
   decrement() {
     this.counter--;
   },
   xCoordinate(e) {
     this.x = e.clientX;
   }
  }
});

DEMO
可以看到我们甚至不需要将事件传递给@click处理程序，Vue 就可以自动把它作为方法的参数传递。
当然了，原生的方法也可以做到，比如说event.clientX，并且和this实例结合起来会更简单。在下面的例子你将看到 Vue 操作起来是多么的简单和语义化。
我们甚至不需要创建方法，我们只需在组件内部的行内样式里添加操作就足够了：

<div id="app">
  <div class="item">
    ![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/backpack.jpg)
    <div class="quantity">
      <button class="inc" @click="counter > 0 ? counter -= 1 : 0">-</button>
      <span class="quant-text">Quantity: {{ counter }}</span>
      <button class="inc" @click="counter += 1">+</button>
    </div>
    <button class="submit" @click="">Submit</button>
  </div><!--item-->
</div>

new Vue({
  el: '#app',
  data() {
    return {
      counter: 0
    }
  }
});

DEMO
你可以看到我们更新状态是直接通过@click处理程序而没有使用函数方法，还可以添加一些简单逻辑处理。但是一旦你的逻辑变得过于复杂，这样的做法就会让代码的可读性变的很差，这时候你就可以考虑把它放在一个函数方法内部，通过method来存储，无论如何这将会是一个好的选择。

文章系列：

Part 1: Rendering, Directives, and Events
Part 2: Components, Props, and Slots (待翻译)
Part 3: Vue-cli (待翻译)
Part 4: Vuex (待翻译)
Part 5: Animations (待翻译)

---

注释：原文作者：Sarah Drasner,本文已得到作者授权。