---

theme: vue-pro highlight: a11y-dark

---

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第24天，活動詳情檢視：2021最後一次更文挑戰」

今天我們主要來用Vue做一個小demo，一個動態評價頁面的小demo，主要是為了練習之前學習過的一些知識

1. 目標功能介面

專案程式碼：http://github.com/yk2012/vue_demo/tree/main/demo2_Comments

2. 介面模組拆分

3. 主頁 index.html

在head標籤裡引入bootstrap.css檔案 ```html

```

4. 靜態頁面搭建

4.1 main.js

• 打包入口js檔案，後期全部打包形成一個app.js在主頁index.html中

```javascript import Vue from 'vue' import App from './App.vue'

new Vue({ el: '#app', components: { App }, template: '' }) ```

4.2 App.vue

1. 引入標籤 import
2. 對映元件標籤 components
3. 使用元件標籤 ```html

   ```

   4.3 Add.vue

   ```html

   ```

   4.4 List.vue

   ```html

   ```

   4.5 展示

   

   5. 動態元件

   5.1 動態顯示初始化資料

   • 資料data：使用者名稱+評論內容
   • 用陣列儲存 []
   • 資料放在App元件中

   5.1.1 App.vue

   ```html

   ```

   5.1.2 List.vue

   ```html

   ```

   5.1.3 Item.vue

   ```html

   ```

   5.1.4 展示

   

   5.2 動態互動——新增操作

   App.vue

   • 資料在哪個元件，更新資料的行為（方法）就定義在哪個元件
   • 定義新增評論函式（方法）
   • 傳遞給Add.vue

   ```html

   ```

   Add.vue

   • 給按鈕新增事件 @click
   • 檢查輸入的合法性
   • 根據輸入的資料，封裝成一個comment物件
   • 新增到comments中
   • 清除輸入
   • 從輸入框拿資料 v-model
   • 定義data
   • 新增方法add

   ```html

   ```

   5.3 動態互動——刪除操作

   App.vue

   ```html

   ```

   List.vue

   ```html

   ```

   Item.vue

   ```html

   ``` 專案程式碼：http://github.com/yk2012/vue_demo/tree/main/demo2_Comments

   最後，歡迎關注我的專欄，和YK菌做好朋友