Vue.js 系列教程 1:渲染,指令,事件

來源:互聯網
上載者:User

標籤:www.   stop   而且   web   作用   導航   evel   代碼   item   

原文: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) ,我們會這樣做: 建立一個數組,然後建立一個Null 字元串,用來存放使用 <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 事件中修改狀態。而且我們也可以在其中添加一點邏輯判斷(因為在購物網站中不會有小於零的東西)。 一旦這種邏輯過於複雜,即使可讀性下降,最好還是寫到一個方法中。這是個很好的選擇。

Vue.js 系列教程 1:渲染,指令,事件

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.