devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue详解

作者：爱喝兽奶帝天荒 | 2024-07-12 15:54:57

赞

踩

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.  
  10.     <div id="app">
  11.         <table border="1 solid" colspa="0" cellspacing="0">
  12.             <tr>
  13.                 <th>文章标题</th>
  14.                 <th>分类</th>
  15.                 <th>发表时间</th>
  16.                 <th>状态</th>
  17.                 <th>操作</th>
  18.             </tr>
  19.             <!-- 哪个无素要出现多次,v-for指令就添加到哪个元素上 -->
  20.             <tr v-for="(article,index) in articleList">
  21.                 <td>{{article.title}}</td>
  22.                 <td>{{article.category}}</td>
  23.                 <td>{{article.time}}</td>
  24.                 <td>{{article.state}}</td>
  25.                 <td>
  26.                     <button>编辑</button>
  27.                     <button>删除</button>
  28.                 </td>
  29.             </tr>
  30.             <!-- <tr>
  31.                 <td>标题2</td>
  32.                 <td>分类2</td>
  33.                 <td>2000-01-01</td>
  34.                 <td>已发布</td>
  35.                 <td>
  36.                     <button>编辑</button>
  37.                     <button>删除</button>
  38.                 </td>
  39.             </tr>
  40.             <tr>
  41.                 <td>标题3</td>
  42.                 <td>分类3</td>
  43.                 <td>2000-01-01</td>
  44.                 <td>已发布</td>
  45.                 <td>
  46.                     <button>编辑</button>
  47.                     <button>删除</button>
  48.                 </td>
  49.             </tr> -->
  50.         </table>
  51.     </div>
  52.  
  53.     <script type="module">
  54.         //导入vue模块
  55.         import { createApp} from 
  56.                 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  57.         //创建应用实例
  58.         createApp({
  59.             data() {
  60.                 return {
  61.                     //定义数据  
  62.                     articleList:[{
  63.                         title:"医疗反腐绝非砍医护收入",
  64.                         category:"时事",
  65.                         time:"2023-09-5",
  66.                         state:"已发布"
  67.                     },
  68.                     {
  69.                         title:"中国男篮缘何一败涂地？",
  70.                         category:"篮球",
  71.                         time:"2023-09-5",
  72.                         state:"草稿"
  73.                     },
  74.                     {
  75.                         title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
  76.                         category:"旅游",
  77.                         time:"2023-09-5",
  78.                         state:"已发布"
  79.                     }]       
  80.                     
  81.                 }
  82.             }
  83.         }).mount("#app")//控制页面元素
  84.     </script>
  85. </body>
  86. </html>

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

v-bind

作用:动态为HTML标签绑定属性值，如设置href，src，style样式等，

语法:v-bind:属性名="属性值”

简化::属性名="属性值"

v-bind所绑定的数据，必须在data中定义

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <a v-bind:href="URL">百度官网</a>
  11.     </div>
  12.  
  13.     <script type="module">
  14.         //引入vue模块
  15.         import { createApp} from 
  16.                 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  17.         //创建vue应用实例
  18.         createApp({
  19.             data() {
  20.                 return {
  21.                     URL: 'https://www.baidu.com'
  22.                 }
  23.             }
  24.         }).mount("#app")//控制html元素
  25.     </script>
  26. </body>
  27. </html>

v-bind也可以省略

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- <a v-bind:href="URL">百度官网</a> -->
  11.          <a :href="URL">百度官网</a>
  12.     </div>
  13.  
  14.     <script type="module">
  15.         //引入vue模块
  16.         import { createApp} from 
  17.                 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  18.         //创建vue应用实例
  19.         createApp({
  20.             data() {
  21.                 return {
  22.                     URL: 'https://www.baidu.com'
  23.                 }
  24.             }
  25.         }).mount("#app")//控制html元素
  26.     </script>
  27. </body>
  28. </html>

v-if & v-show

作用:这两类指令，都是用来控制元素的显示与隐藏的

v-if

语法:v-if="表达式"，表达式值为 true，显示;false，隐藏

可以配合 v-else-if / v-else 进行链式调用条件判断

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <div id="app">
  12.  
  13.     
  14.         手链价格为:  <span v-show="customer.level>=0 && customer.level<=1">9.9</span>  
  15.                     <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
  16.                     <span v-show="customer.level>=5">29.9</span>
  17.  
  18.     </div>
  19.  
  20.     <script type="module">
  21.         //导入vue模块
  22.         import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  23.  
  24.         //创建vue应用实例
  25.         createApp({
  26.             data() {
  27.                 return {
  28.                     customer:{
  29.                         name:'zhangsan',
  30.                         level:5
  31.                     }
  32.                 }
  33.             }
  34.         }).mount("#app")//控制html元素
  35.     </script>
  36. </body>
  37.  
  38. </html>

v-show

语法:v-show="表达式"，表达式值为 true，显示;false，隐藏

原理:基于CSS样式display来控制显示与隐藏

