JavaWeb--前端--03Vue入门

news2024/12/25 9:39:47

Vue入门

  • 1 Vue概述
  • 2 快速入门
  • 3 Vue指令
    • 3.1 v-bind和v-model
    • 3.2 v-on
    • 3.3 v-if和v-show
    • 3.4 v-for
    • 3.5 案例
  • 4 生命周期

1 Vue概述

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

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

  • Model: 数据模型,特指前端中通过请求从后台获取的数据
  • View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
  • ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上
    在这里插入图片描述
    基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单。

接下来我们来介绍一下vue。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

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

2 快速入门

准备vue.js文件。Vue.js v2.7.8 © 2014-2022 Evan You Released under the MIT License.

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

在创建vue对象时,有几个常用的属性:

  • el:用来指定那些标签手Vue管理,该属性取值#app中的app需要是受管理的标签的id属性值
  • data:定义数据模型
  • methods:用来定义函数
    在html区域编写视图,{{}}就是插值表达式,用来将vue对象中定义的model展示到页面上的
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

整体代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
        message: "Hello Vue"
    }
    })

</script>

</html>

3 Vue指令

在上述的快速入门中,我们发现了html中输入了一个没有学过的属性v-model,这个就是vue的指令
在vue中,通过大量的指令来实现数据绑定到视图的,所以接下来我们需要学习vue的常用指令,如下表所示:

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

3.1 v-bind和v-model

指令作用
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
  • v-bind: 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化。

原来的代码:

<!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-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a >链接1</a>
        <a >链接2</a>

        <input type="text" >

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

在上述的代码中,我们需要给<a>标签的href属性赋值,并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码:

<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>

在这里插入图片描述

  • v-model: 在表单元素上创建双向数据绑定。什么是双向?
    • vue对象的data属性中的数据变化,视图展示会一起变化
    • 视图数据发生变化,vue对象的data属性中的数据也会随着变化。

data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?只有表单项标签!所以双向绑定一定是使用在表单项标签上的

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

在这里插入图片描述

整体代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

        <!-- <a >链接1</a> -->
        <!-- <a >链接2</a> -->
        <!-- v-bind是可以省略的,但是:不能省略 -->
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <br>

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

    </div>
</body>

<script>
    new Vue({
        el: "#app",
            data: {
            url: "https://www.baidu.com"
        }
    })


</script>

</html>

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()">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>

    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 通过v-on指令绑定单击事件 -->
        <input type="button" value="点我一下" v-on:click="handle()">
        
        <!-- v-on也存在简写方式,即v-on: 可以替换成@ -->
        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            handle: function () {
                alert("你点了我一下");
            }
        }

    })


</script>

</html>

3.3 v-if和v-show

指令描述
v-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素,区别在于切换的是display属性的值
<!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-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,:
        <span>年轻人(35及以下)</span>
        <span>中年人(35-60)</span>
        <span>老年人(60及以上)</span>

        <br><br>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

v-show和v-if的作用效果是一样的,只是原理不一样。复制上述html代码,修改v-if指令为v-show指令
在这里插入图片描述
浏览器呈现的效果是一样的,但是浏览器中html源码不一样。v-if指令,不满足条件的标签代码直接没了,而v-show指令中,不满足条件的代码依然存在,只是添加了css样式来控制标签不去显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if</title>
    <script src="js/vue.js"></script>
</head>

