[C#]Vue.js x-Template 使用方法(傳遞參數版)

  • 739
  • 0
  • Vue
  • 2020-01-03

Vue.js x-Template 使用方法(傳遞參數版)

【拜託!一模一樣的程式碼出現好幾遍,真的害人又害已好嗎,該是使用Template的時候了】

前言

  • 由於網路上的介紹資料相對單純一些,新手較容易入門..我只是針對傳入Object做簡單的註解

 

基本介紹

開發環境

  1. Microsoft Visual Studio .NET 2017 Professional
  2. Vue.js 2.x

參考資料

取得方式

 


HTML (套用x-Tempalte之前)

由於我們在呈現的時候,會做一個收納,以避免一次就把所有資料全部展示出來,造成畫面過長...

所以我們把同樣的程式碼,切成兩塊,再用v-if做資料呈現的控制...

<div id="deptinfo">
   <ul>

      <%-- 前3個部門資訊 --%>
      <li v-for="(Dept,index) in GroupData.Dept" :key="index" v-if="index < 3">
         <%--部門清單VUE START--%>
         <div>
            <%--部門資訊--%>
            <div>
               <p v-text="Dept.id"><%--部門代號--%></p>
               <p v-text="Dept.name"><%--部門名稱--%></p>
               <p v-text="Dept.manager"><%--部門主管--%></p>
            </div>

            <%--部門人員資訊--%>
            <div v-for="(emp, index2) in Dept.emp" :index="index2">

               <div>
                  <p v-text="emp.id"><%--人員工號--%></p>
                  <p v-text="emp.name"><%--人員姓名--%></p>
                  <p v-text="emp.lv"><%--人員職等--%></p>
               </div>
            </div>
         </div>
         <%--部門清單VUE  END --%>
      </li>

      <div class="click-show"><!-- 點選後才展開 -->
            還有 <span v-text="GroupData.Dept.length - 3"></span> 個部門
      </div>

      <div>
      
         <%-- 第4個之後的部門資訊放這裡 --%>
         <li v-for="(Dept,index) in GroupData.Dept" :key="index" v-if="index >= 3">
            <%--部門清單VUE START--%>
            <div>
               <%--部門資訊--%>
               <div>
                  <p v-text="Dept.id"><%--部門代號--%></p>
                  <p v-text="Dept.name"><%--部門名稱--%></p>
                  <p v-text="Dept.manager"><%--部門主管--%></p>
               </div>

               <%--部門人員資訊--%>
               <div v-for="(emp, index2) in Dept.emp" :index="index2">
                  <div>
                     <p v-text="emp.id"><%--人員工號--%></p>
                     <p v-text="emp.name"><%--人員姓名--%></p>
                     <p v-text="emp.lv"><%--人員職等--%></p>
                  </div>
               </div>
            </div>
            <%--部門清單VUE  END --%>
         </li>

      </div>
   </ul>
</div>

從上面可以發現到 部門清單VUE 的部份是重覆的,只是為了顯示而把它切開,

若是這個區塊發展得很大,或是邏輯複雜一點,就會造成後續維護上的困擾,

這時候就可以使用x-Template的方式處理。

 

 

X-Template 套用方法

 

HTML

這邊有兩個地方要注意:

  1. 帶過去的props名稱最好是小寫
  2. 要帶過去的所有props都得寫在裡面
  3. is裡面填的不是Template的名稱,而是在VueComponent註冊的名稱
<div id="deptinfo">
   <ul>

      <%-- 前3個部門資訊 --%>
      <li is="xTemplateDept" v-for="(Dept,index) in GroupData.Dept" :depts="Dept" :index="index" :key="index" v-if="index < 3"></li>

      <div class="click-show"><!-- 點選後才展開 -->
         還有 <span v-text="GroupData.Dept.length - 3"></span> 個部門
      </div>
      <div>
      
         <%-- 第4個之後的部門資訊放這裡 --%>
         <li is="xTemplateDept" v-for="(Dept,index) in GroupData.Dept" :depts="Dept" :index="index" :key="index" v-if="index >= 3"></li>

      </div>
   </ul>
</div>

 

Template

實作方式有好幾種,如下:

  1. 直接寫在Component裡,變成一串String。
           (如果內容很多的話,不好維護)
  2. 寫在<script type="text/x-template" id="xDeptList"></script>裡面
           (維護的問題解決了,但VS.NET怎麼沒有提供顏色的標註啊??)
  3. 寫在<template id="xDeptList></template>裡面

由於…對於一個懶惰的程序猿來說

沒有顏色跟沒有對齊都是一件令人抓狂的事

所以…

<template id="xDeptList">
   <li>
      <%--部門清單VUE START--%>
      <div>
         <%--部門資訊--%>
         <div>
            <p v-text="depts.id"><%--部門代號--%></p>
            <p v-text="depts.name"><%--部門名稱--%></p>
            <p v-text="depts.manager"><%--部門主管--%></p>
         </div>

         <%--部門人員--%>
         <div v-for="(emp, index2) in depts.emp" :index="index2">
            <div>
               <p v-text="emp.id"><%--人員工號--%></p>
               <p v-text="emp.name"><%--人員姓名--%></p>
               <p v-text="emp.lv"><%--人員職等--%></p>
            </div>
         </div>
      </div>
      <%--部門清單VUE  END --%>
   </li>
</template>

 

 

JavaScript

  • 參數(props)建議帶入資料型態
  • 若有呼叫原本的function,記得加上對應的function(其實我只是懶得搬程式!!!!!!)
  • data記得加return
  • 如果怎麼樣都不會運作,請注意props、methods,有沒有加上s
<script type="text/javascript">
   <%--xTemplate必須註冊在Vue.component底下,也得在最前面--%>
   Vue.component('xTemplateDept', {
      props: {
         index: Number
         , depts: Object
      }, <%--使用 prop 傳遞資料(要傳入template內的的參數)--%>
      template: '#xDeptList', <%--綁定x-template的id--%>
      methods: {
         setDeptManger: function (index, empid) {
            vm.setDeptManger(index, empid);
         },
         setDeptEmp: function (index, empid) {
            vm.setDeptEmp(index, empid);
         }
      }
   });

   let vm = new Vue({
      el: '#deptinfo',
      data: function () {
         return {
            GroupData: [],  <%--各處級相關資料--%>
         }
      },
      methods: {
         getdata : function () {
            //getdata
         },
         setDeptManger: function (index, empid) {
            //setDeptManger
         },
         setDeptEmp: function (index, empid) {
            //setDeptEmp
         }
      }
   });
</script>

 

 Written By Felix Hsieh