---
# System prepended metadata

title: EK的vue學習筆記

---

# EK的vue學習筆記

:::info
:bulb: 要下載16.0以上版本的Node.js
:::
## 🛠 生成專案
1. 打開Terminal 如：windows的powershell、ubuntu的Terminator
2. cd "你要放專案的位置"
3. npm init vue@latest
4. Project name: "your-project-name" //你要的專案名稱
5. 一路按NO
6. cd "your-project-name" //你要的專案名稱
7. npm install //還沒研究出這是幹嘛的
8. npm run dev //你的網頁在本地架起來了
9. 用Terminal顯示的位址在瀏覽器打開，即可看到你的專案目前長圓的扁的
10. 編輯 "專案資料夾/src/App.vue" 開始你的vue練習
 
## 📖Vue小工具與他們的用法
#### :small_blue_diamond: script中的變數與函式的寫法
javascript：

    export default {
      data() {
        return {
          變數名: 變數值,
        }
      },
      methods: {
        函式名(輸入) {
          //函式做的事
        },
        函數中取變數的方法() {
          this.變數名 = !this.變數名;
        }
      }
      }
    }
    
#### :small_blue_diamond: v-bind：取變數-綁定script的資料
template：

    <div v-bind:id="變數名"></div>    完整寫法 
    <div :id="變數名"></div>          簡寫

#### :small_blue_diamond: v-on：取函式-監聽DOM事件(按鈕之類的)
template：

    <button v-on:click="函式名"> {{ count }} </button>    完整寫法 
    <button @click="函式名"> {{ count }} </button>        簡寫

#### :small_blue_diamond: v-if v-else：有條件地渲染元素
template：

      <h1 v-if="awesome">Vue is awesome!</h1>    如果awesome==true則顯示這個
      <h1 v-else>Oh no</h1>                      否則顯示這個

#### :small_blue_diamond: v-for：依照列表重複渲染
template：
   
    <ul>
        <li v-for="元素 in 列表" :key="排序依據">
          {{ 元素 }}
        </li>
    </ul>

#### :small_blue_diamond: v-model：雙向綁定

與v-bind很像，但差別是v-model會同步資料到js的data裡面，v-bind不會

template：

    <li v-for="元素 in 列表">
      <input v-model="元素">
    </li>
    
<!--JOJO-->

#### :small_blue_diamond: ref：手動操作 DOM
javascript：

    export default {
      mounted() {
        this.$refs.名稱.innerHTML = '改變的內容'
      }
    }    
    
template：

    <div ref="名稱">hello</div>

#### :small_blue_diamond: components：引入已經做好的子物件，props：讓子物件從父物件那裡取東西

javascript：

    import 你喜歡的子物件名字_1 from '檔案路徑_1'
    import 你喜歡的子物件名字_2 from '檔案路徑_2'

    export default {
      components: {
        你喜歡的子物件名字_1,
        你喜歡的子物件名字_2
      }
    }
    
template：

    <你喜歡的子物件名字_1 :子物件_1的變數 = "資料內容"/>
    <你喜歡的子物件名字_2 :子物件_2的變數 = "資料內容"/>
    
你喜歡的名字_1.vue javascript：

    export default {
      props: {
        子物件_1的變數: 資料型別
      }
    }
    
你喜歡的名字_1.vue template：

    <h2>{{ 子物件_1的變數 || '資料還沒傳進來' }}</h2> 
    
#### :small_blue_diamond: emits：向父組件發送事件
javascript：

    import 你喜歡的子物件名字_1 from '檔案路徑_1'

    export default {
      components: {
        你喜歡的子物件名字_1,
      }
    }
    
template：

    <你喜歡的子物件名字_1  @函式名稱="(傳入資料_1,傳入資料_2) => {你要做的事}" />

你喜歡的子物件名字_1.vue javascript：

    emits: ['函式名稱'],
    created() {
    this.$emit('函式名稱', '傳入資料_1', '傳入資料_2')
    }
    
        
#### :small_blue_diamond: watch：監測資料變動
javascript：

      //如果 要偵測的值 變化則執行 你要做的事情()
      watch: {
        要偵測的值() {
          你要做的事情()
        }
      }
    }
  
#### :small_blue_diamond: slot：依照列表重複渲染
template：

    <你喜歡的子物件名字_1>
        要給子物件顯示的東西
    </你喜歡的子物件名字_1>
    
你喜歡的子物件名字_1.vue template：
    
    <slot>
        不會顯示的東西
    </slot>//只會顯示 要給子物件顯示的東西

## ✒官網練習範例
#### :small_blue_diamond: v-bind與v-on同時使用之範例
    <script>
    export default {
      data() {
        return {
          text: ''
        }
      }
    }
    </script>

    <template>
      <input v-model="text" placeholder="Type here">
      <p>{{ text }}</p>
    </template>
    
#### :small_blue_diamond: v-if與v-else之範例
    <script>
    export default {
      data() {
        return {
          awesome: true
        }
      },
      methods: {
        toggle() {
          this.awesome = !this.awesome
        }
      }
    }
    </script>

    <template>
      <button @click="toggle">toggle</button>
      <h1 v-if="awesome">Vue is awesome!</h1>
      <h1 v-else>Oh no 😢</h1>
    </template>

#### :small_blue_diamond: v-for加上v-model之範例

    <script>
    let id = 0

    export default {
      data() {
        return {
          newTodo: '',
          hideCompleted: false,
          todos: [
            { id: id++, text: 'Learn HTML', done: true },
            { id: id++, text: 'Learn JavaScript', done: true },
            { id: id++, text: 'Learn Vue', done: false }
          ]
        }
      },
      computed: {
        filteredTodos() {
          return this.hideCompleted
            ? this.todos.filter((t) => !t.done)
            : this.todos
        }
      },
      methods: {
      }
    }
    </script>

    <template>
      <ul>
        <li v-for="todo in filteredTodos" :key="todo.id">
          <input type="checkbox" v-model="todo.done">
          <span :class="{ done: todo.done }">{{ todo.text }}</span>
        </li>
      </ul>
      <button @click="hideCompleted = !hideCompleted">
        {{ hideCompleted ? 'Show all' : 'Hide completed' }}
      </button>
    </template>


#### :small_blue_diamond: watch之範例

    <script>
    export default {
      data() {
        return {
          todoId: 1,
          todoData: null
        }
      },
      methods: {
        async fetchData() {
          this.todoData = null
          const res = await fetch(
            `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
          )
          this.todoData = await res.json()
        }
      },
      mounted() {
        this.fetchData()
      },
      //如果todoId變化則執行fetchData
      watch: {
        todoId() {
          this.fetchData()
        }
      }
    }
    </script>

    <template>
        <p>Todo id: {{ todoId }}</p>            顯示Todo id
        <button @click="todoId++">Fetch next todo</button>    執行Todo id++
        <p v-if="!todoData">Loading...</p>      如果todoData還沒進來就顯示loading
        <pre v-else>{{ todoData }}</pre>        否則顯示內容
    </template>
    