Vue的局部使用

文章目录

- - 什么是Vue?
  - 局部使用Vue
  - - 快速入门
  - 常用指令
  - - v-for
    - v-bind
    - v-if & v-show
    - v-on
    - v-model
  - Vue生命周期
- Axios
- - 案例

什么是Vue?

Vue是一款构建用户界面的渐进式的JavaScript框架.

局部使用Vue

快速入门
常用指令
声明周期

快速入门

准备:

准备html页面,并引入Vue模块(官方提供)
创建Vue程序的应用实例
准备元素(div) ,被Vue控制

构建用户界面

准备数据
通过插值表达式渲染页面

<body><div id="app"><h1>{{msg}}</h1></div><div><h1>{{msg}}</h1> </div><!-- 引入vue模块 --><script type="module">javascript">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

在这里插入图片描述

<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">javascript">//导入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

在这里插入图片描述

<body><div id="app"><!-- <a v-bind:href="url">黑马官网</a> --><a :href="url">黑马官网</a></div><script type="module">javascript">//引入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

应用: 大数据"杀手",如果我们网购都应该遇到过这种情况,大部分网购平台会对用户的消费水平做等级划分
在这里插入图片描述

<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">javascript">//导入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

在这里插入图片描述

<body><div id="app"><button v-on:click="money">点我有惊喜</button> &nbsp;<button @click="love">再点更惊喜</button></div><script type="module">javascript">//导入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

在这里插入图片描述

<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">javascript">//导入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进行了封装,简化书写,快速开发

在这里插入图片描述

后端代码:

@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());}
}

前端代码:

<body><!-- 引入axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>javascript">// 发送请求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>

在这里插入图片描述
再来一个

<body><!-- 引入axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>javascript">// 发送请求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>

在这里插入图片描述

案例

在这里插入图片描述

<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">javascript">//导入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 () {//发起异步请求 axiosaxios.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>