定義模板

by vivid 30. 十月 2019 11:53

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N191021203
出刊日期: 2019/10/30

在Vue應用程式之中,要定義組件(Component)的模板(Template)方式有很多種,包含以下常用的作法:

  • 字串模板(String Template)
  • 模板字符串(Template literal)
  • 內聯模版(Inline Templates)
  • x-template
  • 渲染函數(Render Function)
  • 單文件組件(Single File Components)

在這篇文章之中,將來談談這幾種作法,來達到相同的情境。

字串模板(String Template)

預設可以直接在註冊組件時,使用字串來表達組件的模板,字串中將會包含HTML標籤,這種做法的好處是大部分的瀏覽器都支援,但是缺點是要組出組件所需字串很容易出錯,且開發工具也無法協助你排版,很難以維護。

參考以下使用字串模板(String Template)的範例程式碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> Document </title>
  </head>
  <body>
    <div id="app">
      <mysearch></mysearch>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
      let mysearch = {
        template:
          '<div> <label> Enter keyword: </label> <input type="text" v-model="keyword" placeholder="請輸入keyword"> <button @click="showresult"> Search </button> </div>',
        data: () => {
          return {
            keyword: ""
          };
        },
        methods: {
          showresult: function() {
            console.log(this.keyword);
          }
        }
      };

      var app = new Vue({
        el: "#app",
        components: {
          mysearch: mysearch
        }
      });
    </script>
  </body>
</html>

 

這個範例程式的執行結果參考如下,畫面中包含一個文字方塊,在其中輸入文字按下「Search」按鈕,將會在瀏覽器除錯視窗中印出文字方塊中的訊息:

clip_image002

圖 1:字串模板(String Template)範例。

模板字符串(Template literal)

ECMAScript 2015版本新增模板字符串(Template literal)語法,使用「`」(backticks)符號來定義文字樣板,它的好處是,冗長的文字字串,在設計階段可以以多行的方式輸入,並可以其中使用「${變數名稱}」語法,將變數的值代入,或進行簡單的運算,像是呼叫方法。

我們使用模板字符串(Template literal)來改寫上個範例,參考以下範例程式碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <mysearch></mysearch>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
      let mysearch = {
        template:
        `
      <div>
        <label> Enter keyword: </label>
        <input type="text" v-model="keyword" placeholder="請輸入keyword">
        <button @click="showresult"> Search </button>
      </div>
      `
        ,
        data: () => {
          return {
            keyword: "",
          };
        },
        methods :{
          showresult : function () {
            console.log(this.keyword)
          }
        }
      };
      var app = new Vue({
        el: "#app",
        components: {
          mysearch: mysearch
        }
      });
    </script>
  </body>
</html>

 

和字串模板(String Template)的範例相較之下,模板字符串(Template literal)比較容易閱讀,但是還是有一樣的問題,要組出組件所需字串很容易出錯,且開發工具也無法協助你排版,也沒有辦法使用語法加亮(Syntax highlighting)編輯器的特性,利用不同的顏色來顯示關鍵字,來增強程式的可讀性。此外雖然大部分的瀏覽器有支援ECMAScript 2015字串模板(String Template)的語法,但是還是有少部分舊瀏覽器不支援,例如IE11。

 

內聯模版(Inline Templates)

在組件的開頭與結尾標籤之中,直接加入樣板,然後在使用組件的標籤上加上「inline-template」Attribute, 和前兩種做法相比,開發工具可以對內聯模版(Inline Templates)加上用語法加亮(Syntax highlighting)、程式碼排版的支援。它的限制是需要定義在Vue附加的DOM項目(Element)内。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <mysearch inline-template>
        <div>
          <label> Enter keyword: </label>
          <input type="text" v-model="keyword" placeholder="請輸入keyword" />
          <button @click="showresult">Search</button>
        </div>
      </mysearch>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
      let mysearch = {
        data: () => {
          return {
            keyword: ""
          };
        },
        methods: {
          showresult: function() {
            console.log(this.keyword);
          }
        }
      };
      var app = new Vue({
        el: "#app",
        components: {
          mysearch: mysearch
        }
      });
    </script>
  </body>
</html>

x-template

x-template模板定義的方式和內聯模版(Inline Templates)有點類似,將模板放在一個獨立的「<script>」區塊之中,然後套用「type="text/x-template"」attribute,同樣的,它的限制是需要定義在Vue附加的DOM項目(Element)内。參考以下範例程式碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script type="text/x-template" id="mysearch">
      <div>
          <label> Enter keyword: </label>
          <input type="text" v-model="keyword" placeholder="請輸入keyword">
          <button @click="showresult"> Search </button>
        </div>
    </script>
  </head>
  <body>
    <div id="app">
      <mysearch></mysearch>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
      let mysearch = {
        template: "#mysearch",
        data: () => {
          return {
            keyword: ""
          };
        },
        methods :{
          showresult : function () {
            console.log(this.keyword)
          }
        }
      };
      var app = new Vue({
        el: "#app",
        components: {
          mysearch: mysearch
        }
      });
    </script>
  </body>
</html>

 

渲染函數(Render Function)

渲染函數(Render Function)是產生模板比較低階的作法,需要透過程式來建立樣板所需的HTML項目。好處是全部由程式控制,因此彈性很大;缺點是程式碼冗長囉嗦,不易閱讀。此外還有一些缺點,不支援某些Vue的指令(Directive),例如,對「v-model」指令沒有直接的支援,還需要自行實作相關的邏輯。

參考以下範例程式,改用渲染函數(Render Function)達到上述範例的效果:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <mysearch></mysearch>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
      let mysearch = {
        data: () => {
          return {
          };
        },
        render: function(createElement) {
          var self = this;
          return createElement("div", { }, [
            createElement("label", { }, ["Enter keyword: "]),
            createElement(
              "input",
              {
                domProps: {
                  value: self.value
                },
                on: {
                  input: function(event) {
                    self.$emit("input", event.target.value);
                    this.value = event.target.value
                  }
                },
                attrs: {
                  type: "text",
                  placeholder: "請輸入keyword"
                }
              },
              []
            ),
            createElement(
              "button",
              {
                on: {
                  click: function(event) {
                    console.log(this.value);
                  }
                }
              },
              ["Search"]
            )
          ]);
        }
      };
      var app = new Vue({
        el: "#app",
        components: {
          mysearch: mysearch
        }
      });
    </script>
  </body>
</html>

 

單文件組件(Single File Components)

最常用來定義模板的做法是使用單文件組件(Single File Components),由其是當你使用Vue CLI來建立專案時。好處是能夠將模板標籤、程式碼與樣式拆出來,放在一個獨立的、副檔名為「.vue」的檔案之中集中管理,參考以下範例程式碼:

 

<template>
   <div>
        <label> Enter keyword: </label>
        <input type="text" v-model="keyword" placeholder="請輸入keyword">
        <button @click="showresult"> Search </button>
    </div>
</template>

<script>
export default {
   render() {
  return <input type="email" />
},
  data: () => {
    return {
      keyword: ""
    };
  },
  methods: {
    showresult: function() {
      // eslint-disable-next-line
      console.log(this.keyword);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript | VueJS | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List