1. IT分享知识网首页
  2. 开发语言
  3. Vue

vue详解

老牧童 • • Vue, 未分类

vue详解指令 HTML 标签上带有 v 前缀的特殊属性 不同的指令具有不同的含义 可以实现不同的功能常用指令 v for 列表渲染 遍历容器的元素或者对象的属性 v bind 为 HTML 标签绑定属性值 如设置 h

大家好，欢迎来到IT知识分享网。

目录

​编辑

常用指令

v-for

v-bind

v-if & v-show

v-if

v-show

v-on

v-model

Vue生命周期

​编辑 Axios

Axios使用步骤

Axios-请求方式别名

Vue简单案例

vue详解

常用指令

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

v-for

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

语法:v-for=”(item,index)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>

vue详解

遍历的数组，必须在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>

vue详解

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-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-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-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-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="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生命周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。

vue详解

vue详解

vue详解 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>

vue详解 vue详解

vue详解 vue详解 vue详解

Axios-请求方式别名

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

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

get请求：

vue详解vue详解 post请求：

vue详解 vue详解

Vue简单案例

 后端代码：

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>

vue详解

这一期就到这里啦

努力遇见更好的自己！！！

 vue详解

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/121877.html

赞 (0)
老牧童老牧童
0
上一篇 2025-10-21 07:10
下一篇 2025-10-21 07:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信