web前端：Vue

╰+哭是因爲堅強的太久メ 2023-09-30 23:24 10阅读 0赞

本文只是对Vue框架进行简单学习与介绍，详细Vue学习请转步[Vue3教程][Vue3]。

#### 目录 ####

*  一、Vue概述
 *  二、Vue快速入门
 *  三、Vue指令
 *   *  3.1 v-bind和v-model
     *  3.2 v-on
     *  3.3 v-if和v-show
     *  3.4 v-for
     *  3.5综合案例
 *  四、Vue生命周期

## 一、Vue概述 ##

先来分析下页面的组成：一个完整的html页面包括了视图和数据，数据是通过请求从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做**MVVM(Model-View-ViewModel)的前端开发思想**，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。

`MVVM`:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

*  Model: 数据模型，特指前端中通过请求从后台获取的数据
 *  View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
 *  ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

如图所示就是MVVM开发思想的含义：  
![在这里插入图片描述][901ba81f03de4626af0e936a495f1557.png]  
Vue.js（读音 /vjuː/, 类似于 **view**） 是一套构建用户界面的 **渐进式框架**。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。

框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

## 二、Vue快速入门 ##

1.  新建HTML页面，引入Vue.js文件

1.  在JS代码区域，创建Vue核心对象，定义数据模型

在创建vue对象时，有几个常用的属性：

*  el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
 *  data: 用来定义数据模型
 *  methods: 用来定义函数。

1.  编写视图

<div id="app">
        <input type="text" v-model="message">
        {
       { message }}
    </div>

其中\{ \{\}\}是插值表达式，用来将vue对象中定义的model展示到页面上的

*  形式：\{ \{ 表达式 \}\}。
 *  内容可以是：
    
     *  变量
     *  三元运算符
     *  函数调用
     *  算术运算

## 三、Vue指令 ##

`v-model`，这个就是vue的**指令**。

**指令：** HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在vue中，通过大量的指令来实现数据绑定到视图的vue的常用指令，如下表所示：

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

### 3.1 v-bind和v-model ###

*  v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
 *  v-model： 在表单元素上创建双向数据绑定。什么是双向？
    
     *  vue对象的data属性中的数据变化，视图展示会一起变化
     *  视图数据发生变化，vue对象的data属性中的数据也会随着变化。
     *  **双向绑定的作用：可以获取表单的数据的值，然后提交给服务器**
    
    data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？**只有表单项标签！所以双向绑定一定是使用在表单项标签上的**。

代码如下：

<body>
        <div id="app">
    
            <a v-bind:href="url">链接1</a>
            <a :href="url">链接2</a>
    
            <input type="text" v-model="url">
    
        </div>
    </body>
    <script>
        //定义Vue对象
        new Vue({
          
            el: "#app", //vue接管区域
            data:{
          
               url: "https://www.baidu.com"
            }
        })
    </script>

### 3.2 v-on ###

v-on: 用来给html标签绑定事件的。**需要注意的是如下2点**：

*  v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
 *  v-on语法绑定事件时，事件名相比较js中的事件名，没有on
    
    例如：在js中，事件绑定demo函数
    
        <input onclick="demo()">
    
    vue中，事件绑定demo函数
    
        <input v-on:click="demo()">

代码如下：

<body>
        <div id="app">
    
            <input type="button" value="点我一下" v-on:click="handle()">
    
            <input type="button" value="点我一下" @click="handle()">
    
        </div>
    </body>
    <script>
        //定义Vue对象
        new Vue({
          
            el: "#app", //vue接管区域
            data:{
          
               
            },
            methods: {
          
                handle: function(){
          
                    alert("你点我了一下...");
                }
            }
        })
    </script>

### 3.3 v-if和v-show ###

v-show和v-if的作用效果是一样的，只是原理不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

<body>
        <div id="app">
            
            年龄<input type="text" v-model="age">经判定,为:
            <span v-if="age <= 35">年轻人(35及以下)</span>
            <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
            <span v-else>老年人(60及以上)</span>
    
            <br><br>
    
            年龄<input type="text" v-model="age">经判定,为:
            <span v-show="age <= 35">年轻人(35及以下)</span>
            <span v-show="age > 35 && age < 60">中年人(35-60)</span>
            <span v-show="age >= 60">老年人(60及以上)</span>
    
        </div>
    </body>
    <script>
        //定义Vue对象
        new Vue({
          
            el: "#app", //vue接管区域
            data:{
          
               age: 20
            },
            methods: {
          
                
            }
        })
    </script>