适用场景:频繁切换显示隐藏的场景

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <div id="app">
  12.  
  13.         手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  
  14.                     <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> 
  15.                     <span v-else>29.9</span>
  16.         
  17.  
  18.     </div>
  19.  
  20.     <script type="module">
  21.         //导入vue模块
  22.         import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  23.  
  24.         //创建vue应用实例
  25.         createApp({
  26.             data() {
  27.                 return {
  28.                     customer:{
  29.                         name:'zhangsan',
  30.                         level:5
  31.                     }
  32.                 }
  33.             }
  34.         }).mount("#app")//控制html元素
  35.     </script>
  36. </body>
  37.  
  38. </html>

v-on

作用:为html标签绑定事件

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <button v-on:click="money">点我有惊喜</button> &nbsp;
  11.         <button @click="kiss">再点更惊喜</button>
  12.     </div>
  13.  
  14.     <script type="module">
  15.         //导入vue模块
  16.         import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  17.  
  18.         //创建vue应用实例
  19.         createApp({
  20.             data() {
  21.                 return {
  22.                     //定义数据
  23.                 }
  24.             },
  25.             methods: {
  26.                 money:function(){
  27.                     alert('送你100块钱')
  28.                 },
  29.                 kiss:function(){
  30.                     alert('送你一个飞吻')
  31.                 }
  32.             },
  33.         }).mount("#app");//控制html元素
  34.  
  35.     </script>
  36. </body>
  37. </html>

v-model

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <div id="app">
  12.  
  13.         文章分类: <input type="text" v-model="searchConditions.category"/>
  14.  
  15.         发布状态: <input type="text" v-model="searchConditions.state"/>
  16.  
  17.         <button>搜索</button>
  18.  
  19.         <br />
  20.         <br />
  21.         <table border="1 solid" colspa="0" cellspacing="0">
  22.             <tr>
  23.                 <th>文章标题</th>
  24.                 <th>分类</th>
  25.                 <th>发表时间</th>
  26.                 <th>状态</th>
  27.                 <th>操作</th>
  28.             </tr>
  29.             <tr v-for="(article,index) in articleList">
  30.                 <td>{{article.title}}</td>
  31.                 <td>{{article.category}}</td>
  32.                 <td>{{article.time}}</td>
  33.                 <td>{{article.state}}</td>
  34.                 <td>
  35.                     <button>编辑</button>
  36.                     <button>删除</button>
  37.                 </td>
  38.             </tr>
  39.         </table>
  40.     </div>
  41.     <script type="module">
  42.         //导入vue模块
  43.         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  44.         //创建vue应用实例
  45.         createApp({
  46.             data() {
  47.                 return {
  48.                     //定义数据
  49.                     searchConditions:{
  50.                         category:'',
  51.                         state:''
  52.                     },
  53.                     articleList: [{
  54.                         title: "医疗反腐绝非砍医护收入",
  55.                         category: "时事",
  56.                         time: "2023-09-5",
  57.                         state: "已发布"
  58.                     },
  59.                     {
  60.                         title: "中国男篮缘何一败涂地？",
  61.                         category: "篮球",
  62.                         time: "2023-09-5",
  63.                         state: "草稿"
  64.                     },
  65.                     {
  66.                         title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
  67.                         category: "旅游",
  68.                         time: "2023-09-5",
  69.                         state: "已发布"
  70.                     }]
  71.                 }
  72.             }
  73.  
  74.         }).mount("#app")//控制html元素
  75.     </script>
  76. </body>
  77.  
  78. </html>

Vue生命周期

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

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

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

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

 

 Axios

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

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

Axios使用步骤

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 引入axios的js文件   -->
  10.      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11.      <script>
  12.         /* 发送请求 */
  13.         axios({
  14.             method:'get',
  15.             url:'http://localhost:8080/article/getAll'
  16.         }).then(result=>{
  17.             //成功的回调
  18.             //result代表服务器响应的所有的数据,包含了响应头,响应体 result.data 代表的是接口响应的核心数据
  19.             console.log(result.data);
  20.         }).catch(err=>{
  21.             //失败的回调
  22.             console.log(err);
  23.         });
  24.      </script>
  25. </body>
  26. </html>

 

  

Axios-请求方式别名

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

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

get请求：

 post请求：

 

Vue简单案例

 后端代码：

pom.xml:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>3.1.4</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.itheima</groupId>
  12.     <artifactId>axios_demo</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>axios_demo</name>
  15.     <description>axios_demo</description>
  16.     <properties>
  17.         <java.version>17</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.         </dependency>
  24.  
  25.         <dependency>
  26.             <groupId>org.springframework.boot</groupId>
  27.             <artifactId>spring-boot-starter-test</artifactId>
  28.             <scope>test</scope>
  29.         </dependency>
  30.  
  31.         <dependency>
  32.             <groupId>org.projectlombok</groupId>
  33.             <artifactId>lombok</artifactId>
  34.         </dependency>
  35.     </dependencies>
  36.  
  37.     <build>
  38.         <plugins>
  39.             <plugin>
  40.                 <groupId>org.springframework.boot</groupId>
  41.                 <artifactId>spring-boot-maven-plugin</artifactId>
  42.             </plugin>
  43.         </plugins>
  44.     </build>
  45.  
  46. </project>

