vue详解

编辑

常用指令

v-for

v-bind

v-if & v-show

v-if

v-show

v-on

v-model

Vue生命周期

编辑 Axios

Axios使用步骤

Axios-请求方式别名

Vue简单案例

常用指令

指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能

常用指令:
v-for        列表渲染，遍历容器的元素或者对象的属性
v-bind        为HTML标签绑定属性值，如设置 href，css样式等
v-if/y-else-if/v-else        条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show        根据条件展示某元素，区别在于切换的是display属性的值
v-model        在表单元素上创建双向数据绑定
V-on        为HTML标签绑定事件

v-for

作用:列表渲染，遍历容器的元素或者对象的属性

语法:v-for="(item,index)in items

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始 ;可以省略，省略index语法:v-for ="item in items

<!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>
            <!-- <tr>
                <td>标题2</td>
                <td>分类2</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>标题3</td>
                <td>分类3</td>
                <td>2000-01-01</td>
                <td>已发布</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>

遍历的数组，必须在data中定义; 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

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>
    </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-bind也可以省略

<!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 进行链式调用条件判断

原理：基于条件判断，来控制创建或移除元素节点(条件渲染)

适用场景:要么显示，要么不显示，不频繁切换的场景

<!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-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:'zhangsan',
                        level:5
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

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>
        

    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer:{
                        name:'zhangsan',
                        level:5
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

v-on

作用:为html标签绑定事件

语法:
v-on:事件名="函数名"

简写为 @事件名="函数名

<!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> &nbsp;
        <button @click="kiss">再点更惊喜</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块钱')
                },
                kiss:function(){
                    alert('送你一个飞吻')
                }
            },
        }).mount("#app");//控制html元素

    </script>
</body>
</html>

v-model

作用:在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法:v-model="变量名"

<!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>

        <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: "已发布"
                    }]
                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

</html>

Vue生命周期

生命周期:指一个对象从创建到销毁的整个过程。

生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子),让开发者有机会在特定的阶段执行自己的代码

Vue生命周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。

beforeCreate        创建前
created        创建后
beforeMountK        载入前
mounted        挂载完成
beforeUpdate        数据更新前
updated        数据更新后
beforeUnmount        组件销毁前
unmounted        组件销毁后

Axios

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。

官网:https://www.axios-http.cn/

Axios使用步骤

引入Axios的js文件(参照官网)

使用Axios发送请求，并获取相应结果

<!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);
        });
     </script>
</body>
</html>

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名

格式:axios.请求方式(url[，data[，config]])

get请求：

post请求：

Vue简单案例

后端代码：

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.1.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.itheima</groupId>
    <artifactId>axios_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>axios_demo</name>
    <description>axios_demo</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

controller层

package com.yjj.controller;

import com.yjj.pojo.Article;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

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

pojo类：

package com.yjj.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article {
    private String title;
    private String category;
    private String time;
    private String state;

}

前端代码

<!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 v-on: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>
            <!-- <tr>
                <td>标题2</td>
                <td>分类2</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>标题3</td>
                <td>分类3</td>
                <td>2000-01-01</td>
                <td>已发布</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=>{
                   //成功回调 result.data
                   //把得到的数据赋值给articleList
                    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>

</html>