目录
[v-for 编辑](#v-for 编辑)
[v-if v-show](#v-if v-show)
构建项目
新建html文件
初始代码
引入vue模块
html
<!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>
<!-- 1.引入vue模块 -->
<script type="module">
import{createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
msg:'hello v3'
}
}
}).mount("#app");
</script>
</body>
</html>
Vue常用的指令
v-for 
1.在data(){}写用到的数据
2.修改div里面
html
<!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>
<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:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category:"旅游",
time:"2023-09-5",
state:"已发布"
}
]
}
}
}).mount("#app")//控制页面元素
</script>
</body>
</html>
v-bind
html
<!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-if v-show
html
<!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==1">9.9</span>
<span v-else-if="customer.level==2">19.9</span>
<span v-else-if="customer.level=3">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>
html
<!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==1">9.9</span>
<span v-else-if="customer.level==2">19.9</span>
<span v-else-if="customer.level=3">29.9</span>
<br>
手链价格为: <span v-show="customer.level==1">9.9</span>
<span v-show="customer.level==2">19.9</span>
<span v-show="customer.level=3">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
<!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="nihao">你好</button>
<button @click="hello">hello</button>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods: {
nihao:function(){
alert('你好')
},
hello:function(){
alert('hello')
}
}
}).mount("#app");//控制html元素
</script>
</body>
</html>
v-model
html
<!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>
<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(){
//清空数据，this代表vue实例
this.searchConditions.category='',
this.searchConditions.state=''
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>Vue生命周期
axios
get方式
html
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送
axios({
method:'get',
url:'http://localhost:8080/article/getAll'
}).then(result =>{
//成功的回调
console.log(result.data);
}).catch(err=>{
console.log(err);
});
</script>
</body>
</html>
post方式
html
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送
let article = {
title: '明天会更好',
category: '生活',
time: '2024-10-16',
state: '草稿'
}
axios({
method: 'post',
url: 'http://localhost:8080/article/add',
data: {
title: '明天会更好',
category: '生活',
time: '2024-10-16',
state: '草稿'
}
}).then(result => {
//成功的回调
console.log(result.data);
}).catch(err => {
console.log(err);
});
</script>
</body>
</html>
get方式
html
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送
let article = {
title: '明天会更好',
category: '生活',
time: '2024-10-16',
state: '草稿'
}
// axios({
// method: 'post',
// url: 'http://localhost:8080/article/add',
// data: {
// title: '明天会更好',
// category: '生活',
// time: '2024-10-16',
// state: '草稿'
// }
// }).then(result => {
// //成功的回调
// console.log(result.data);
// }).catch(err => {
// console.log(err);
// });
axios.get('http://localhost:8080/article/getAll').then(result=>{
console.log(result.data);
}).catch(err=>{
console.log(err);
})
</script>
</body>
</html>post
html
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送
let article = {
title: '好好努力呀',
category: '励志',
time: '2024-10-16',
state: '已发布'
}
// axios({
// method: 'post',
// url: 'http://localhost:8080/article/add',
// data: {
// title: '明天会更好',
// category: '生活',
// time: '2024-10-16',
// state: '草稿'
// }
// }).then(result => {
// //成功的回调
// console.log(result.data);
// }).catch(err => {
// console.log(err);
// });
axios.post('http://localhost:8080/article/add',article).then(result=>{
console.log(result.data);
}).catch(err=>{
console.log(err);
})
</script>
</body>
</html>案例
html
<!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 @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>
</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=>{
//console.log(result.data);
this.articleList=result.data;
}).catch(err=>{
console.log(err)
})
}
},
//钩子函数mounted中获取所有文章数据
mounted () {
axios.get('http://localhost:8080/article/getAll').then(result=>{
console.log(result.data);
this.articleList=result.data;
}).catch(err=>{
console.log(err);
})
}
}).mount('#app');
</script>
</body>
</html>