Vue 基礎 III.
自己常用語法 :
v-if
判斷式，和 Javascript 判斷式一樣，是有順序規則。
v-if -> v-else-if -> v-else
js
<template>
<div v-if="show"></div>
</template>
<script setup>
const show = false
// 瀏覽器不會渲染
</script>
v-show
判斷式 (瀏覽器先渲染，與v-if不同)
js
<template>
<div v-show="show"></div>
</template>
<script setup>
const show = false
// 瀏覽器會渲染，但 CSS : Display 會呈現 none
</script>
v-html、v-text
js
<template>
<div v-html="htmlView"></div>
<div v-html="textView"></div>
</template>
<script setup>
const htmlView = ref('dsfa;ljf;laskdf')
const textView = ref('dsfa;ljf;laskdf')
</script>
v-bind
綁定 <div/> 屬性，也可以直接使用 : 冒號
js
<template>
<div v-bind:style='{color : mycolor}'></div>
<div v-bind:class="{active:isActive}"></div>
<div :src="myImage"></div>
//簡化通常只用 : 冒號綁在屬性前面
</template>
<script setup>
const mycolor = "red"
const isActive = ref(true)
const myImage= ref('/path/xxx.png')
</script>
v-model
雙向綁定，互動性功能(習慣放在 <input> 等可輸入的標籤上)
js
<template>
<input v-model='inputData'>
</template>
<script setup>
const inputData = ref("")
</script>
v-on*
觸發事件，慣用在<button/>、<input type="button">標籤上
js
<template>
<input v-model='inputData'>
<button type="button" v-on:click="touchMe">Touch</button>
// //簡化通常只用 @ 符號綁在動作屬性(如:click)前面
</template>
<script setup>
const touchMe(){
console.log('i am Here')
}
</script>
v-slot
插槽元件。
slot需配合component方法來import才能被導入。- 指名插槽元件時需放在
<template/>標籤上，安插自訂的元件或模板。(可用在自訂的頁面上安插navbar、footer)。 - 指名插槽可這樣標示
v-solt:或直接使用＃符號 +元件名。 - 如果要拿子元件資料，則需要在子元件標籤上直接放上數值，父件也在標籤上標示取用。
vue
// 父件
<template>
...
<child>
<template v-solt:header></template>
<template> <p1> text </p1> </template>
<template #footer></template>
<template v-solt:default> 默認值使用 </template>
<template #to_father="{text,count}">取用子元件值 :{{text}}{{count}}</template>
</child>
...
</template>
<script setup>
...
import child from '子元件'
...
</script>
vue
// 子元件
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
<slot name="to_father" text="to father" count="1"></slot>
v-for
陣列渲染
js
<template>
<ul>
<li v-for="item in array" :key="key">
<router-link :to="item.link"> {{ item.name }} </a>
</li>
</ul>
</template>
<script setup>
..
const array=reactive([
{name:"aaa", link:"/a"},
{name:"aaa", link:"/b"},
{name:"aaa", link:"/c"}
])
..
</script>
DANGER
v-if 與 v-for 官方是建議不要綑綁在同一個標籤節點上，因為有渲染優先順序的問題。
錯誤示範:
html
<!-- 錯誤 -->
<div v-if="isShow" v-for="item in array">...</div>
正確示範:
html
<!-- 正確 -->
<div v-if="isShow">
<li v-for="item in array">...</li>
</div>