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

「其他文章」