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 事件中修改狀態。並且咱們也能夠在其中添加一點邏輯判斷(由於在購物網站中不會有小於零的東西)。 一旦這種邏輯過於複雜，即便可讀性降低，最好仍是寫到一個方法中。這是個很好的選擇。