Vue.js單一元件檔案資料繫結

by vivid 10. 七月 2019 01:16

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

在本站《Vue.js資料繫結》文章中介紹基本的資料繫結概念、各種表單欄位資料繫結,例如文字方塊、多行文字方塊、核取方塊、圓型按鈕、清單方塊等等繫結,本文將延續此篇文章,來介紹單一元件檔案資料繫結,以讓你的元件資料與DOM同步。

繫結至單一元件檔案(Single File Component)

現在讓我們來看看如何繫結CSS樣式到單一元件檔案(Single File Component)。單一元件檔案專案的建立請參考本站《Vue.js入門 - 2》一文的說明。我們先在專案中建立建立單一元件檔案(Single File Component),參考下圖專案的檔案組織結構,在「src\components」資料夾下建立一個元件檔案,名稱為「mycomponent.vue」:

clip_image002

圖 1:自訂「mycomponent.vue」元件。

在「mycomponent.vue」檔案之中加入以下元件的程式碼,包含一個<input>方塊繫結到「promptText」屬性:

  • mycomponent.vue

<style scoped>
.myclass {
  background-color: lightcyan;
}
</style>
<template>
  <div class="myclass">
    <label> {{promptText}} :</label>
    <input type="text" v-model="myName">
  </div>
</template>
<script>
export default {
  props: ['myName'],
  data() {
    return {
      promptText: 'User Name'
    };
  }
};
</script>

程式的進入點是「src/main.js」檔案,修改檔案內容,將以下程式碼代換掉檔案中原有的內容,我們在新增一個「setBorder」屬性來決定是否套用自訂樣式:

  • src/main.js

import Vue from 'vue'
import mycomponent from '@/components/mycomponent'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App',
    setBorder :true
  },
  components: {
    'my-component': mycomponent
  }
});

預設專案中「src」資料夾內已經建立一個「App.vue」元件,它的程式碼參考如下,目前不需要修改它的程式碼。

  • src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

修改首頁「index.html」程式碼,在「#app」元件之中使用到自訂元件「my-component」,並利用「v-bind:class」繫結到「myborder」屬性,以套用自訂CSS式:

  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mydemo</title>
    <style>
        .myborder {
            border:  1px solid blue;
        }
      </style>
   
  </head>
  <body>
      <div id="app">
          <h2> {{title}} </h2>
          <my-component v-bind:class={myborder:setBorder} v-bind:my-name="userName"> </my-component>
        </div>
  </body>
</html>

 

接著在命令提示字元,執行「npm run dev」命令,接著將會自動利用webpack進行打包的程序,並啟動網站伺服器:

clip_image004

圖 2:執行並啟動網站伺服器。

開啟瀏覽器,輸入以下網址:「http://localhost:8080/」,執行的結果請參考下圖所示,「mycomponent」元件的<div>項目便套用了「myborder」:

clip_image006

圖 3:繫結至單一元件檔案範例執行結果。

若修改「main.js」檔案中「setBorder」屬性的值為「false」,則不套用自訂的樣式:

  • main.js

import Vue from 'vue'
import mycomponent from '@/components/mycomponent'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App',
    setBorder :false
  },
  components: {
    'my-component': mycomponent
  }
});


此時這個範例程式的執行結果參考如下:

clip_image008

圖 4:繫結至單一元件檔。

單一元件檔案行內樣式繫結

若要繫結到單一元件檔案行內樣式(Inline Style),可以使用「v-bind:style」關鍵字。舉例來說,參考以下範例程式碼,修改上個單一元件檔案範例的「Index.html」檔案,在單一元件檔案標籤中設定「v-bind:style」,將字的顏色「color」設為「黃色」;將背景顏色「backgroundColor」設定為「mycolor」變數:

  • index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>mydemo</title>
</head>

<body>
  <div id="app">
    <h2> {{title}} </h2>
    <my-component v-bind:style="{color :'yellow',backgroundColor: mycolor}" v-bind:my-name="userName">
    </my-component>
  </div>
</body>

</html>

 

接著修改「src/main.js」檔案,定義「mycolor」屬性,設定其預設值為「pink」:

  • src/main.js

 

import Vue from 'vue'
import mycomponent from '@/components/mycomponent'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App',
    mycolor : 'pink'
  },
  components: {
    'my-component': mycomponent
  }
});


這個範例程式的執行結果參考如下,行內樣式的優先權會高於自訂樣式:

clip_image010

圖 5:單一元件檔案行內樣式繫結。

一次設定多個行內樣式屬性

若要指定的行內樣式包含多個CSS屬性的設定,那麼可以讓「v-bind:style」繫結到一個物件,因為物件可以包含多個屬性,就可以一次設定多個CSS自訂樣式。參考以下範例程式碼,改寫上個單一元件檔案行內樣式範例,修改「index.html」檔案,指定「mycomponent」的值是一個名為「myInlineStyle」的物件:

  • index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>mydemo</title>
</head>

<body>
  <div id="app">
    <h2> {{title}} </h2>
    <my-component v-bind:style="myInlineStyle" v-bind:my-name="userName">
    </my-component>
  </div>
</body>

</html>


 

修改「src/main.js」檔案,定義「myInlineStyle」屬性,其值是一個物件,一次設定「color」、「fontSize」與「backgroundColor」三個CSS屬性:

  • src/main.js

import Vue from 'vue'
import mycomponent from '@/components/mycomponent'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App',
    myInlineStyle : { color:'yellow' , fontSize:'2em', backgroundColor : 'pink'}
  },
  components: {
    'my-component': mycomponent
  }
});

 

這個範例程式的執行結果參考如下:

clip_image012

圖 6:一次設定多個行內樣式屬性。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List