# 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>