你也許不知道的Vuejs – 花式渲染目標元素

yugasun發表於2019-03-04
VueJS

by yugasun from yugasun.com/post/you-ma…
本文可全文轉載，但需要保留原作者和出處。

Vue.js是什麼

摘自官方文件：

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

對比其他框架？

一般提到一個框架時，大家都喜歡跟其他框架作對比，以說服讀者去使用它，但是這裡就不做對比了，是不是很失望？每個人都有每個人的好，何況是由人創造出來的框架呢，單憑 vuejs 在github上8W+的star，那也值得你去嘗試一回，不是嗎？

當然如果你有框架選擇恐懼症，那麼不妨相信我一回，直接跟著我親自上手體驗吧~

起步

其實使用 Vuejs 很簡單，直接像引入 jquery 方式一樣，引入原始碼標籤就行，如下：

<!-- 這裡直接引入cdn原始碼，當然你也可把它下載下來，直接引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
複製程式碼

每個Vue應用都是通過 Vue 函式建立一個新的 Vue例項 開始的。

接下來，我們來建立一個最基本的應用，實現在頁面中輸出 Hello Vue.js!。新建一個html檔案程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>You Don`t Know Vuejs - Chapter 1</title>
</head>
<body>
  <div id="app"></div>
  <!-- 這裡直接引入cdn原始碼，當然你也可把它下載下來，直接引入 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = new Vue({
      el: "#app",
      template: "<h1>Hello Vue.js!</h1>"
    });
  </script>
</body>
</html>
複製程式碼

使用瀏覽器開啟剛建立的 index.html ，頁面會輸出一個大大的 h1 標籤，內容就是我們期待的 Hello Vue.js!，怎麼樣是不是很簡單。Vue例項在建立的時候需要傳入一個物件作為引數，這個物件有很多屬性，包括: DOM渲染相關屬性（el、template…），資料相關屬性（data、props、computed、methods、watch…），生命週期鉤子屬性（created、mounted…）…等很多屬性，具體可以參考 官方API文件，這裡剛好用到了 el - Vue例項需要掛在的目標DOM元素，template - 替換掛在元素的內容模板 。也就是當我們建立Vue例項的時候，它會找到 el 提供的元素 div#app（這裡app可以取任意你喜歡的名稱，也可以使用類名，但是為了確保不發生衝突和唯一性，最好使用ID名稱），然後使用 template 屬性的內容將其替換。

資料繫結

當然實際開發中我們的模板不可能是硬編碼的方式替換，並且也不可能保持一成不變，既然Vuejs聲稱是資料驅動檢視（MVVM）的響應式框架，我們當然要體驗一番了。接下來我們來體驗下資料繫結和模板語法。

在建立Vuejs例項是我們提到過的 data 屬性就是用來進行資料物件繫結的，我們將上面初始化程式碼修改如下：

var app = new Vue({
  el: "#app",
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
});
複製程式碼

然後重新整理頁面，發現實現效果是一樣的。這裡的 data 為一個返回資料物件的函式，當Vue例項建立的時候，會執行該函式，將在例項上新增 $data 屬性，並在編譯模板 template 的時候，將所有雙大括號（Mustache語法） {{ xxx }} 的內容替換為我們定義的屬性值。

注意：當建立Vue例項時，data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項。如果 data 仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！通過提供 data 函式，每次建立一個新例項後，我們能夠呼叫 data 函式，從而返回初始資料的一個全新副本資料物件。

Too young too simple?

好了，看到這裡我想大家都學會如何使用Vuejs了，有人會說了，納尼？一臉茫然，還沒開始就結束了。是的沒錯，基礎知識我們就講到這裡了，因為我不可能將vuejs官方文件都重寫一遍，那樣太浪費大家時間了，而且官方文件寫的實在是太好了，推薦每個人都必須去讀一遍。那麼問題來了：那麼你憑什麼這麼辛苦跑來讀我的文章……說好的 You Don`t Know Vuejs 呢？

