---
# System prepended metadata

title: Eric的週活動紀錄
tags: [活動紀錄]

---

# Eric 週活動紀錄
###### tags: `活動紀錄`
## ==20240605==
:::success
本周進度:學習Vue 2
:::
# 1.安裝Vue
在vscode termianl打
```=
npm create vue@latest
```
![image](https://hackmd.io/_uploads/rk-5Vd6NC.png)


# 2.在Vue安裝tailwind

## Step1
#### 在vscdoe terminal
```=
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
## Step2
#### 在vscode tailwind.config.js中添加

```=
content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ],
```

## Step3
#### 在vscode src/assets/main.css

```=
@tailwind base;
@tailwind components;
@tailwind utilities;
```
![image](https://hackmd.io/_uploads/BykdS_pEC.png)

## Step4
#### 在vscode terminal

```=
npm run dev
```

## ==20240529==
:::danger
發生車禍當下一定要報警處理
:::
![image](https://hackmd.io/_uploads/BJkcQQE4A.png)

![image](https://hackmd.io/_uploads/S1TI-m4ER.png)

## ==20240522==
* **本週主題**
    :::info
      後台下拉選單篩選
     ![image](https://hackmd.io/_uploads/B1Q-gWj7A.png)
    :::
    :::success
    { preserveState: true }是inertia js的功能
    1.保留該組件的狀態，而不會重新加载组件
    2.不需在從後端回傳傳過去的值
    :::
    ```=
    //在需要的頁面中添加   
    const props = defineProps({
      response: Object,
    });
    
    const rtData = computed(() => props.response?.rt_data ?? {});
    
    // select下拉選單
    const selectedYear = ref(rtData.value.selectedYear ?? '0');
    const selectedType = ref(rtData.value.selectedType ?? '0');
    
    // 監聽選擇變化並更新路由
    const updateRoute = () => {
      router.get(route('b.news.index'), {
        type: selectedType.value,
        year: selectedYear.value,
      }, { preserveState: true });
    };
    
    watch([selectedYear, selectedType], updateRoute, { immediate: true });
    ```
    ```=
    <select v-model="selectedYear" class="w-[140px] h-[40px] text-xl leading-[20px] cursor-pointer rounded-[4px]">
      <option value="0">全部年度</option>
      <option v-for="year in yearData" :key="year" :value="year">{{ year }}</option>
    </select>
    ```
    :::info
        在對應的controller中，做篩選動作
    :::
    ```＝
    $applicantWork = ApplicantWork::select('id', 'title', 'year', 'datetime', 'name');
    
    // 下拉選單年份篩選
    if ($request->has('year') && !empty($request->year)) {
        $applicantWork->where('year', $request->year);
    }
    ```
## ==20240410==
* **本週主題**
    :::info
      Vue props
    :::
    :::info
    簡單來說，props是一個用於父、子組件用來傳遞data的一個方式。通過props     可以從父組件傳遞data給子組件。
    :::
    ```=
    //指定資料格式(避免資料類型不同的狀況)   
    props:{
      buttonText: {
        type: String,
      },
      num:{
        type: Number,
        //變為必要屬性
        required: true,
        //預設屬性
        default: 'hello',
        //自訂驗證規則
        validator: value => value > 0
      }
    },
    ```
    :::info
      Vue emit
    :::
  :::info
  *  emit是由子組件向父組件發送"事件"。
  *  父組件可以使用子組件標籤上的 v-on 或 @ 屬性來監聽這個事件，並在觸發時執行相應的方法。
  :::
    
![image](https://hackmd.io/_uploads/SJ-OYoQxR.png)


## ==20240403==
* **本週主題**
    :::info
      Vue初學
    :::
* ***v-on事件***
     :::info
      相當於JS中的function
     :::
  :::info
  ![image](https://hackmd.io/_uploads/SyLdDHF1C.png)
  
  ![image](https://hackmd.io/_uploads/rJkMuHYyA.png)
  :::
  
* ***v-bind 屬性綁定***
  :::info
      與js toggle很相近的使用方式
  :::

     ```=
    <button type="button" @click="togglePassword()">顯示/關閉密碼</button>
    <input :type="showPassword ? 'text' : 'password'" class="text-black">
    ```

    ```=
    data() {
      return {  
      showPassword: false,
      };
    },

    methods: {
      // 更換密碼顯示
      togglePassword(){
        this.showPassword = !this.showPassword;
      },
    },
    ```
    
* ***v-model 雙向綁定***
    :::success
      感覺可以用在註冊個人資料到後端的相關操作
    :::
    :::info
    ![image](https://hackmd.io/_uploads/HkqEhSK1A.png)
    
    ![image](https://hackmd.io/_uploads/rJdY2rFJC.png)
    
    ![image](https://hackmd.io/_uploads/B1JdhrtkR.png)

    :::
  
* :::danger
  **2024/04/03 7級大地震!!!(龜山島頭斷裂)**
  :::
  :::info
  Before
  ![image](https://hackmd.io/_uploads/ryUNlEq1C.png)
  
  After 
  ![image](https://hackmd.io/_uploads/r1vWxVcyR.png)
  :::

