Vue.js 樣板 template 語法

資料

要輸出變數或資料,通常使用雙引號來處哩,如:

{{ }}

// 範例
new Vue({
    template: `<div>{{text}}</div>`,
    data () {
        return {
            text: 'Hello Vue'
        };
    }
}).$mount('#app');

// 範例二
<div v-text="text"></div>
<!-- same as -->
<div>{{text}}</div>

// 範例三
<div>{{2 + 5}}</div> <!-- 7 -->
<div>{{2 + '5'}}</div> <!-- 25 -->

// 範例四 
<div id="{{id}}">{{text}}</div>    // 錯誤用法
<div v-bind:id="id">{{text}}</div> // 正確用法
// 這樣使用也可以
<div :id="id">{{text}}</div>
<a :href="url">{{text}}</a>

directives

v-on:click

// 範例
<button v-on:click="addToCart">Add to Cart</button>

<!-- Shorthand -->
<button @click="addToCart">Add to Cart</button>

有時候為了避免瀏覽器預設的行為被執行我們會使用 event.preventDefault(),如:

function handleFormSubmit(event) {
    event.preventDefault();
    // Send to server
}

若使用Vue.js,就可以直接在樣板中宣告:

<form v-on:submit.prevent="handleFormSubmit">
</form>

<!-- Shorthand -->
<form @submit.prevent="handleFormSubmit">
</form>

條件式顯示、隱藏(v-show、v-if)及迴圈(v-for)

<template>
    <!-- 
    Click to invoke toggle method which
    toggles the boolean flag
    -->
    <button @click="toggle">Click me</button>

    <!-- Show if 'isShown' is true -->
    <p id="text" v-show="isShown">Lorem ipsum dolor sit amet,...</p>
</template>

<script>
export default {
    data() {
        return {
            isShown: false, // Control property  
        };
    },
    methods: {
        toggle() {
        // Toggles control property
        this.isShown = !this.isShown;
        },
    },
}
</script>

// 範例二
<!-- v-if -->
<p id="text" v-if="isAuth">Welcome...</p>

重複顯示資料

<template>
    <ul>
        <li for="product in products">{{product.name}}</p>
    </ul>
</template>

<script>
    export default {
        data() {
            return {
                products: [
                    {id: 1, name: 'iPhone7'}
                    {id: 2, name: 'iPhone6'}
                ]
            }
        },
    }
</script>

// 範例二
<template v-for="product in products">
    <div class="card">
        <div class="card-header">{{product.header}}</div>
        <div class="card-content">{{product.content}}</div>
        <div class="card-footer">{{product.created_at}}</div>
    </div>
</template>
  • 建議資料若有重複,可加上獨一的欄位當key
<template v-for="product in products" :key="product.id">
    <div class="card">
        <div class="card-header">{{product.header}}</div>
        <div class="card-content">{{product.content}}</div>
        <div class="card-footer">{{product.created_at}}</div>
    </div>
</template>

Style

// 直接設定值
<div v-bind:style="{ color: 'red', backgroundColor: 'blue' }"></div>

// 使用變數
<div v-bind:style="{ color: 'red', backgroundColor: bgColor }"></div>

<script>
  data () {
    return {
      bgColor: 'rgb(0, 0, 255)'
    }
  }
</script>

// 較好的方式
<div v-bind:style="myStyle"></div>
<script>
  data () {
    return {
      myStyle: { color: 'red', backgroundColor: 'rgb(0,0,255)' }
    }
  }
</script>

// 一次使用多個 style
<div v-bind:style="[myStyle, ourStyle]"></div>
<script>
  data () {
    return {
      myStyle: { color: 'red', backgroundColor: 'rgb(0,0,255)' },
      ourStyle: { fontSize: '36px', position: 'relative' },
    }
  }
</script>

CSS

// 動態 css
<div v-bind:class="{ active: isAuth }">
...
</div>

<script>
  data () {
    return {
      isAuth: true
    }
  }
</script>

// 範例二
<div v-bind:class="{ active: isAuth, 'admin-flag': isAdmin }">
...
</div>

<script>
  data () {
    return {
      isAuth: true,
      isAdmin: false
    }
  }
</script>

// 另一種方式
<product class="{selected: isSelected}"></product>