TAKA的學習筆記

ref()

代表響應式變量，將變數宣告成響應式變量，則代表vue 能夠自動追蹤這些變數

<script setup>
  import { ref } from 'vue'
  // 將inputName 宣告為型態為字串的響應式變量
  const inputName = ref('name')
  
  const append = (appendString) => {
    // 響應式變量需要透過.value 才能存取其值
    inputName.value += appendString;
  };
</script>

v-bind

將javascript 變數的值綁定到DOM 上

<script setup>
  import { ref } from 'vue'
  const inputId = ref('name')
</script>

<template>
  <!-- h1的id 就會是上面宣告的 'name' -->
  <h1 v-bind:id="inputId">Header</h1>
  
  <!-- v-bind 也可以簡寫成":"，如下 -->
  <!-- <h1 :id="inputId">Make me red</h1> -->
</template>

v-on

監聽事件觸發方法

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  function increment() {
    count.value++
  }
</script>

<template>
  <!-- 綁定click事件，會觸發function: increment -->
  <!-- 進一步因為button 文字有綁定渲染 count -->
  <!--所以javascript 變數count 的修改會及時渲染，改變button 文字 -->
  <button v-on:click="increment">Count is: {{ count }}</button>
  
  <!-- v-bind 也可以簡寫成":"，如下 -->
  <!-- <button @click="increment">Count is: {{ count }}</button> -->  
</template>

v-model

v-bind + v-on，實現雙向綁定: DOM 的值與javascript 變數

<script setup>
  import { ref } from 'vue'
  const text = ref('')
  
  function appendOne(){
    text.value += '1'
  }
</script>

<template>
  <!-- 當修改input 內容，p 會顯示綁定的text 值 -->
  <input v-model="text" placeholder="Type here">
  <!-- 點擊p 修改text，input 的值也會隨之改變 -->
  <p @click="appendOne">{{ text }}</p>
</template>

v-if, v-else-if, v-else

當後方的呼叫的function 或判斷式成立，才會渲染tag

<script setup>
  import { ref } from 'vue'
  const loginType = ref('')  
  function toggleLoginType (){
    switch(loginType.value){
      case 'username':
        loginType.value = 'email';
        break;
      case 'email':
        loginType.value = 'username';
        break;
      default:
        loginType.value = 'username';
        break;        
    }
  }
</script>

<template >
  <div v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
  </div>
  <div v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </div>
  <button @click="toggleLoginType ">Toggle login type</button>
</template>

另外有關渲染，vue 會傾向於重新利用不同template 中的相同元素，請參考以下連結: 条件渲染 — Vue.js (vuejs.org)

v-for

就是for 迴圈

<script setup>
  import { ref } from 'vue'
  const todos = ref([
    { id: 1, text: 'Learn HTML' },
    { id: 2, text: 'Learn JavaScript' },
    { id: 3, text: 'Learn Vue' }
  ])

</script>

<template>
  <ul>
    <!-- 有趣的是後面，可以在for-loop 順便綁定li.key attribute -->
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</template>

References：
https://zh.wikipedia.org/zh-tw/Node.js