controller层

  1. package com.yjj.controller;
  2.  
  3. import com.yjj.pojo.Article;
  4. import jakarta.servlet.http.HttpServletResponse;
  5. import org.springframework.web.bind.annotation.*;
  6.  
  7. import java.util.ArrayList;
  8. import java.util.List;
  9. import java.util.stream.Collectors;
  10.  
  11. @RestController
  12. @RequestMapping("/article")
  13. @CrossOrigin//支持跨域
  14. public class ArticleController {
  15.  
  16.     private List<Article> articleList = new ArrayList<>();
  17.  
  18.     {
  19.         articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));
  20.         articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));
  21.         articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));
  22.     }
  23.  
  24.     //新增文章
  25.     @PostMapping("/add")
  26.     public String add(@RequestBody Article article) {
  27.         articleList.add(article);
  28.         return "新增成功";
  29.     }
  30.  
  31.     //获取所有文章信息
  32.     @GetMapping("/getAll")
  33.     public List<Article> getAll(HttpServletResponse response) {
  34.         return articleList;
  35.     }
  36.  
  37.     //根据文章分类和发布状态搜索
  38.     @GetMapping("/search")
  39.     public List<Article> search(String category, String state) {
  40.         return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
  41.     }
  42. }

 pojo类：

  1. package com.yjj.pojo;
  2.  
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  6.  
  7. @Data
  8. @NoArgsConstructor
  9. @AllArgsConstructor
  10. public class Article {
  11.     private String title;
  12.     private String category;
  13.     private String time;
  14.     private String state;
  15.  
  16. }

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <div id="app">
  12.  
  13.         文章分类: <input type="text" v-model="searchConditions.category">
  14.  
  15.         发布状态: <input type="text" v-model="searchConditions.state">
  16.  
  17.         <button v-on:click="search">搜索</button>
  18.  
  19.         <br />
  20.         <br />
  21.         <table border="1 solid" colspa="0" cellspacing="0">
  22.             <tr>
  23.                 <th>文章标题</th>
  24.                 <th>分类</th>
  25.                 <th>发表时间</th>
  26.                 <th>状态</th>
  27.                 <th>操作</th>
  28.             </tr>
  29.             <tr v-for="(article,index) in articleList">
  30.                 <td>{{article.title}}</td>
  31.                 <td>{{article.category}}</td>
  32.                 <td>{{article.time}}</td>
  33.                 <td>{{article.state}}</td>
  34.                 <td>
  35.                     <button>编辑</button>
  36.                     <button>删除</button>
  37.                 </td>
  38.             </tr>
  39.             <!-- <tr>
  40.                 <td>标题2</td>
  41.                 <td>分类2</td>
  42.                 <td>2000-01-01</td>
  43.                 <td>已发布</td>
  44.                 <td>
  45.                     <button>编辑</button>
  46.                     <button>删除</button>
  47.                 </td>
  48.             </tr>
  49.             <tr>
  50.                 <td>标题3</td>
  51.                 <td>分类3</td>
  52.                 <td>2000-01-01</td>
  53.                 <td>已发布</td>
  54.                 <td>
  55.                     <button>编辑</button>
  56.                     <button>删除</button>
  57.                 </td>
  58.             </tr> -->
  59.         </table>
  60.     </div>
  61.     
  62.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  63.     <script type="module">
  64.         //导入vue模块
  65.         import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  66.         //创建vue应用实例
  67.         createApp({
  68.             data(){
  69.                 return{
  70.                     articleList:[],
  71.                     searchConditions:{
  72.                         category:'',
  73.                         state:''
  74.                     }
  75.                 }
  76.             },
  77.             methods: {
  78.                 //声明方法
  79.                 search:function(){
  80.                     //发送请求
  81.                     axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state)
  82.                     .then(result=>{
  83.                    //成功回调 result.data
  84.                    //把得到的数据赋值给articleList
  85.                     this.articleList=result.data;
  86.                    
  87.                 }).catch(err=>{
  88.                     //失败回调
  89.                     console.log(err);
  90.                 });
  91.                 }
  92.             },
  93.             //钩子函数mounted中，获取所有文章数据
  94.             mounted:function(){
  95.                 //发送异步请求 axios
  96.                 axios.get('http://localhost:8080/article/getAll').then(result=>{
  97.                     //成功回调
  98.                     //console.log(result.data);
  99.                     this.articleList=result.data;
  100.                 }).catch(err=>{
  101.                     //失败回调
  102.                     console.log(err);
  103.                 });
  104.  
  105.                
  106.  
  107.             }
  108.         }).mount('#app');//控制html元素
  109.     </script>
  110.  
  111. </body>
  112.  
  113. </html>

这一期就到这里啦

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

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/814726
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号