# Eric 週活動紀錄
###### tags: `活動紀錄`
## ==20240605==
:::success
本周進度:學習Vue 2
:::
# 1.安裝Vue
在vscode termianl打

npm create vue@latest


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


## Step4
#### 在vscode terminal

npm run dev

## ==20240529==
:::danger
發生車禍當下一定要報警處理
:::


## ==20240522==
* **本週主題**
:::info
後台下拉選單篩選
:::
:::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 或 @ 屬性來監聽這個事件，並在觸發時執行相應的方法。
:::


## ==20240403==
* **本週主題**
:::info
Vue初學
:::
* ***v-on事件***
:::info
相當於JS中的function
:::
:::info

:::

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



:::

* :::danger
**2024/04/03 7級大地震!!!(龜山島頭斷裂)**
:::
:::info
Before

After
:::