那麼本文就正式開始吧……

ORZ……這個開場白確實有點長，不過還是有必要的，畢竟要考慮到小白們的感受，大家體諒下。

花式渲染目標元素

上面介紹了最基本的用法，也是最常見的方式，其實Vue物件上還好提供很多種方法，如下：

1.Vue

直接建立Vue例項，這個方法很簡單，程式碼如下：

new Vue({
  el: "#app",
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
})
複製程式碼

2.Vue.extend

Vue.extend(options) 方式是使用Vue構造器的一個“子類”，其引數同Vue(options)一模一樣，唯一的不同是沒有 el 屬性來指定掛載的DOM元素，所以這裡需要通過 $mount() 方法，來手動實現掛載。將以上程式碼修改如下：

var app = Vue.extend({
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
})
new app().$mount(`#app`);
複製程式碼

注意這裡 Vue.extend 方式是生成了一個 Vue 子類，所以需要 new 關鍵字來重新建立，然後手動掛載。

3.Vue.component

Vue.component(id, [definition]) 方式是註冊一個名稱為 id 的全域性元件，然後我們可以通過使用該元件來，實現目標元素渲染。其中 definition 引數同 Vue.extend 中的引數一模一樣，方法一樣，需要使用 $mount() 方法手動掛在。修改程式碼如下

var app = Vue.component(`helloworld`, {
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
})
new app().$mount(`#app`)
複製程式碼

既然 Vue.component 是幫我們註冊了一個全域性元件，那麼我們當然是可以通過使用它來渲染了。修改如下：

// 1. 註冊元件
Vue.component(`helloworld`, {
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
})
// 2. 通過建立Vue例項來使用
new Vue({
  el: `#app4`,
  template: "<helloworld/>"
})
複製程式碼

需要注意的是，僅僅註冊元件式不夠的，我們還要通過建立一個Vue例項，才能使用該元件。

4.Vue.directive

在Vue中可以通過 Vue.directive(id, [definition]) 來自定義一個指令，並且指令的使用是通過在目標元素中新增 v-指令id屬性來實現的。修改程式碼如下：

在 div#app 元素新增指令，如下：

<div v-helloworld="msg"></div>
複製程式碼

然後修改js程式碼：

Vue.directive("helloworld", {
  bind: function (el, binding) {
    el.innerHTML = "<h1>"+ binding.value +"</h1>"
  }
})
new Vue({
  el: "#app",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  }
})
複製程式碼

5.Vue.compile

Vue.compile(template) 引數也就是方法1中的 template 模板字串屬性，然後通過替換 Vue例項的 render 函式，來實現渲染，程式碼如下：

var tpl = Vue.compile(`<h1>{{ msg }}</h1>`)
new Vue({
  el: "#app",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  },
  render: tpl.render
})
複製程式碼

其實此方法本質上跟方法1是一樣的，只是方法1中通過 template 屬性來定義模板，Vue例項在建立的過程中也會呼叫 render 函式，然後會預設使用 template 的模板值來渲染，而方法5則手動指定了渲染模板。

當然，你也可以直接通過修改 render 函式，來定製化輸出內容，這就是接下來要講到的方法6。

6.render

Vue例項在建立的過程中也會呼叫 render 函式，render 函式預設會傳遞一個引數，這裡我取名為 createElement， 我們可以通過 createElement 來動態建立一個 VNode，以此來渲染目標元素。程式碼如下：

new Vue({
  el: "#app6",
  data () {
    return {
      msg: "Hello Vue.js!"
    }
  },
  render: function (createElement) {
    return createElement(`h1`, this.msg)
  }
})
複製程式碼

總結

花式渲染目標元素介紹就到這裡吧，雖然上面書寫的是6中方式，實則實現了7種方法，當然如果你有不同的方式或者覺得有不對的地方，歡迎評論或者發郵件回覆~

原始碼在此

專題目錄

You-May-Not-Know-Vuejs

相關文章