### 3.4 v-for ###

v-for: 这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
        {
       {变量名}}
    </标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签**上**。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
        
       {
       {索引变量 + 1}} {
       {变量名}}
    </标签>

代码如下：

<body>
        <div id="app">
            <div v-for="addr in addrs">{
       {addr}}</div>
            <hr>
            <div v-for="(addr,index) in addrs">{
       {index + 1}} : {
       {addr}}</div>
        </div>
    </body>
    <script>
        //定义Vue对象
        new Vue({
          
            el: "#app", //vue接管区域
            data:{
          
               addrs:["北京", "上海", "西安", "成都", "深圳"]
            },
            methods: {
                      
            }
        })
    </script>

![在这里插入图片描述][5707ca065eb849e59f667d7095fc68fd.png]

### 3.5综合案例 ###

<body>
        <div id="app">  
            <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
    
                <tr align="center" v-for="(user,index) in users">
                    <td>{
       {index + 1}}</td>
                    <td>{
       {user.name}}</td>
                    <td>{
       {user.age}}</td>
                    <td>
                        <span v-if="user.gender == 1">男</span>
                        <span v-if="user.gender == 2">女</span>
                    </td>
                    <td>{
       {user.score}}</td>
                    <td>
                        <span v-if="user.score >= 85">优秀</span>
                        <span v-else-if="user.score >= 60">及格</span>
                        <span style="color: red;" v-else>不及格</span>
                    </td>
                </tr>
            </table>
    
        </div>
    
    </body>
    
    <script>
        new Vue({
          
            el: "#app",
            data: {
          
                users: [{
          
                    name: "Tom",
                    age: 20,
                    gender: 1,
                    score: 78
                },{
          
                    name: "Rose",
                    age: 18,
                    gender: 2,
                    score: 86
                },{
          
                    name: "Jerry",
                    age: 26,
                    gender: 1,
                    score: 90
                },{
          
                    name: "Tony",
                    age: 30,
                    gender: 1,
                    score: 52
                }]
            },
            methods: {
          
                
            },
        })
    </script>
    </html>

浏览器效果如下：![在这里插入图片描述][43383cba9992445bbef9d56ac1fe0824.png]

## 四、Vue生命周期 ##

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>阶段周期</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>创建前</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>创建后</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>挂载前</td> 
  </tr> 
  <tr> 
   <td><strong>mounted</strong></td> 
   <td><strong>挂载完成</strong></td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>更新前</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>更新后</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>销毁前</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>销毁后</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][cfdaa773fff441589d19c7c6f58a9c1c.png]  
`mounted：`挂载完成，Vue初始化成功，HTML页面渲染成功。**以后我们一般用于页面初始化自动的ajax请求后台数据**

![在这里插入图片描述][e0f0c2cf31604186a6a7b2f8197ec313.png]

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：  
![在这里插入图片描述][ea81e78665794023a9faa7311d6a4d88.png]

[Vue3]: https://www.runoob.com/vue3/vue3-tutorial.html
[901ba81f03de4626af0e936a495f1557.png]: https://img-blog.csdnimg.cn/901ba81f03de4626af0e936a495f1557.png
[5707ca065eb849e59f667d7095fc68fd.png]: https://img-blog.csdnimg.cn/5707ca065eb849e59f667d7095fc68fd.png
[43383cba9992445bbef9d56ac1fe0824.png]: https://img-blog.csdnimg.cn/43383cba9992445bbef9d56ac1fe0824.png
[cfdaa773fff441589d19c7c6f58a9c1c.png]: https://img-blog.csdnimg.cn/cfdaa773fff441589d19c7c6f58a9c1c.png
[e0f0c2cf31604186a6a7b2f8197ec313.png]: https://img-blog.csdnimg.cn/e0f0c2cf31604186a6a7b2f8197ec313.png
[ea81e78665794023a9faa7311d6a4d88.png]: https://img-blog.csdnimg.cn/ea81e78665794023a9faa7311d6a4d88.png