<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>
    new Vue({
        el: "#app",
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

</html>

3.4 v-for

v-for: 从名字我们就能看出,这个指令是用来遍历的。其语法格式如下:

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

准备原始代码:

<!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>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>
//分别编写2种遍历语法,来遍历数组,展示数据
 <div id="app">
     <div v-for="addr in addrs">{{addr}}</div>
     <hr>
     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

在这里插入图片描述

3.5 案例

在这里插入图片描述

  • 如上图所示,我们提供好了数据模型,users是数组集合,提供了多个用户信息。然后我们需要将数据以表格的形式,展示到页面上,其中,性别需要转换成中文男女,等级需要将分数数值转换成对应的等级。

  • 分析:

    首先我们肯定需要遍历数组的,所以需要使用v-for标签;然后我们每一条数据对应一行,所以v-for需要添加在tr标签上;其次我们需要将编号,所以需要使用索引的遍历语法;然后我们要将数据展示到表格的单元格中,所以我们需要使用{{}}插值表达式;最后,我们需要转换内容,所以我们需要使用v-if指令,进行条件判断和内容的转换

  • 步骤:

    • 使用v-for的带索引方式添加到表格的<tr>标签上
    • 使用{{}}插值表达式展示内容到单元格
    • 使用索引+1来作为编号
    • 使用v-if来判断,改变性别和等级这2列的值

准备好的代码:

<!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 src="js/vue.js"></script>
</head>
<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>
        </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>

加工后:

<!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 src="js/vue.js"></script>
</head>

<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 v-else style="color: red;">不及格</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>

4 生命周期

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

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数:

在这里插入图片描述
其中我们需要重点关注的是**mounted,**其他的我们了解即可。

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>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        }
    })
</script>
</html>

编写mounted()函数

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1601518.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis-键值设计

Redis-键值设计 1.设置key的规范 遵循基本格式&#xff1a;【业务名称】&#xff1a;【数据名】&#xff1a;【id】 可读性强&#xff0c;在客户端的情况下使用:如果前缀相同会分目录层级长度不超过44字节 string数据结构的三种类型&#xff0c;在44字节之内是embstring 内存…

1.5MHz,1.2A COT 架构同步降压变换器只要0.16元,型号:LN3435

推荐原因 1.5MHZ的开关频率&#xff0c;可以使用小电感&#xff0c;1.2A满足多数应用&#xff0c;价格感人&#xff0c;只要0.16元 产品概述 LN3435是一款电流模COT架构同步降压开关稳压器。 输入范围为 2.7V-6.0V&#xff0c;可提供 1.2A 的连续输出电流。 内部集成了低内阻…

【Excel2LaTeX】复杂表格制作的解决方案

刚开始用LaTeX写论文&#xff0c;遇到的第一道坎就是绘制表格&#xff0c;较小的普通表格可以通过简单的语法实现&#xff0c;但是较大的复杂的表格却让我无从下手。 Excel2LaTeX插件 这里介绍一种我用到非常顺手的工具&#xff1a;Excel2LaTeX插件&#xff0c;下载地址&#x…

SQL系统函数知识点梳理(Oracle)

这里写目录标题 函数系统函数转换函数to_date()to_char()将数值转换成字符格式 添加货币符号将日期转换成字符 其他不常用的转换函数 字符型函数连接函数大小写转换函数大写转换小写转换首字母大写&#xff0c;其余的小写 替换函数去除空格函数截取函数填充函数获取字符长度函数…

35、链表-LRU缓存

思路&#xff1a; 首先要了解LRU缓存的原理&#xff0c;首先定下容量&#xff0c;每次get请求和put请求都会把当前元素放最前/后面&#xff0c;如果超过容量那么头部/尾部元素就被移除&#xff0c;所以最近最少使用的元素会被优先移除&#xff0c;保证热点数据持续存在。 不管放…

宿州市水环境投资 | 邀您参加2024全国水科技大会暨技术装备成果展览会

嘉宾简介 田 云 宿州市水环境投资建设有限公司 董事长兼总经理 报告题目&#xff1a;宿州市主城区水环境智慧水务建设交流 男&#xff0c;回族&#xff0c;1976年6月生&#xff0c;新疆克拉玛依人&#xff0c;2007年4月加入中国共产党&#xff0c;1999年7月参加工作&a…

docker安装clickhouse数据库

1.创建目录 mkdir -p /data/clickhouse/data mkdir -p /data/clickhouse/conf mkdir -p /data/clickhouse/log2.拉取镜像 docker pull clickhouse/clickhouse-server3.创建临时容器 docker run -d --rm --name clickhouse-server --ulimit nofile262144:262144 clickhouse/c…

ELK日志分析系统之Kafka

目录 一、消息队列基本介绍 1、为什么需要消息队列(MQ) 2、使用消息队列的好处 1.解耦 2.可恢复性 3.缓冲 4.灵活性 & 峰值处理能力 5.异步通信 3、Kafka消息队列的两种模式 1.点对点模式 2.发布/订阅模式 二、Kafka基本介绍 1、Kafka定义 2、Kafka概念 3、…

