Vue.js 系列教程 1：渲染，指令，事件

原文：intro-to-vue-1-rendering-directives-events

译者：nzbin

若是要我用一句话描述使用 Vue 的经历，我可能会说“它如此合乎常理”或者“它提供给我须要的工具，并且没有妨碍个人工做”。每当学习 Vue 的时候，我都很高兴，由于颇有意义，并且很优雅。

以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候，我就想要这样的文章。若是你倾向于无党派的方法，请查阅 Vue 简单易懂的 用户指南.

系列文章:

1. 渲染, 指令, 事件 (你在这!)
2. 组件, Props, Slots
3. Vue-cli
4. Vuex
5. 动画

我喜欢 Vue 的一点是它吸收了其它框架的优秀之处，并有条不紊的将它们组合在一块儿。 好比:

• 具备响应式组件化的虚拟 DOM 只提供视图层， props 和 类 Redux 状态管理与 React 相似。
• 条件渲染和服务与 Angular 相似。
• 受到 Polymer 简洁及性能方面的启发，Vue 提供了相似的模式，好比 HTML， 样式以及 JavaScript 组合在一块儿。

Vue 相比其它框架的优点有: 简洁，提供更多语义化的 API ， 比 React 的表现稍好，不像 Polymer 那样使用 polyfill，相比 Angular 有独立的视图。

我还能举一些例子，可是你最好读一下这篇综合的、社区推进的文章对比其它框架 。这篇文章值得一读，可是若是你想先看代码，你也能够先跳过，之后再读。

开始吧！

仍是从 "Hello, world!" 的例子开始。运行以下示例：

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

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

 

若是你熟悉 React，你会发现二者有不少相同之处。经过 mustache 模板以及使用一个变量，能够避免在内容中使用 JavaScript，可是不一样的一点是咱们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用，可是我无需再花时间把 class 改为 className，等等。这样启动及运行会更轻量。

如今尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。

条件渲染

假若有一组元素，相似导航条，我打算重复利用。合理的作法是放在数组中动态的更新。使用普通的 JS (须要 Babel) ，咱们会这样作: 建立一个数组，而后建立一个空字符串，用来存放使用 <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();

 

这种方法是可行的，可是有点麻烦。如今试一试 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'
    ]
  }
});

 

很是简洁。若是你熟悉 Angular，你对此应该不陌生。我发现这种条件渲染的方式简单明了。若是你须要更新内容，修改起来也很简单。

另一种好的方式是使用 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 中你会注意到两点。首先，能够直接向书中打字而且动态更新文本。Vue 经过 v-model 很是方便的实现了 <textarea> 和 <p> 的数据绑定。

其次，你可能注意到咱们将数据放在了函数中。在这个例子中，不这样作也能够。咱们能够和以前的例子同样放在一个对象中。可是这种方式只能在 Vue 实例中使用，在程序中也是如此 (因此，在组件中不要使用这种方法)。在一个 Vue 实例中这样使用是能够的，可是咱们须要在子组件中分享数据。最好一开始就把数据放在函数中，由于使用组件时咱们但愿每一个组件都有本身的状态。

并非只有简单的输入绑定，甚至 v-if 能够用 v-show 替换，有 v-show 的元素不是销毁或重建组件，而是始终保持在 DOM 中，切换可见性。

Vue 提供了 不少指令 , 下面是我常用的一些指令。不少指令都有缩写，因此我会一块儿列出来。在以后的教程中，咱们主要使用指令缩写，因此最好先熟悉一下下面的表格。

名称	缩写	做用	举例
v-if, v-else-if, v-else	none	条件渲染	<g v-if="flourish === 'A'"></g> <g v-else-if="flourish === 'B'"></g> <g v-else></g>
v-bind	:	动态地绑定一个或多个特性，或一个组件 prop 到表达式	<div :style="{ background: color }"></div>
v-on	@	绑定事件监听器到元素	<button @click="fnName"></button>
v-model	none	建立双向绑定	<textarea rows="5" v-model="message" maxlength="72"></textarea>
v-pre	none	跳过原始内容的编译过程，能够提升性能	<div v-pre>{{ raw content with no methods}}</div>
v-once	none	不渲染	<div class=”v-once”>Keep me from rerendering</div>
v-show	none	根据状态显示或者隐藏组件/元素，可是会保存在 DOM 中不会销毁 (不一样于 v-if)	<child v-show=”showComponent”></child> (当 showComponent 为 true 时切换可见性)

也有很是好的事件修饰符和其余 API

加快开发的方法：

• @mousemove.stop 和 e.stopPropogation() 相同
• @mousemove.prevent 相似于 e.preventDefault()
• @submit.prevent 提交时再也不从新加载页面
• @click.once 不要和 v-once 混淆，这个 click 事件只触发一次 
• v-model.lazy 不会自动填充内容，它将在事件发生时绑定

你也能够 自定义指令 。

咱们会在稍后的例子中使用这些方法!

事件处理

数据绑定虽然很好，可是没有事件处理也没法发挥更大的用途，所以接下来就试一试! 这是我喜欢的一部分。咱们将使用上面的绑定和监听器来监听 DOM 事件。

在应用程序中有几种不一样的方法来建立可用的方法。好比在普通的 JS 中，你能够选择函数名，可是实例方法直观地称为 methods！

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 ，会指向实例及组件中的 data 。我喜欢这种自动绑定，不须要经过 console.log 查看 this 的指向。 咱们使用缩写 @click 绑定 click 事件。

Methods 并非建立自定义函数的惟一方式。你也可使用 watch 。二者的区别是 methods 适合小的、同步的计算，而 watch 对于多任务、异步或者响应数据变化时的开销大的操做是有利的。我常常在动画中使用 watch 。

让咱们看看如何传递事件而且进行动态地样式绑定。若是你记得上面的表格，你可使用 : 来代替 v-bind ，所以咱们能够很简单地经过 :style 以及 传递状态，或者 :class 绑定样式 (以及其余属性)。这种绑定确实有不少用途。

在如下的例子中，咱们使用 hsl()，由于 hue calculated as a circle of degrees of color ，因此每个位置都有色值。这种方法颇有用，由于任何数值都有效。所以，当咱们在屏幕上移动鼠标，背景颜色将相应更新。咱们使用 ES6 模板字面量 。

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

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

 

你应该看到咱们甚至不须要传递 @click 事件，Vue 将它做为方法的参数(这里显示为 e )自动传递。

此外，原生方法也可使用，好比 event.clientX，而且很容易关联 this 实例。在元素的样式绑定中，CSS 属性须要使用驼峰命名。在这个例子中，你能够看到 Vue 的简单明了。

实际上咱们甚至不须要建立一个方法，若是事件足够简单，咱们也能够在组件中直接增长计数器的值：

<div id="app">
  <div class="item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/backpack.jpg" width="235" height="300"/>
    <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
    }
  }
});

 

咱们没有使用任何方法而是直接在 @click 事件中修改状态。并且咱们也能够在其中添加一点逻辑判断(由于在购物网站中不会有小于零的东西)。 一旦这种逻辑过于复杂，即便可读性降低，最好仍是写到一个方法中。这是个很好的选择。