学习进度条
今日所花时间：一小时
今日代码量：100行
博客量：一篇
了解到的知识点：vue3
这学期学的基础vue3的部分内容整理
vue渲染
<!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">
<h1>{{msg}}</h1>
</div>
<div>
<h1>{{msg}}</h1>
</div>
<!-- 引入vue模块 -->
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
//创建vue的应用实例
createApp({
data(){
return {
msg:'hello vue3'
}
}
}).mount("#app")
</script>
</body>
</html>
局部使用vue
指令：html标签上带有V-前缀的特殊属性，不同的指令具有不同含义，可以实现不同的功能
v-for 列表渲染，便利容器的元素或者对象的属性
v-bind 为html标签绑定属性值，如设置href,css样式等
v-if/v-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>
v-bind指令
作用：为HTML标签的属性动态绑定属性值
写法：1、v-bind:属性名="属性值" 2、:属性名="属性值”
代码示例
<!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.itheima.com'
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-if v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
语法：V-if="表达式"，表达式值为true,显示；false,隐藏
其它：可以配合v-else-if/v-else进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
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>
<br>
手链价格为: <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:'张三',
level:'1'
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-if与v-show的区别？
v-if是根据条件判断是创建还是移除元素节点（条件渲染）。
v-show是根据css样式display:来控制元素的显示与隐藏。
v-if与v-show的适用场景？
v-if适用于显示与隐藏切换不频繁的场景。
v-show适用于显示与恩藏切换频繁的场景。
v-on
作用：为html标签绑定事件
语法：v-on:事件名="函数名"
简写为
@事件名="函数名”
createApp({data(){需要用到的数据}，methods:{需要用到的方法}})
代码实例：
<!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="love">再点更惊喜</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("送你钱一百");
},
love:function(){
alert("点击")
}
}
}).mount("#app");//控制html元素
//以下这种写法不行
// function money(){
// alert("送你钱一百");
// }
// function love(){
// alert("点击")
// }
</script>
</body>
</html>
v-model
作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
v-model中绑定的变量必须在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">
文章分类: <input type="text" v-model="searchConditions.category" /><span>{{searchConditions.category}}</span>
发布状态: <input type="text" v-model="searchConditions.state"/><span>{{searchConditions.state}}</span>
<button>搜索</button>
<button v-on:click="clear">重置</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: "已发布"
}]
}
},
methods:{
clear:function(){
//清空category以及state的数据
//在methods对应的方法里面，使用this就代表的是vue实例。可以使用this获取到vue实例中准备的数据
this.searchConditions.category='';
this.searchConditions.state='';
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
vue的生命周期
生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码
钩子函数：
beforeCreate创建前
created创建后
beforeMount载入前
典型应用函数mounted挂载完成(需要记住)（在页面加载完毕时，发起异步请求，加载数据，完善页面）
beforeUpdate数据更新前
updated数据更新后
beforeUnmoun组件销毁前
unmounted组件销毁后
Axios使用步骤
引入Axios的js文件（参照官网）
使用Axios发送请求，并获取相应结果
method:请求方式，GET/POST.…
url:请求路径
data:请求数据
Axios-请求方式别名:
为了方便起见，Axⅵos已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url[,data[,config])
要使用首先要引入axios的js文件
<!-- 引入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET:
axios.get(url).then((res)=>{..).catch((err)=>{..})
POST:
axios.post(url,data).then((res)=>{.).catch((err)=>{..)
案例：
使用表格展示所有文章的数据，并完成条件搜索功能
钩子函数mounted中，获取所有的文章数据
使用v-for指令，把数据渲染到表格上展示
使用v-model:指令完成表单数据的双向绑定
使用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">
文章分类: <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>
<!-- 引入axios的js文件 -->
<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=>{
//成功回调
//把得到的数据赋值给articleList
this.articleList=result.data;
}).catch(err=>{
console.log(err);
});
}
},
//钩子函数mounted中，获取搜游文章数据
mounted:function(){
//发送异步请求 axios
axios.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>
浙公网安备 33010602011771号