02_Vue常用的一些指令

野码發表於2024-06-23
Vue

文件：內建指令 | Vue.js (vuejs.org)

1.v-on,給元素繫結事件監聽器

<!-- 方法處理函式 -->
<button v-on:click="doThis"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 點選事件將最多觸發一次 -->
<button v-on:click.once="doThis"></button>

2.v-model,在表單輸入元素或元件上建立雙向繫結

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

3.v-show,基於表示式值的真假性，來改變元素的可見性

<h1 v-show="ok">Hello!</h1>

ok：是bool值

4.v-if，基於表示式值的真假性，來條件性地渲染元素或者模板片段

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

5.v-for，基於原始資料多次渲染元素或模板塊

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

6.computed()，接受一個 getter 函式，返回一個只讀的響應式 ref 物件。該 ref 透過 .value 暴露 getter 函式的返回值。它也可以接受一個帶有 get 和 set 函式的物件來建立一個可寫的 ref 物件。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

7.watch()，偵聽一個或多個響應式資料來源，並在資料來源變化時呼叫所給的回撥函式。

偵聽一個 getter 函式：

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

偵聽一個 ref：

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

8.鍵盤滑鼠修飾符

keydown: 鍵盤按下事件
keyup: 鍵盤的抬起事件
import { ref } from 'vue';
let message = ref("")

// 定義一個Enter鍵事件函式
const enterHandler = ()=> {
  console.log("你敲擊了Enter鍵")
}
  <p>回車事件:</p>
  <input v-model="message" placeholder="請輸入值" @keyup.enter="enterHandler" />
  <input v-model="message" placeholder="請輸入值" @keydown.enter="enterHandler" />

其它事件@keyup.delete，@keyup.tab，@keyup.ctrl，@keyup.ctrl.enter

按住ctrl滑鼠點選事件：
<button type="button" @click.ctrl="v++">點我</button>

滑鼠左擊：@click.left

滑鼠右擊：@click.right 或 @contextmenu.prevent 
<textarea @click.right="rightHandler" oncontextmenu="return false">
      這裡面有些內容
  </textarea>
oncontextmenu="return false" ：禁用彈窗

相關文章