原创 前端筆記Vue項目day3(三)

子組件向父組件傳值子組件用$emit()觸發事件$emit() 第一個參數爲 自定義的事件名稱 第二個參數爲需要傳遞的數據父組件用v-on 監聽子組件的事件[mw_shl_code=applescript,true]<div id

原创 前端筆記Vue項目day2(二)

表單修飾符.number 轉換爲數值注意點: 當開始輸入非數字的字符串時,因爲Vue無法將字符串轉換成數值所以屬性值將實時更新成相同的字符串。即使後面輸入數字,也將被視作字符串。 .trim 自動過濾用戶輸入的首尾空白字符只

原创 前端筆記Vue項目day2(五)

數組變異方法在 Vue 中,直接修改對象屬性的值無法觸發響應式。當你直接修改了對象屬性的值,你會發現,只有數據改了,但是頁面內容並沒有改變變異數組方法即保持數組方法原有功能不變的前提下對其進行功能拓展 [td]push()往數組最後面添加一

原创 前端筆記Vue項目day2(三)

自定義指令局部指令局部指令,需要定義在 directives 的選項 用法和全局用法一樣局部指令只能在當前組件裏面使用當全局指令和局部指令同名時以局部指令爲準[mw_shl_code=applescript,true]<input t

原创 前端筆記Vue項目day3(六)

2、實現 標題和結算功能組件標題組件實現動態渲染從父組件把標題數據傳遞過來 即 父向子組件傳值把傳遞過來的數據渲染到頁面上 結算功能組件從父組件把商品列表list 數據傳遞過來 即 父向子組件傳值把傳遞過來的數據計算最終價格渲染到頁面上

原创 前端筆記Vue項目day3(八)

實現組件更新數據功能 上將輸入框中的默認數據動態渲染出來輸入框失去焦點的時候 更改商品的數量子組件中不推薦操作數據 把這些數據傳遞給父組件 讓父組件處理這些數據父組件中接收子組件傳遞過來的數據並處理[mw_shl_code=apple

原创 前端筆記Vue項目day3(九)

實現組件更新數據功能 下子組件通過一個標識符來標記對用的用戶點擊 + - 或者輸入框輸入的內容父組件拿到標識符更新對應的組件[mw_shl_code=applescript,true]<!DOCTYPE html><html lan

原创 前端筆記Vue項目day2(七)

4 修改圖書-上點擊修改按鈕的時候 獲取到要修改的書籍名單4.1 給修改按鈕添加點擊事件, 需要把當前的圖書的id 傳遞過去 這樣才知道需要修改的是哪一本書籍 把需要修改的書籍名單填充到表單裏面4.2 根據傳遞過來的id 查出book

原创 前端筆記Vue項目day3(十)

[mw_shl_code=applescript,true] .container .item .del:hover {background-color: orange;}</style></head><body><div id="app"

原创 前端筆記Vue項目day2(九)

6 刪除圖書6.1 給刪除按鈕添加事件 把當前需要刪除的書籍id 傳遞過來6.2 根據id從數組中查找元素的索引6.3 根據索引刪除數組元素[mw_shl_code=applescript,true] <tbody><tr :key='it

原创 前端筆記Vue項目day3(五)

作用域插槽父組件對子組件加工處理既可以複用子組件的slot,又可以使slot內容不一致[mw_shl_code=applescript,true]<div id="app"><!-- 1、當我們希望li 的樣式由外部使用組件的地方定義,因爲

原创 前端筆記Vue項目day2(十)

常用特性應用場景1 過濾器Vue.filter 定義一個全局過濾器[mw_shl_code=applescript,true] <tr :key='item.id' v-for='item in books'><td>{{item.id}

原创 前端筆記Vue項目day2(一)

表單基本操作獲取單選框中的值通過v-model[mw_shl_code=applescript,true]<!-- 1、 兩個單選框需要同時通過v-model 雙向綁定 一個值 2、 每一個單選框必須要有value屬性 且value 值不

原创 前端筆記Vue項目day3(一)

組件組件 (Component) 是 Vue.js 最強大的功能之一組件可以擴展 HTML 元素,封裝可重用的代 組件註冊全局註冊Vue.component('組件名稱', { }) 第1個參數是標籤名稱,第2個參數是一個選項對象全

原创 前端筆記Vue項目day2(八)

5 修改圖書-下5.1 定義一個標識符, 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 即 處於編輯狀態下 當前控制書籍編號的輸入框禁用 5.2 通過屬性綁定給書籍編號的 綁定 disabled 的屬性 flag 爲 tr