文章目录
什么是Vue?
- Vue是一款构建用户界面 的渐进式 的JavaScript框架.
局部使用Vue
- 快速入门
- 常用指令
- 声明周期
快速入门
准备:
- 准备html页面,并引入Vue模块(官方提供)
- 创建Vue程序的应用实例
- 准备元素(div) ,被Vue控制
构建用户界面
- 准备数据
- 通过插值表达式渲染页面
html
<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>常用指令
v-for
html
<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: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}
]
}
}
}).mount("#app")//控制页面元素
</script>
</body>
注意: 遍历的数组,必须在data中定义: 要想让哪个标签循环展示多次,就在那个标签上使用v-for 指令
v-bind
html
<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>v-if & v-show
应用: 大数据"杀手",如果我们网购都应该遇到过这种情况,大部分网购平台会对用户的消费水平做等级划分
html
<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: 7
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
v-on
html
<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>v-model
html
<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>Vue生命周期
mounted: function () {
console.log('vue 挂载完毕~')
}
总结:
1.Vue生命周期总共分为几个阶段?
⇒ 八个阶段
2.Vue生命周期典型的应用场景?
页面加载完毕时,发起异步请求,加载数据,渲染页面.
Axios
我们前面说完Vue的生命周期挂载完毕之后,发送请求获取数据,这里介绍一个Ajax的一个函数库Axios.
- 介绍:Axios对原生的Ajax进行了封装,简化书写,快速开发
后端代码:
java
@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());
}
}前端代码:
html
<body>
<!-- 引入axios -->
<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
<body>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 发送请求
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);
});
</script>
</body>
案例
html
<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 => {
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>