Vue 是一款用于构建用户界面的渐进式的JavaScript框架
一、v-for
v-for = "(item, index) in items"
参数说明:
items 遍历的数组
item 遍历出来的元素
index 为索引/下表,从0开始,可以省略,省略index 语法: v-for = "item in items"
遍历的数组,必须在data中定义,要想让哪个标签循环展示多次,就在哪个标签上使用v-for指令。
<!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>
</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:"文章标题三",
category:"旅游",
time:"2023-09-5",
state:"已发布"
}]
}
}
}).mount("#app")//控制页面元素
</script>
</body>
</html>
二、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> -->
<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进行链式调用条件判断
原理:基于条件判断,来控制创建或移除元素节点(条件渲染)
场景:要么显示,要么不显示,不频繁切换的场景
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:2
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
四、v-on
作用:html标签绑定事件
语法:
v-on:事件名=“函数名”
简写为 @事件名=“函数名”
Vue中使用的函数需要定义在methods选项内部
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('送你钱100')
},
love: function(){
alert('爱你一万年')
}
}
}).mount("#app");//控制html元素
</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='';
}
}
,
mounted:function(){
console.log('Vue挂载完毕,发送请求获取数据')
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
六、Vue生命周期
生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子函数),让开发者有机会在特定的阶段执行自己的代码。
状态 | 阶段周期 | |
---|---|---|
beforeCreate | 创建前 | vue应用实例创建前调用 |
created | 创建后 | vue应用实例创建后调用 |
beforeMount | 载入前 | vue应用实例载入前调用 |
mounted | 挂载完成 | vue应用实例挂在后调用 |
beforeUpdate | 数据更新前 | vue应用实例数据更新前调用 |
updated | 数据更新后 | vue应用实例数据更新后调用 |
beforeUnmount | 组件销毁前 | vue应用实例组件销毁前调用 |
unmounted | 组件销毁后 | vue应用实例组件销毁后调用 |
只需要记住mounted钩子函数, | ||
Vue生命周期包含几个阶段? | ||
八个阶段 | ||
Vue生命周期典型的应用场景? | ||
在页面加载完毕时,发起异步请求,加载数据,渲染页面。 | ||
//生命周期-钩子函数 mounted | ||
mounted(){ |
console.log('Vue挂在完毕,发送请求获取数据.....');
}
发送请求使用Ajax的库
七、Axios
介绍:Axios对原生的Ajax进行封装,简化书写,快速开发
官网:https://www.axios-http.cn/
Axios使用步骤
引入Axios的js文件
使用Axios发送请求,并获取相应结果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({
method: 'GET',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
}).then((result) => {
console.log(result.data);
}).catch((err) => {
alert(err);
});
例子,then是正确的回调,catch是错误的回调结果
<!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);
}); */
let article = {
title: '明天会更好',
category: '生活',
time: '2000-01-01',
state: '草稿'
}
/* axios({
method:'post',
url:'http://localhost:8080/article/add',
data:article
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}); */
//别名的方式发送请求
/* axios.get('http://localhost:8080/article/getAll').then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
}); */
axios.post('http://localhost:8080/article/add', article).then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
});
</script>
</body>
</html>
常用的是使用别名的方式请求
Axios的异步请求方式
GET:
axios.get(url).then((res)=>{…}).catch((err)=>{…})
POST:
axios.post(url,data).then((res)=>{…}).catch((err)=>{…})