目录
编辑
常用指令
v-for
v-bind
v-if & v-show
v-if
v-show
v-on
v-model
Vue生命周期
编辑 Axios
Axios使用步骤
Axios-请求方式别名
Vue简单案例
常用指令
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
常用指令:
v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind 为HTML标签绑定属性值，如设置 href，css样式等
v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-model 在表单元素上创建双向数据绑定
V-on 为HTML标签绑定事件
v-for
作用:列表渲染，遍历容器的元素或者对象的属性
语法:v-for="(item,index)in items
items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始 ;可以省略，省略index语法:v-for ="item in items
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><!-- 哪个无素要出现多次,v-for指令就添加到哪个元素上 --><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> --></table></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建应用实例createApp({data() {return {//定义数据 articleList:[{title:"医疗反腐绝非砍医护收入",category:"时事",time:"2023-09-5",state:"已发布"},{title:"中国男篮缘何一败涂地？",category:"篮球",time:"2023-09-5",state:"草稿"},{title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",category:"旅游",time:"2023-09-5",state:"已发布"}] }}}).mount("#app")//控制页面元素</script>
</body>
</html>
遍历的数组，必须在data中定义; 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。
v-bind
作用:动态为HTML标签绑定属性值，如设置href，src，style样式等，
语法:v-bind:属性名="属性值”
简化::属性名="属性值"
v-bind所绑定的数据，必须在data中定义
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><a v-bind:href="URL">百度官网</a></div><script type="module">//引入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {URL: 'https://www.baidu.com'}}}).mount("#app")//控制html元素</script>
</body>
</html>v-bind也可以省略
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- <a v-bind:href="URL">百度官网</a> --><a :href="URL">百度官网</a></div><script type="module">//引入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {URL: 'https://www.baidu.com'}}}).mount("#app")//控制html元素</script>
</body>
</html>
v-if & v-show
作用:这两类指令，都是用来控制元素的显示与隐藏的
v-if
语法:v-if="表达式"，表达式值为 true，显示;false，隐藏
可以配合 v-else-if / v-else 进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点(条件渲染)
适用场景:要么显示，要么不显示，不频繁切换的场景
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">手链价格为: <span v-show="customer.level>=0 && customer.level<=1">9.9</span> <span v-show="customer.level>=2 && customer.level<=4">19.9</span><span v-show="customer.level>=5">29.9</span></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'zhangsan',level:5}}}}).mount("#app")//控制html元素</script>
</body></html>v-show
语法:v-show="表达式"，表达式值为 true，显示;false，隐藏
原理:基于CSS样式display来控制显示与隐藏
适用场景:频繁切换显示隐藏的场景
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">手链价格为: <span v-if="customer.level>=0 && customer.level<=1">9.9</span> <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> <span v-else>29.9</span></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'zhangsan',level:5}}}}).mount("#app")//控制html元素</script>
</body></html>v-on
作用:为html标签绑定事件
语法:
v-on:事件名="函数名"
简写为 @事件名="函数名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="money">点我有惊喜</button> <button @click="kiss">再点更惊喜</button></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据}},methods: {money:function(){alert('送你100块钱')},kiss:function(){alert('送你一个飞吻')}},}).mount("#app");//控制html元素</script>
</body>
</html>v-model
作用:在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法:v-model="变量名"
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category"/>发布状态: <input type="text" v-model="searchConditions.state"/><button>搜索</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr></table></div><script type="module">//导入vue模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据searchConditions:{category:'',state:''},articleList: [{title: "医疗反腐绝非砍医护收入",category: "时事",time: "2023-09-5",state: "已发布"},{title: "中国男篮缘何一败涂地？",category: "篮球",time: "2023-09-5",state: "草稿"},{title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",category: "旅游",time: "2023-09-5",state: "已发布"}]}}}).mount("#app")//控制html元素</script>
</body></html>Vue生命周期
生命周期:指一个对象从创建到销毁的整个过程。
生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子),让开发者有机会在特定的阶段执行自己的代码
Vue生命周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。
beforeCreate 创建前
created 创建后
beforeMountK 载入前
mounted 挂载完成
beforeUpdate 数据更新前
updated 数据更新后
beforeUnmount 组件销毁前
unmounted 组件销毁后
Axios
介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网:https://www.axios-http.cn/
Axios使用步骤
引入Axios的js文件(参照官网)
使用Axios发送请求，并获取相应结果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/* 发送请求 */axios({method:'get',url:'http://localhost:8080/article/getAll'}).then(result=>{//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体 result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err=>{//失败的回调console.log(err);});</script>
</body>
</html>
Axios-请求方式别名
为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式:axios.请求方式(url[，data[，config]])
get请求：
post请求：
Vue简单案例
后端代码：
pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.4</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.itheima</groupId><artifactId>axios_demo</artifactId><version>0.0.1-SNAPSHOT</version><name>axios_demo</name><description>axios_demo</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
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<Article> articleList = new ArrayList<>();{articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));}//新增文章@PostMapping("/add")public String add(@RequestBody Article article) {articleList.add(article);return "新增成功";}//获取所有文章信息@GetMapping("/getAll")public List<Article> getAll(HttpServletResponse response) {return articleList;}//根据文章分类和发布状态搜索@GetMapping("/search")public List<Article> search(String category, String state) {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;}
前端代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category">发布状态: <input type="text" v-model="searchConditions.state"><button v-on:click="search">搜索</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> --></table></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">//导入vue模块import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';//创建vue应用实例createApp({data(){return{articleList:[],searchConditions:{category:'',state:''}}},methods: {//声明方法search:function(){//发送请求axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state).then(result=>{//成功回调 result.data//把得到的数据赋值给articleListthis.articleList=result.data;}).catch(err=>{//失败回调console.log(err);});}},//钩子函数mounted中，获取所有文章数据mounted:function(){//发送异步请求 axiosaxios.get('http://localhost:8080/article/getAll').then(result=>{//成功回调//console.log(result.data);this.articleList=result.data;}).catch(err=>{//失败回调console.log(err);});}}).mount('#app');//控制html元素</script></body></html>
这一期就到这里啦
努力遇见更好的自己！！！
