當(dāng)前位置：首頁 >

Vue — 第三天（计算属性和json-server）

發(fā)布時間：2023/12/13 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue — 第三天（计算属性和json-server）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

計算屬性

使用場景

如果一個結(jié)果需要依賴data中的數(shù)據(jù)，但是需要經(jīng)過一些邏輯處理，才能得到你想要的數(shù)據(jù)。此時就可以使用計算屬性。

例如：要對給定的字符串做翻轉(zhuǎn)處理之后再來顯示。

<div id="app"><h3>{{msg.split('').reverse().join('')}}</h3></div><script src="./vue.js"></script><script>const vm = new Vue({el: '#app',data: {msg: 'javascript'}})</script>

定義格式

在vue實例中，補(bǔ)充computed配置項。

new Vue({// 聲明計算屬性computed: {//屬性名字（計算屬性名稱）//屬性的值（計算屬性處理函數(shù)）計算屬性名1 () {// 對依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行returnreturn }，計算屬性名2 () {// 對依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行returnreturn }} })

computed 是vue的配置選項，它的值是一個對象，其中可定義多個計算屬性，每個計算屬性就是一個函數(shù)。

屬性名稱：計算屬性的名稱
屬性的值：計算屬性的素材函數(shù)
- 對需要依賴的數(shù)據(jù)，進(jìn)行邏輯上的處理
- 處理完畢后，需要return出去，返回的值就是計算屬性的值

使用格式

在兩個地方使用：

模板
- 用插值表達(dá)式 {{計算屬性名}}
- 用其它指令
在實例內(nèi)
- this.計算屬性名

示例

顛倒字符串

<div id="app"><h3>{{msg.split('').reverse().join('')}}</h3><h3>{{reverseMsg}}</h3></div><script src="./vue.js"></script><script>const vm = new Vue({el: '#app',data: {msg: 'hi vue'},// 聲明計算屬性computed: {//屬性名字（計算屬性名稱）//屬性的值（計算屬性處理函數(shù)）reverseMsg () {// 對依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行returnreturn this.msg.split('').reverse().join('')}}})</script>

在模板中使用計算屬性，和使用data的方式是一樣的。
- 雖然在計算屬性中聲明的是函數(shù)，但是在模板中使用，當(dāng)中數(shù)據(jù)來使用，不需要加括號。

總結(jié)：

什么時間用：需要對數(shù)據(jù)進(jìn)行復(fù)雜的邏輯加工，產(chǎn)生新的數(shù)據(jù)時。
定義：就是一個特殊的配置項computed。其中有多個函數(shù)。
使用：計算屬性的使用方式與data中的數(shù)據(jù)項一致；
- 計算屬性-計算：這個值是對原數(shù)據(jù)進(jìn)行計算之后得到的新的數(shù)據(jù)
- 計算屬性-屬性：它的使用方法與原數(shù)據(jù)一樣。this.計算屬性名,{{計算屬性名}}
執(zhí)行的時機(jī)：如果計算屬性中依賴的數(shù)據(jù)項變化時，它會自動調(diào)用。

computed有緩存

問：

當(dāng)我們在模板中來顯示一份經(jīng)過對數(shù)據(jù)項進(jìn)行復(fù)雜計算之后的結(jié)果時，我們有兩種解決方案：

計算屬性
函數(shù)

應(yīng)該如何選擇？

答：

methods定義函數(shù)，如果在模板中使用，每使用一次，就相當(dāng)于調(diào)用了一次，處理邏輯會重新執(zhí)行。
computed定義計算屬性，如果在模板中使用，使用多次，但是如果依賴的數(shù)據(jù)不發(fā)生改變，計算屬性對應(yīng)的函數(shù)不會重新執(zhí)行。
- 計算屬性會做緩存，提高渲染的性能。

示例

<div id="app"><h3>學(xué)習(xí)計算屬性</h3><p>計算屬性：{{ reversedMsg }}</p><p>計算屬性：{{ reversedMsg }}</p><p>計算屬性：{{ reversedMsg }}</p><hr><p>函數(shù)：{{fReversedMsg()}}</p><p>函數(shù)：{{fReversedMsg()}}</p><p>函數(shù)：{{fReversedMsg()}}</p></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 計算屬性的特點(diǎn)：緩存// - 如果計算屬性所依賴的數(shù)據(jù)項并沒有發(fā)生變化，則就算使用多個計算函數(shù)，其函數(shù)也只執(zhí)行一次// 因為它把結(jié)果緩存起來了。const vm = new Vue({el: '#app',data: {msg: 'javascript'},methods: {fReversedMsg () {console.log( '函數(shù) fReversedMsg' )//把msg的翻轉(zhuǎn)一下let newMsg = this.msg.split('').reverse().join('')return newMsg}},computed: {reversedMsg () {console.log( 'reversedMsg' )//把msg的翻轉(zhuǎn)一下let newMsg = this.msg.split('').reverse().join('')return newMsg}}})// setTimeout (function() {vm.msg = "abc"// 由于計算屬性有緩存，雖然在頁面上用到三次，但它的函數(shù)體只執(zhí)行一次。// 對于普通的函數(shù)，在頁面上用到了三次，它就會執(zhí)行三次},2000) </script>

總結(jié)：

計算屬性有緩存，提高渲染性能。
如果在頁面上需要用到對現(xiàn)有的數(shù)據(jù)進(jìn)行加工得到新數(shù)據(jù)，則時要使用計算屬性

案例-資產(chǎn)列表(續(xù))

目標(biāo)

計算總資產(chǎn)（計算屬性）
根據(jù)輸入的內(nèi)容篩選符合條件的資產(chǎn)（計算屬性）

篩選

思路：

- 給篩選輸入框添加雙向綁定 - 添加一個計算屬性：根據(jù)輸入框的內(nèi)空對list進(jìn)行篩選 - 把計算屬性的值顯示在表格中

求和

思路：

補(bǔ)充一個計算屬性，對cList進(jìn)行循環(huán)，求出它的price的和

代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><style>.red {color:red}</style> </head> <body><div id="app"><div class="container"><div class="form-group"><div class="input-group"><input v-focus v-model.trim="key" type="text" class="form-control" placeholder="搜索"></div></div><table class="table table-bordered table-hover"><thead><tr><th>編號</th><th>資產(chǎn)名稱</th><th>價格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,idx) in cList"><td>{{item.id}}</td><td>{{item.name}}</td><td :class="{red:item.price>100}">{{item.price | $}}</td><td><a href="#" @click.prevent="hDel(idx)">刪除</a></td></tr></tbody><tfoot><tr><td colspan="4">共計:{{cTotal | $}}</td></tr></tfoot></table><form class="form-inline"><div class="form-group"><div class="input-group"><input v-model.trim="name" type="text" class="form-control" placeholder="資產(chǎn)名稱"></div></div>    <div class="form-group"><div class="input-group"><input v-model.trim.number="price" type="text" class="form-control" placeholder="價格"></div></div>    <button class="btn btn-primary" @click.prevent="hAdd">添加資產(chǎn)</button></form></div></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script><script>// 目標(biāo)：用vue.js實現(xiàn)// 1. 把表格數(shù)據(jù)顯示出來// 2. 實現(xiàn)刪除功能// 3. 添加功能// 4. 標(biāo)注：如果價格超過100，標(biāo)紅色顯示。// 步驟：// 1.引入vue.js// 2. 實例化vue對象 // 三大件： el,data,methods// 3. 實現(xiàn)功能// (1) 循環(huán)渲染數(shù)據(jù)： v-for// (2) 刪除數(shù)據(jù)：@click,并傳入要刪除的下標(biāo)// (3) 標(biāo)注紅色動態(tài)的添加樣式，只有>100才加。使用對象來綁定class.// (4) 添加功能// 1) 基本輸入框結(jié)構(gòu)// 2) 點(diǎn)擊添加// - 收集用戶的輸入信息:v-model,補(bǔ)一些必要的修飾符。// - 簡單判空// - 添加到list中// (5) 計算總和// 補(bǔ)充一個計算屬性，在其中對list進(jìn)行循環(huán)，算出總共的price// (6) 篩選功能// 在篩選區(qū)域的input框中輸入關(guān)鍵字，則在下面的list中找出對應(yīng)的項,其它項應(yīng)該要隱藏起來// - 給input添加v-model,收集用戶需要的關(guān)鍵字// - 定義一個計算屬性，根據(jù)關(guān)鍵字來在list中進(jìn)行數(shù)據(jù)的過濾，找出符合關(guān)鍵字要求的項const vm = new Vue({el: '#app',data: {name: '', // 名稱price: 0, // 價格list: [{ id: 1, name: '外套', price: 199 },{ id: 2, name: '褲子', price: 34 },{ id: 3, name: '鞋', price: 25.4 },{ id: 4, name: '頭發(fā)', price: 19900 },{ id: 5, name: '梳子', price: 899 }],key: '' // 搜索關(guān)鍵字},computed: {cList () {if(this.key === '') {return this.list}// 這個計算屬性依賴于 key 和list,只有一個變化，則它會重新執(zhí)行// 如果視圖上沒有用計算屬性，那么，這個依賴項變化時，計算屬性不會執(zhí)行console.log("cList",Date.now())// 根據(jù)this.key對list進(jìn)行過濾// 對于this.list中的每一項，如果其中name包含 this.key關(guān)鍵字，則保留let newList = this.list.filter(item => {// 如果其中name包含 this.key關(guān)鍵字if(item.name.includes( this.key )) {return true} else {return false}})// console.log( newList )return newList},// 由于添加了篩選功能，則要對整個的計算屬性cList中數(shù)據(jù)進(jìn)行循環(huán)，計算出總共的pricecTotal: function() {// 這個計算屬性依賴于：另一個計算屬性 cList// 當(dāng)cList 變化時，這個計算屬性也會重新執(zhí)行let totalPrice = 0this.cList.forEach(item => {totalPrice = totalPrice + item.price})return totalPrice.toFixed(2)}},methods: {hDel (index) {console.log('要刪除的下標(biāo)是',index)// 刪除數(shù)組中指定位置的元素this.list.splice(index, 1)},hAdd () {// 收集用戶的輸入信息// 簡單判空if(this.name ==='') {return }if(this.price == '' || this.price < 0) {return }// 添加到list中console.log(this.name,this.price)// 向數(shù)組中添加一個元素let id = 1if (this.list.length > 0) {// 新的id = 數(shù)組中最后一個元素的id值+1id = this.list[this.list.length-1].id + 1}this.list.push({id: id,name: this.name,price: this.price})}},filters: {// 定義過濾器// 過濾器的名字就是$$: function (value, _currency) {// 正則表達(dá)式：全局匹配三個連續(xù)的，且之后也是數(shù)值的數(shù)值var digitsRE = /(\d{3})(?=\d)/g;value = parseFloat(value);// 判斷是否數(shù)值if (!isFinite(value) || !value && value !== 0) return '';// 設(shè)置金額的符號_currency = _currency != null ? _currency : '￥';// 取絕對值，保存兩位有效數(shù)字，轉(zhuǎn)成字符串var stringified = Math.abs(value).toFixed(2);// 獲取整數(shù)部分。 -3 表示倒數(shù)3位var _int = stringified.slice(0, -3);// 整數(shù)部分以3為基準(zhǔn)長度劃分，剩下幾位var i = _int.length % 3;// 取出頭部// 12345 ---> 12,var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';// 取出小數(shù)字部分var _float = stringified.slice(-3);// 判斷符號var sign = value < 0 ? '-' : '';// 整體輸出return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;}// $: function(value) {// // 1. 在前面加一個￥// // 2. 千分位的分隔，加, // // 有難度，與vue,與過濾器沒有關(guān)系。請大家自己在下面做練習(xí)。 // // 我們這里直接去vue的源碼中抄一段出來，直接用。// // 在Vue1.0版本中，它是自帶這個貨幣金額過濾器// console.log(value)// return '￥'+value// }},directives: {focus: {inserted (el) {el.focus()}}}})// list: [// { id: 1, name: '外套', price: 99 },// { id: 2, name: '褲子', price: 34 },// { id: 3, name: '鞋', price: 25.4 },// { id: 4, name: '頭發(fā)', price: 19900 }// ]</script> </body> </html> computed: {cList () {if(this.key) {return this.list.filter(it => it.name.includes(this.key))}else {return this.list}},cTotal () {return this.cList.reduce((total,it)=>{ return total+it.price*1}, 0)} },

自已寫接口

在開發(fā)過程中，經(jīng)常會遇到后端接口滯后的情況：前端頁面寫完了，后端的接口沒有就緒，此時，我們就可以先準(zhǔn)備接口。

前后端分離開發(fā)

代碼層的分離

代碼上的分離（前后端是同一個項目，開發(fā)目錄上的區(qū)分）
項目級的分離（前端是一個單獨(dú)的項目，后臺是一個單獨(dú)的項目）

開發(fā)的內(nèi)容的分離

后端負(fù)責(zé)業(yè)務(wù)邏輯，寫接口
前端負(fù)責(zé)業(yè)面交互，調(diào)接口。

我們的理解：必須后臺先提供接口，前端才能進(jìn)行開發(fā)。

分離的意義：前后端可以并行開發(fā)。

收到任務(wù)

前端后端一起制定接口規(guī)則，形成接口文檔：接口名，功能，參數(shù)，返回值…

并行開發(fā)

后端開發(fā)接口：接口1，接口2，…

前端寫頁面，調(diào)用接口(自己按第2步的接口文檔要求，寫真的假接口)

json-server

前端自己寫接口，可以用nodejs自己寫，也可以借助第三方現(xiàn)成的工具：json-server

json-server快速地根據(jù)json文件，生成接口

json ----json-server-----> 接口

在后端接口沒有交付之前，使用json-server快速創(chuàng)建模擬接口，推進(jìn)前端開發(fā)進(jìn)程。

在后端接口實現(xiàn)之后，再切換回去。

使用步驟

全局安裝json-server

它是依賴于nodejs的第三方包。需要全局安裝（不需要初始化）。

npm i json-server -g# 安裝完成 C:\Users\fanyoufu\AppData\Roaming\npm\json-server -> C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\json-server\lib\cli\bin.js + json-server@0.16.1 updated 1 package in 12.418s ##

只需要安裝一次就行了。

準(zhǔn)備空文件夾

在任意目錄下，準(zhǔn)備一個空文件夾，取名mock-server(可改成其它名字)

創(chuàng)建json文件

在文件夾中新建一個名為db.json文件(可改其它名稱，注意名字是是英文）

初始化結(jié)構(gòu)

在db.json文件中，按json格式的要求，去定義一個對象：

鍵值對格式
用雙引號括起來

{"assets": [{ "id": 1, "name": "外套", "price": 99 },{ "id": 2, "name": "褲子", "price": 34 },{ "id": 3, "name": "鞋","price": 25.4 },{ "id": 4, "name": "頭發(fā)", "price": 19900 }] }

啟動接口服務(wù)

根據(jù)上面創(chuàng)建的db.json自動地生成接口。

在此文件夾下，打開命令行窗口，輸入命令json-server db.json (json-server后有空格)

如果沒有錯誤，則運(yùn)行結(jié)果如下：

測試

在瀏覽器中訪問上面地址

注意：

json格式。
屬性名 —> 接口的地址
屬性值 —> 接口返回數(shù)據(jù) （數(shù)組|對象）

原理圖

RESTful接口

json-server提供的接口是符合RESTful接口規(guī)范的。

在寫接口時，每個程序員都有自己的寫法:取不同的名字，例如：實現(xiàn)添加資產(chǎn)

A同學(xué)： localhost:3000/addAsset | delAsset

B同學(xué)： localhost:3000/insertAsset | deleteAsset

C同學(xué)： localhost:3000/tjzj | sczj

針對上述問題，提出一套約定：

RESTful接口的規(guī)范是通過

請求方式來決定操作類別（添加，刪除，修改，查詢）
用名詞來表示要操作的目標(biāo)

以上面啟動的服務(wù)為例：

接口地址請求方式操作類型

/assets	GET	獲取全部數(shù)據(jù)
/assets/1	GET	獲取單個數(shù)據(jù)
/assets	POST	添加操作 {name,price}
/assets/1	DELETE	刪除操作
/assets/1	PUT	完整修改{name,price}
/assets/1	PATCH	局部修改{name}

以上接口規(guī)則，就是restful規(guī)則。json-server提供的就是符合restful規(guī)則的接口。

postman測試

使用postmant來測試json-server提供的接口。

獲取全部數(shù)據(jù)

GET: http://localhost:3000/assets

獲取單個數(shù)據(jù)

以id為查詢依據(jù)

GET: http://localhost:3000/assets/1

根據(jù)條件查詢數(shù)據(jù)

json-server服務(wù)器提供了條件查詢的功能

格式: ? 字段**_like**=值

不可以加引號！

添加操作

以json格式傳遞參數(shù)，id會自動增加。

POST:http://localhost:3000/assets/

{"name": "電腦", "price": 6880}

另一個操作示例：

刪除操作

以id為查詢依據(jù)

DELETE: http://localhost:3000/assets/1

完整修改

以json格式傳遞參數(shù)

PUT: http://localhost:3000/assets/3

要求必須傳入一個完整的對象（如果這一條記錄中有100個屬性，則要傳入100個屬性），因為它會整體覆蓋這條數(shù)據(jù)。

局部修改

以json格式傳遞參數(shù)

PATCH: http://localhost:3000/assets/3

只需要傳入要更改的字段（要修改哪個屬性就傳入哪個屬性）。

axios調(diào)用接口

我們發(fā)ajax請求接口，有如下方式：

原生的。純手寫。XMLHttpRequest…
$.ajax()。jquery中的ajax
axios。它是一個專業(yè)的，只發(fā)ajax請求的工具。它可以在nodejs中和瀏覽器使用。

下載并使用

axios是一個js工具，要想使用，就要先下載。

http://www.axios-js.com/docs/

axios提交數(shù)據(jù)的時候，默認(rèn)的數(shù)據(jù)類型（content-type）是 application/json

下載地址：https://unpkg.com/axios/dist/axios.min.js

格式

完整寫法

axios({// 請求方式 get|post|put|patch|delete 大小寫不區(qū)分method: 'get',// 路徑上傳參在url后進(jìn)行拼接url: 'http://localhost:3000/brands/1',// ?后鍵值對傳參params: {},// 請求體傳參data: {},// 請求頭傳參headers: {} }).then(res=>{console.log('成功') }).catch(err=>{console.log('失敗') })

簡寫格式

對于比較簡單接口調(diào)用，可以采用簡寫格式：

格式：

axios.請求方式（url, .......).then().catch()

示例：

// get類型的參數(shù)要放在寫params中 axios.get(url,params: {}).then(res=>{console.log('成功')}) .catch(err=>{console.log('失敗') }) // post類型直接寫參數(shù) axios.post(url,{}).then(res=>{console.log('成功')}) .catch(err=>{console.log('失敗') })

示例

通過json-server啟動接口服務(wù)器，然后再寫axios代碼來進(jìn)行調(diào)用測試

查詢

// 1. 查詢// 所有// axios.get('http://localhost:3000/assets').then(res=>{// // res是響應(yīng)對象 // res.data是后臺響應(yīng)內(nèi)容（數(shù)據(jù)）// console.log(res.data)// })// // 單個// axios.get('http://localhost:3000/assets/2').then(res=>{// // res是響應(yīng)對象 // res.data是后臺響應(yīng)內(nèi)容（數(shù)據(jù)）// console.log(res.data)// })// 篩選條件查詢// 方式1：自己手動在地址欄?后進(jìn)行拼接// 方式2：針對get傳參，?后鍵值對傳參，固定傳參方式 {params:{//傳參對象 }}axios.get('http://localhost:3000/assets',{params:{name_like:'奧'}}).then(res=>{// res是響應(yīng)對象 // res.data是后臺響應(yīng)內(nèi)容（數(shù)據(jù)）console.log(res.data)})

添加

// 2. 添加// 除去get請求外，函數(shù)的第二個參數(shù)都是請求體傳參，是對象類型。axios.post('http://localhost:3000/assets',{name:"寶馬",price:500000}).then(res=>{console.log('成功')})

刪除

// 3. 刪除axios.delete('http://localhost:3000/assets/2').then(res=>{console.log('成功')})

修改

// 4. 修改完整// axios.put('http://localhost:3000/assets/3',{name:"長安奔奔",price:36000}).then(res=>{// console.log('成功')// })// 5. 修改局部axios.patch('http://localhost:3000/assets/3',{name:"奔奔"}).then(res=>{console.log('成功')})

總結(jié)：不同方式的參數(shù)怎么傳遞給后臺。

案例-資產(chǎn)列表-接口版

目標(biāo)：

用json-server啟動后端接口服務(wù)器；
axios發(fā)請求
用vue管理視圖

渲染列表

目標(biāo)：用axios請求json-server提供的接口，并顯示數(shù)據(jù)出來。

準(zhǔn)備靜態(tài)頁面

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap.min.css"> </head><body><div id="app"><div class="container"><form class="form-inline" style="padding: 20px 0"><input type="text" class="form-control" placeholder="輸入關(guān)鍵字進(jìn)行搜索"></form><table class="table table-bordered table-hover"><thead><tr><th>編號</th><th>資產(chǎn)名稱</th><th>創(chuàng)建時間</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>xxx</td><td>xxxx</td><td><a href="#">刪除</a></td></tr></tbody></table><form class="form-inline"><input type="text" class="form-control" placeholder="資產(chǎn)名稱">    <button class="btn btn-primary">添加資產(chǎn)</button></form></div></div> </body></html>

創(chuàng)建vue實例，實現(xiàn)列表渲染

實現(xiàn)渲染列表，大致步驟：

在data配置項中，聲明一個列表數(shù)據(jù)list，先設(shè)置一些假數(shù)據(jù)。
在模板當(dāng)中根據(jù)list和數(shù)據(jù)中的字符段進(jìn)行渲染
- 使用v-for指令
- 注意處理無數(shù)據(jù)的情況。

vue實例如下：

對應(yīng)模板如下：

<tbody><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><a href="#">刪除</a></td></tr><tr v-if="list.length===0"><td colspan="4" style="text-align: center;">暫無數(shù)據(jù)</td></tr> </tbody>

發(fā)ajax請求，取回真數(shù)據(jù)

現(xiàn)在一切就緒，只需在某個時間點(diǎn)，向后臺接口發(fā)請求，拿回數(shù)據(jù)，給list重新賦值即可

以前：window.onload = function(){} 默認(rèn)渲染，頁面加載完成之后

或者：$(function(){}) 默認(rèn)渲染，頁面文章加載完成之后

在vue中，需要默認(rèn)渲染，vue實例初始化完畢后，發(fā)請求獲取數(shù)據(jù)進(jìn)行渲染。

vue提供一個配置選項created類型是函數(shù)，實例化后執(zhí)行的函數(shù)。

總結(jié)：一般在created函數(shù)中獲取頁面需要的初始化數(shù)據(jù)。

刪除資產(chǎn)

目標(biāo)：點(diǎn)擊頁面上的刪除按鈕，把對應(yīng)的數(shù)據(jù)刪除掉。

步驟：

給a標(biāo)簽綁定點(diǎn)擊事件（注意阻止默認(rèn)行為）

定義處理函數(shù)，給函數(shù)傳入資產(chǎn)ID

在函數(shù)中

彈出確認(rèn)框提示
點(diǎn)擊確認(rèn)框之后，發(fā)刪除請求
如果成功之后，更新列表（移除刪除的行）

<td><a @click.prevent="hDel(item.id)" href="#">刪除</a></td> // 刪除資產(chǎn)函數(shù) hDel(id) {if (confirm("你確定要刪除" + id)) {axios.delete("http://localhost:3000/assets/" + id).then(res => {this.get()})} },

添加資產(chǎn)

目標(biāo)：在點(diǎn)擊頁面上的添加時，可以實現(xiàn)添加新資產(chǎn)的功能

步驟：

雙向數(shù)據(jù)綁定，輸入資產(chǎn)的表單元素

綁定表單的提交事件，阻止默認(rèn)行為

在methods中定義一個事件函數(shù)，在函數(shù)中：

組織需要提交給后臺的數(shù)據(jù)，{name,price}，id后臺不需要，自動自增。
提交數(shù)據(jù)前，對name進(jìn)行校驗
發(fā)起添加請求，如果成功，重新獲取后臺列表數(shù)據(jù)即可。
之前輸入的內(nèi)容清空

在案例中落地的代碼：

<form class="form-inline"><div class="form-group"><div class="input-group"><input type="text" v-model.trim="name" class="form-control" placeholder="資產(chǎn)名稱"></div></div>    <div class="form-group"><div class="input-group"><input type="text" v-model.number="price" class="form-control" placeholder="價格"></div></div>    <button class="btn btn-primary" @click.prevent="hAdd">添加</button> </form> data: {list: [], + name: "", + price: 0, }, // 添加資產(chǎn)函數(shù) hAdd() {if (!this.name) {return}if (!this.price) {return}axios.post("http://localhost:3000/assets", {name: this.name,price: this.price,}).then(res => {this.get()})this.name = "" }

總結(jié)

以上是生活随笔為你收集整理的Vue — 第三天（计算属性和json-server）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue — 第二天（v-model和过滤
下一篇： Vue — 第四天（components