【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
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
- 引入標籤 import
- 對映元件標籤 components
- 使用元件標籤
```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菌做好朋友
「其他文章」
- 從校園到職場 | YK菌的2022年中總結
- 【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
- 【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
- 2022屆秋招,從被拒到上岸 | 談談YK菌在2021年的經歷與收穫
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符