一、vue的基本语法
1.vue的快速入门:
{{msg}}
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data () {
return {
msg:'hello vue3'
}
}
}).mount('#app')
</script>
2.v-for的使用:
v-for案例
<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="(item,index) in articleList">
<td>{{item.title}}</td>
<td>{{item.category}}</td>
<td>{{item.time}}</td>
<td>{{item.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>
3.v-bind:
4:v-if&v-show:
5.v-on:
6.v-model:
案例:
<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>
搜索
重置
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in articleList">
<td>{{item.title}}</td>
<td>{{item.category}}</td>
<td>{{item.time}}</td>
<td>{{item.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
<script type="module">
//导入vue模块
import { createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建应用实例
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.searchConditions.category='',
this.searchConditions.state=''
}
}
}).mount("#app")//控制页面元素
</script>
二、vue的生命周期
三、Ajax
官网:http://www/axios-http.cn/
1.axios的使用步骤
2.axios别名请求方式
3.小结:
四、vue案例大总结:
<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>
搜索
重置
文章标题 | 分类 | 发表时间 | 状态 | 操作 |
---|---|---|---|---|
{{item.title}} | {{item.category}} | {{item.time}} | {{item.state}} | 编辑 删除 |
//创建应用实例
createApp({
data() {
return {
searchConditions:{
category:‘’,
state:‘’
},
articleList:[]
}
},
methods: {
clear:function(){
this.searchConditions.category=‘’,
this.searchConditions.state=‘’
},
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:function() {
axios.get(‘http://localhost:8080/article/getAll’).then(result=>{
//成功回调
//console.log(result.data)
this.articleList = result.data
}).catch(err=>{
//失败回调
console.log(err)
});
}
}).mount(“#app”)//控制页面元素