【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面

語言: CN / TW / HK

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

vue_demo

```

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菌做好朋友

「其他文章」