專案網址

前言

前陣子同事跟我說，交大有一組丁組，可以用推甄的方式來面試研究所，其中一項就是要看對於程式的熱誠，於是打算把自己心裡想很久，但一直懶得做的那些project Idea拿出來做一做，希望明年可以推甄上，推甄不上就只能當考研戰士了

dpp-gif

語法介紹

v-on

可以配合click做點擊事件

iShot_2023-10-03_02.14.48

1
2
3
4
5
6
7
8
<div id="app">
    <p> {{title}} {{author}} {{age}}</p>
    <button v-on:click="age++">Increase Age</button>
    <!-- v-on:click=裡面，是可以直接寫javascript的 -->
    <button v-on:click="age--">Decrease Age</button>
    <!-- @click跟v-on是一樣的意思，因為v-on太常出現，就用@來代替了 -->
    <div @click="changeTitle('最後帝國')">Change Book</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
console.log('Hello vue')

const app =Vue.createApp({
    data(){
        return{
            title: 'The Final Empire',
            author: 'Brandon Sanderson',
            age: '45'

        }
    },
    methods:{
        changeTitle(title){
            this.title = title
        }
    }
})
app.mount('#app')

v-if

如果表達式中的值True，則會顯示html，若為False則不顯示(這邊是整個dom直接拿掉，所以是一個頻繁、大量的情形，不要用v-if，會導致性能下降)

1
2
3
4
5
6
7
8
  <div v-if="showBooks">
        <ul>
            <li v-for="book in books">
                <h3>{{ book.title }}</h3>
                <p> {{ book.author}}</p>
            </li>
        </ul>
  </div>

當然有if也會有else，當v-if沒顯示時，就會顯示else的內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
  <div v-if="showBooks">
        <ul>
            <li v-for="book in books">
                <h3>{{ book.title }}</h3>
                <p> {{ book.author}}</p>
            </li>
        </ul>
  </div>
  <div v-else>
        <ul>
           <h3>
             大哥沒有沒有書
          </h3>
        </ul>
  </div>

與v-if很類似的，是另一個叫做v-show的東西

v-show

v-show是透過css在控制dom的顯示與否，看起來功能跟if有八成像，但由於是css控制的，所以性能上會比v-if好很多

1
2
3
<div v-show="showBooks">
  現在展示的書
</div>

v-for

用來for-each一個list

v-bind

屬性綁定！

v-bind:屬性名

也可以簡化成:

Dynamic class

可以動態的將class 賦予給tag

1
2
3
4
5
6
7
8
   <div v-if="showBooks">
        <ul>
            <li v-for="book in books" v-bind:class="{ fav:book.isFav}">
                <h3>{{ book.title }}</h3>
                <p> {{ book.author}}</p>
            </li>
        </ul>
  </div>

computed

用來過濾資料的功能，類似pipLine

Vue Cli

記得要安裝node.js

1
node -v

接著安裝Vue Cli

1
npm intsall -g @vue/cli

安裝完之後就可以輸入

1
vue create project-name

來創建vue專案囉！

專案目錄

創建好的專案目錄就像這樣子，稍微看起來有點複雜，但其實很簡單的

public

底下就是放html的東西

Source

底下放的是js檔案跟vue檔案

其中js檔案跟我們初始學得不太一樣，他長得是這個樣子

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
  
createApp(App).mount('#app')
  

但其實概念是差不多的，比較特別的是vue檔案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>