Javaweb第四章---Vue与指令(入门必看）

分手后的思念是犯贱 2024-04-20 14:28 3阅读 0赞

**目录**

一.Vue是什么？

💖Vue的概念

💖 Vue代码创建

二.指令

三.Vue生命周期

--------------------

> 🎁个人主页：[tq02的博客\_CSDN博客-C语言,Java,Java数据结构领域博主][tq02_CSDN_-C_Java_Java]  
> 🎥 本文由 tq02 原创，首发于 CSDN🙉  
> 🎄 本章讲解内容：**Vue和指令讲解**
> 
> 🎁欢迎各位→**点赞**👍 + **收藏**⭐ + **评论**📝+**关注**✨
> 
> ![ae2584cf8f514cffb7eb41d62bfa2aeb.png][]
> 
> 🎥学习专栏： [C语言][C] [JavaSE][] [MySQL基础][MySQL]

## 一.Vue是什么？ ##

### **💖Vue的概念** ###

> **Vue**是一套前端框架，可以免除JavaScript的DOM操作，使代码更加简洁
> 
> Vue的实现是基于MVVM思想，实现数据的双向绑定。
> 
> --------------------
> 
> 框架是一个半成品软件，是一套**可重用的、通用的、软件基础代码模型**

Vue文件下载及其MVVM思想的介绍：[http://t.csdn.cn/IGTO7][http_t.csdn.cn_IGTO7]

### **💖 Vue代码创建** ###

> 使用前需要映入Vue.js文件：
> 
> **<script src=" Vue.js文件路径 " ></script>**

> Vue语法格式：**new Vue（\{** 
> 
>  **el:" \#id名 ",**
> 
> **//data定义数据模型 data:\{** 
> 
>  **数据模型**
> 
>  **\}** 
> 
>  **\}）**
> 
> **注：在JS区域中创建,并且el的定义相当于CSS的id选择器**

> 使用格式：
> 
> **<div id=" id名 "> 代码 \{ \{数据模型\}\} </div>**

<html lang="en">
    <head> 
        <title>Vue复习</title>
        <script src="vue.js"> </script>    //引入vue.js文件
    </head>
    <body>
        <div id="app">        //v-model下述有讲解
            <input type="text"  v-model="message">
            {
       {message}}    //显示message的值
        </div>
    
    </body>
    
    <script>
            //创建Vue
        new Vue({
            el:"#app",
            data:{
               message:"Hello world"
            }
        })
    
    </script>

而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致

--------------------

## 二.指令 ##

> 由上面，我们可以发现一个新奇的东西，v-model，这便是指令。
> 
> **指令**：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。

常用指令：

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td style="width:174px;"><strong>指令</strong></td> 
   <td style="width:324px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; 作用</strong></td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-bind</td> 
   <td style="width:324px;">为HTML标签绑定属性值，如设置 href,css样式等</td> 
  </tr> 
  <tr> 
   <td style="width:174px;"> <p>v-model</p> </td> 
   <td style="width:324px;">在表单元素上创建双向数据绑定</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-on</td> 
   <td style="width:324px;">为HTML标签绑定事件</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-if</td> 
   <td colspan="1" style="width:324px;">条件性的渲染某元素，判定为true时渲染,否则不渲染</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-else-if</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-else</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-show</td> 
   <td style="width:324px;">根据条件展示某元素，区别在于切换的是display属性的值</td> 
  </tr> 
  <tr> 
   <td style="width:174px;">v-for</td> 
   <td style="width:324px;">列表渲染，遍历容器的元素或者对象的属性</td> 
  </tr> 
 </tbody> 
</table>

**v-bind**

为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，

使用时，可以直接**省略v-bind**

![6fd1d082c28d41519dd6755857fbcf9b.png][]

例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。

**v-on**

为HTML标签绑定事件，在Vue当中创建methods方法。

<head> 
        <title>Vue复习</title>
        <script src="vue.js"> </script>
    </head>
    <body>
        <div id="app">           
            <input type="button" value="按钮"  v-on:click="chage()">
        </div>
    
    </body>
    
    <script>
        new Vue({
            el:"#app",
            data:{
               message:"Hello world",
               url:"http://t.csdn.cn/w5tHw"
            },
            methods: {
                chage:function(){
                  alert("执行方法");
              }
            }
        })
    </script>

注：事件不再是onclick，而是click，去掉了on。

--------------------

**v-if、v-else-if、v-else**

这三个配套使用，用法与 **Java中的if、else if、else** 一致，一般用于<span>标签中，是进行条件判断。当成立时，则会显露出**<span> 文本 </span>**中的文本内容。

注：如果不成立，浏览器检查中的元素是不存在该行代码的。

<head> 
        <title>Vue复习</title>
        <script src="vue.js"> </script>
    </head>
    <body>
        <div id="app"> 
            <span v-if="age<18">未成年</span>
            <span v-else-if="age>=18&&age<=40">青年</span>
            <span v-else>中年</span>
    </body>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                age:18;
            }
        })
    </script>

![097606fbb2b24cd8afabeb2b72cdfac1.png][]

--------------------

**v-show**

作用与v-if等指令一样，但是**会显示**出 不符合条件的代码行

![ebcc1be3d43643dc93daf7f63604522c.png][]

--------------------

**v-for**

循环，遍历，当数据模型data 里含有数组时，可以使用

> 语法格式：<div v-for=" 变量名 in 数组名">\{ \{ 变量名 \}\}</div>
> 
> 获取索引：<div v-for=" (变量名,下标名） in 数组名"> \{ \{下标值+1\}\}:\{ \{ 变量名 \}\} </div>

--------------------

## 三.Vue生命周期 ##

> 生命周期：指一个对象从创建到销毁的整个过程。
> 
> Vue生命周期有8个阶段：每触发一个阶段便会**自动执行**一个生命周期的方法,也称钩子方法。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>状态</td> 
   <td>阶段周期</td> 
  </tr> 
  <tr> 
   <td>beforeCreate</td> 
   <td>创建前</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>创建后</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>挂载前</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载完成</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>更新前</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>更新后</td> 
  </tr> 
  <tr> 
   <td>beforeDestory</td> 
   <td>销毁前</td> 
  </tr> 
  <tr> 
   <td>destory</td> 
   <td>销毁后</td> 
  </tr> 
 </tbody> 
</table>

Vue生命周期完整过程:

![c09d6b1dc7af457da9cf1762a6725ac9.png][]

**代码示例：**

注：Java程序员只要掌握mounted()方法.

--------------------

结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。

\----------懒惰的tq02

[tq02_CSDN_-C_Java_Java]: https://blog.csdn.net/m0_74097410?spm=1010.2135.3001.5343
[ae2584cf8f514cffb7eb41d62bfa2aeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/4f57bffe5ae84381bb4c0e0231fda28d.png
[C]: http://t.csdn.cn/kDaOr
[JavaSE]: http://t.csdn.cn/WCnPD
[MySQL]: http://t.csdn.cn/fFDET
[http_t.csdn.cn_IGTO7]: http://t.csdn.cn/IGTO7
[6fd1d082c28d41519dd6755857fbcf9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/8c113201f28d45aaa327047d16e07dc2.png
[097606fbb2b24cd8afabeb2b72cdfac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/2e448c5b0d01461b9e978a41e511987e.png
[ebcc1be3d43643dc93daf7f63604522c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a42938245b954e4c9bee4b8e92558432.png
[c09d6b1dc7af457da9cf1762a6725ac9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b5949c3f152146a2935c5fd7c1b46361.png