柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue詳解
柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue詳解
目錄
?編輯
常用指令
v-for
v-bind
v-if & v-show
v-if
v-show
v-on
v-model
Vue生命周期
?編輯?Axios
Axios使用步驟
Axios-請(qǐng)求方式別名
Vue簡(jiǎn)單案例
常用指令
指令:HTML標(biāo)簽上帶有 v-前綴的特殊屬性，不同的指令具有不同的含義，可以實(shí)現(xiàn)不同的功能
常用指令: v-for????????列表渲染，遍歷容器的元素或者對(duì)象的屬性 v-bind????????為HTML標(biāo)簽綁定屬性值，如設(shè)置 href，css樣式等 v-if/y-else-if/v-else????????條件性的渲染某元素，判定為true時(shí)渲染，否則不渲染 v-show????????根據(jù)條件展示某元素，區(qū)別在于切換的是display屬性的值 v-model????????在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定 V-on????????為HTML標(biāo)簽綁定事件
v-for
作用:列表渲染，遍歷容器的元素或者對(duì)象的屬性
語法:v-for="(item,index)in items
items 為遍歷的數(shù)組 item 為遍歷出來的元素 index 為索引/下標(biāo)，從0開始 ;可以省略，省略index語法:v-for ="item in items
| 文章標(biāo)題 | 分類 | 發(fā)表時(shí)間 | 狀態(tài) | 操作 |
|---|---|---|---|---|
| {{article.title}} | {{article.category}} | {{article.time}} | {{article.state}} |
遍歷的數(shù)組，必須在data中定義; 要想讓哪個(gè)標(biāo)簽循環(huán)展示多次，就在哪個(gè)標(biāo)簽上使用 v-for 指令。?
v-bind
作用:動(dòng)態(tài)為HTML標(biāo)簽綁定屬性值，如設(shè)置href，src，style樣式等，
語法:v-bind:屬性名="屬性值”
簡(jiǎn)化::屬性名="屬性值"
v-bind所綁定的數(shù)據(jù)，必須在data中定義
v-bind也可以省略
v-if & v-show
作用:這兩類指令，都是用來控制元素的顯示與隱藏的
v-if
語法:v-if="表達(dá)式"，表達(dá)式值為 true，顯示;false，隱藏
可以配合 v-else-if / v-else 進(jìn)行鏈?zhǔn)秸{(diào)用條件判斷
原理：基于條件判斷，來控制創(chuàng)建或移除元素節(jié)點(diǎn)(條件渲染)
適用場(chǎng)景:要么顯示，要么不顯示，不頻繁切換的場(chǎng)景
手鏈價(jià)格為: 9.9
19.9
29.9
v-show
語法:v-show="表達(dá)式"，表達(dá)式值為 true，顯示;false，隱藏
原理:基于CSS樣式display來控制顯示與隱藏
適用場(chǎng)景:頻繁切換顯示隱藏的場(chǎng)景
手鏈價(jià)格為: 9.9
19.9
29.9
v-on
作用:為html標(biāo)簽綁定事件
語法: v-on:事件名="函數(shù)名"
簡(jiǎn)寫為 @事件名="函數(shù)名
v-model
作用:在表單元素上使用，雙向數(shù)據(jù)綁定?？梢苑奖愕?獲取 或 設(shè)置 表單項(xiàng)數(shù)據(jù)
語法:v-model="變量名"
文章分類:
發(fā)布狀態(tài):
| 文章標(biāo)題 | 分類 | 發(fā)表時(shí)間 | 狀態(tài) | 操作 |
|---|---|---|---|---|
| {{article.title}} | {{article.category}} | {{article.time}} | {{article.state}} |
Vue生命周期
生命周期:指一個(gè)對(duì)象從創(chuàng)建到銷毀的整個(gè)過程。
生命周期的八個(gè)階段:每個(gè)階段會(huì)自動(dòng)執(zhí)行一個(gè)生命周期方法(鉤子),讓開發(fā)者有機(jī)會(huì)在特定的階段執(zhí)行自己的代碼
Vue生命周期典型的應(yīng)用場(chǎng)景：在頁面加載完畢時(shí)，發(fā)起異步請(qǐng)求，加載數(shù)據(jù)，渲染頁面。
beforeCreate????????創(chuàng)建前 created????????創(chuàng)建后 beforeMountK????????載入前 mounted????????掛載完成 beforeUpdate????????數(shù)據(jù)更新前 updated????????數(shù)據(jù)更新后 beforeUnmount????????組件銷毀前 unmounted????????組件銷毀后
?Axios
介紹:Axios 對(duì)原生的Ajax進(jìn)行了封裝，簡(jiǎn)化書寫，快速開發(fā)。
官網(wǎng):https://www.axios-http.cn/
Axios使用步驟
引入Axios的js文件(參照官網(wǎng))
使用Axios發(fā)送請(qǐng)求，并獲取相應(yīng)結(jié)果
?
??
Axios-請(qǐng)求方式別名
為了方便起見，Axios已經(jīng)為所有支持的請(qǐng)求方法提供了別名
格式:axios.請(qǐng)求方式(url[，data[，config]])?
get請(qǐng)求：
?post請(qǐng)求：
?
Vue簡(jiǎn)單案例
?后端代碼：
pom.xml:
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
controller層
package com.yjj.controller;
import com.yjj.pojo.Article;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {
private List
{
articleList.add(new Article("醫(yī)療反腐絕非砍醫(yī)護(hù)收入", "時(shí)事", "2023-09-5", "已發(fā)布"));
articleList.add(new Article("中國男籃緣何一敗涂地", "籃球", "2023-09-5", "草稿"));
articleList.add(new Article("華山景區(qū)已受大風(fēng)影響陣風(fēng)達(dá)7-8級(jí)", "旅游", "2023-09-5", "已發(fā)布"));
}
//新增文章
@PostMapping("/add")
public String add(@RequestBody Article article) {
articleList.add(article);
return "新增成功";
}
//獲取所有文章信息
@GetMapping("/getAll")
public List
return articleList;
}
//根據(jù)文章分類和發(fā)布狀態(tài)搜索
@GetMapping("/search")
public List
return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
}
}
?pojo類：
package com.yjj.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article {
private String title;
private String category;
private String time;
private String state;
}
前端代碼
文章分類:
發(fā)布狀態(tài):
| 文章標(biāo)題 | 分類 | 發(fā)表時(shí)間 | 狀態(tài) | 操作 |
|---|---|---|---|---|
| {{article.title}} | {{article.category}} | {{article.time}} | {{article.state}} |
這一期就到這里啦
努力遇見更好的自己?。?！
?
柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue詳解
好文推薦
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Ozsale折扣出海棧
