【JavaWeb】详细讲解 Vue 知识

最新推荐文章于 2025-08-04 22:00:33 发布

August_._

最新推荐文章于 2025-08-04 22:00:33 发布

阅读量963

点赞数 16

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签： java 后端 vue.js 周期 html css javascript

本文链接：https://blog.youkuaiyun.com/2301_80870486/article/details/146097091

JavaWeb 专栏收录该内容

6 篇文章

订阅专栏

文章目录

1. Vue概述
2. 入门程序
3. Vue指令
4. 生命周期

1. Vue概述

Vue.js 是一套构建用户界面的 渐进式框架。采用自底向上增量开发的设计。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
在开发中，因为数据是通过请求从后台获取的，所有需要需要我们使用DOM操作，将后台获取到的数据呈现到页面上。

MVVM(Model-View-ViewModel)前端开发思想:

Model: 数据模型，指前端中通过Ajax来发起请求从后台获取的数据
View: 视图，用于展示数据的页面。可以通过ElementUI框架替代HTML+CSS，从而更加方便的搭建View
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

让开发者更加关注数据，而非数据绑定到视图这种机械化的操作。

其中ViewModel部分开发的vue前端框架，可以替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。参考下图对比：
在这里插入图片描述

因为vue全部帮我们封装好了，所以我们看不到之前的DOM操作。

2. 入门程序

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

el: 用来指定哪些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    //编写<script>标签来引入vue.js文件
    <script src="js/vue.js"></script>
</head>
  
//在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的
<body>

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

</body>
//js代码区域定义vue对象
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

浏览器打开效果如图所示：
在这里插入图片描述

3. Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
在vue中，通过大量的指令来实现数据绑定到视图的，如下表所示：

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

3.1 v-bind和v-model

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

（1）v-bind
为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
代码如下：

<body>
    <div id="app">
      
        //值来自于vue对象的数据模型中的url变量
        <a v-bind:href="url">链接1</a>
      
        //v-bind指令是可以省略的，但是:不能省略
        <a :href="url">链接2</a>

        <input type="text" >

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

效果如图所示：
在这里插入图片描述

注意：html属性前面有 : 表示采用的vue的属性绑定！

（2）v-model
在表单元素上创建双向数据绑定。

什么是双向：

vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。

<input type="text" v-model="url">

打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：
在这里插入图片描述
因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。
双向绑定的作用：可以获取表单的数据的值，然后提交给服务器.

3.2 v-on

用来给html标签绑定事件的。

注意：

v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数

<input onclick="demo()">

vue中，事件绑定demo函数

<input v-on:click="demo()">

示例代码：

<body>
    <div id="app">
        //给第一个按钮，通过v-on指令绑定单击事件
         <input type="button" value="点我一下" v-on:click="handle()">
        //v-on: 可以替换成@
         <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        //在vue对象的methods属性中定义事件绑定时需要的handle()函数
        methods: {
            handle: function(){
               alert("你点我了一下...");
            }
        }
    })
</script>

3.3 v-if和v-show

指令	描述
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性

代码如下：

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

        <!-- v-show和v-if的作用效果是一样的，只是原理不一样 -->
        年龄<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>

因为采用了双向绑定到age属性，所以可以通过表单输入框来改变age的值。
打开浏览器，展示效果如下所示：
在这里插入图片描述
浏览器呈现的效果是一样的，但是浏览器中html源码不一样。
v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

3.4 v-for

列表渲染，遍历容器的元素或者对象的属性。其语法格式如下：

//不需要索引
<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
//需要使用索引
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

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

代码演示：

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

浏览器打开，呈现如下效果：
在这里插入图片描述

3.5 事件驱动

（1）字符串顺序反转
HTML代码

<div id="app">
    <p>{{message}}</p>
    
    <!-- v-on:事件类型="事件响应函数的函数名" -->
    <button v-on:click="reverseMessage">Click me,reverse message</button>

</div>

Vue代码

var app = new Vue({
    "el":"#app",
    "data":{
        "message":"Hello Vue!"				
    },
    "methods":{
        "reverseMessage":function(){
            this.message = this.message.split("").reverse().join("");
        }
    }
});

（2）获取鼠标移动时的坐标信息
HTML代码

<div id="app">
    <div id="area" v-on:mousemove="recordPosition"></div>

    <p id="showPosition">{{position}}</p>

</div>

Vue代码

var app = new Vue({
    "el":"#app",
    "data":{
        "position":"暂时没有获取到鼠标的位置信息"
    },
    "methods":{
        "recordPosition":function(event){
            this.position = event.clientX + " " + event.clientY;
        }
    }
});

3.6 侦听属性

侦听就是对message属性进行监控。例如：
当firstName或lastName属性的值发生变化时，调用准备好的函数。
1、提出需求

<div id="app">
    <p>尊姓：{{firstName}}</p>

    <p>大名：{{lastName}}</p>

    尊姓：<input type="text" v-model="firstName" /><br/>
    大名：<input type="text" v-model="lastName" /><br/>
    <p>全名：{{fullName}}</p>

</div>

2、Vue代码
在watch属性中声明对firstName和lastName属性进行侦听的函数：

var app = new Vue({
    "el":"#app",
    "data":{
        "firstName":"jim",
        "lastName":"green",
        "fullName":"jim green"
    },
    "watch":{
        "firstName":function(inputValue){
            this.fullName = inputValue + " " + this.lastName;
        },
        "lastName":function(inputValue){
            this.fullName = this.firstName + " " + inputValue;
        }
    }
});

4. 生命周期

vue对象从创建到销毁的过程。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：
在这里插入图片描述

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。【一般用于页面初始化自动的ajax请求后台数据】。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<!-- 编写mounted声明周期的钩子函数，与methods同级 -->
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

</html>