---

theme: vue-pro highlight: a11y-dark

---

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

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

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

1. 目標功能界面

項目代碼：https://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

   ``` 項目代碼：https://github.com/yk2012/vue_demo/tree/main/demo2_Comments

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