IO流高级流

前言 缓冲区能够提升输入输出的效率 虽然FileReader和FileWriter中也有缓冲区 但是BufferedReader和BufferWriter有两个非常好用的方法. 缓冲流 字节缓冲流 import java.io.*;public class BufferedStreamDemo {public static void main(String[] args) throws IOExceptio…

网工基础协议——TCP/UDP协议

TCP和UDP的不同点&#xff1a; TCP(Transmission Control Protocol&#xff0c;传输控制协议)&#xff1b; UDP(User Data Protocol&#xff0c;用户数据报协议)&#xff1b; TCP&#xff1a;传输控制协议&#xff0c;面向连接可靠的协议&#xff0c;只能适用于单播通信&…

Remote Desktop Web修改密码,自动填写域前缀

C:\Windows\Web\RDWeb\Pages\zh-CN\password.aspx 内 添加 value“ITinfra” CMD或者powershell 重启IIS服务&#xff1b; iisreset

【漏洞复现】飞企互联-FE企业运营管理平台 ProxyServletUti接口处存在任意文件读取漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

设备全生命周期管理平台:各领域的关键手段

在当今的各个领域中&#xff0c;设备全生命周期管理平台正逐渐崭露头角&#xff0c;成为提高设备管理水平的关键手段。 数字化转型已成为众多企业的重要发展方向&#xff0c;将设备管理数字化可显著提高效率与准确性。同时&#xff0c;智能化应用&#xff0c;如利用人工智能和机…

Java——代码块

目录 一.代码块概念以及分类 二.普通代码块 三.构造代码块 四.静态代码块 一.代码块概念以及分类 使用 {} 定义的一段代码称为代码块。根据代码块定义的位置以及关键字&#xff0c;又可分为以下四种&#xff1a; 普通代码块构造块静态块同步代码块&#xff08;后续讲解多…

【vue3】插件@tsparticles/vue3、tsparticles实现粒子特效

文章目录 一、安装依赖二、全局引入三、使用 一、安装依赖 npm i tsparticles/vue3 npm i tsparticles二、全局引入 // main.js import Particles from tsparticles/vue3 import { loadFull } from tsparticlesconst app createApp(App) app.use(Particles, {init: async (e…

远程连接服务器ubuntu系统的PyCharm打不开

问题&#xff1a;远程连接服务器ubuntu系统&#xff0c;PyCharm打不开 尝试杀死服务器进程&#xff0c;重新连接服务器&#xff1a;pkill -u 用户名XShell远程连接&#xff0c;都打不开 解决方案&#xff1a;

python复制文件夹内容

参考博客 https://blog.csdn.net/itfans123/article/details/133710731 案例1 import os import shutildef copy_folder(source_folder, destination_folder):# 创建目标文件夹os.makedirs(destination_folder, exist_okTrue)# 遍历源文件夹中的所有文件和文件夹for item in …

刷穿力扣006-剑指offer一数组——02寻找目标值-二维数组

刷穿力扣006-剑指offer<一>数组——02寻找目标值-二维数组 基本面试题都是我带大家刷的力扣热题100和剑指offer的75道题&#xff0c;建议刷两遍&#xff01;&#xff08;ps:想找工作实习的同学&#xff0c;文末有面试八股和简历模板&#xff09; 题目&#xff1a; 语言…

Python爬虫入门教程!

什么是爬虫? 爬虫就是自动获取网页内容的程序&#xff0c;例如搜索引擎&#xff0c;Google&#xff0c;Baidu 等&#xff0c;每天都运行着庞大的爬虫系统&#xff0c;从全世界的网站中爬虫数据&#xff0c;供用户检索时使用。 爬虫流程 其实把网络爬虫抽象开来看&#xff0c;它…

【智能算法】能量谷优化算法(EVO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2023年&#xff0c;M Azizi等人受到物理理论粒子稳定性与衰变性启发&#xff0c;提出了能量谷优化算法&#xff08;Energy Valley Optimizer, DVO&#xff09;。 2.算法原理 2.1算法思想 EVO基于…