Vue新手村（一）

目录

1、Vue简介——Vue的特点

2、Vue的第一个页面

3.Vue的简单使用介绍

3.1、{{ }}的使用

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

3.2.2、v-html和v-text的区别

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

3.5、v-bind

3.5.1、基础语法

3.5.2、语法简化加新技巧

3.6、v-for

3.7、v-model双向绑定

1、Vue简介——Vue的特点

  1. Vue是一个JavaScript框架，优点就是简化了页面的js操作【BootStrap是一个css框架，封装css的】
  2. 易用、高效、灵活

2、Vue的第一个页面

        打开VSCode，创建一个test.html文件，引入Vue.js:

//开发版本:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

        我们在学习期间，使用开发环境的版本就可以了，一般上线时才会更换为生产环境的~

        一般建议把引用放在html标签的最后面哈~

第一个页面如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test">年龄：{{age}}</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#test",data:{age:18}})
</script>

效果：

 里面的内容说明：

        在Script标签里面，我们new了一个Vue对象，把数据信息都是放在对象中的。这个对象中，具体格式，如下：

el:"#app"， //指定vue作用范围
data:{//用来给vue实例绑定一系列数据
}，
methods:{//方法
}

        通过上数的例子，也可以了解到：

  1. new的这个vue对象只有在el中所指作用范围内才会起到效果【建议使用id，具有唯一性】；
  2. 数据信息都是放在data中的，方法都放在methods中；
  3. 访问data中的数据需要{{  }}【其他使用我们下面继续说】

3.Vue的简单使用介绍

3.1、{{ }}的使用

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test">年龄：{{age}}  </br>{{age+1}}</br>{{name.length}}</br>{{name.toUpperCase()}}</br></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#test",data:{age:18,name:"abc"}})
</script>

效果：

        总结：

                使用{{ }}获取data中的数据时，可以使用表达式、运算符、调用方法等相关操作【不能使用++】

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

        v-text用途：用来获取data中的数据，将数据以文本的形式渲染到指定的标签内部，类似于JavaScript中的innerText

v-text代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>年龄：{{age}}  </div><div v-text="age"></div></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#test",data:{age:18,}})
</script>

效果：

看起来好像和{{ }}差不多~

v-text和{{ }}的区别：

代码改动: 

效果展示：

v-text把标签中之前的值也给抹去了~
我把网络放在弱网环境下：

区别总结:

  1. 使用v-text取值会将标签中的原有的数据覆盖，使用{{ }}（插值表达式）的形式不会覆盖
  2. {{ }}（插值表达式）在弱网环境下会出现插值闪烁，而v-text不会

3.2.2、v-html和v-text的区别

        v-html的用途：用来获取data中的数据，将数据中含有的html标签解析，再渲染到指定的标签的内部，类似于JavaScript中的innerHTML

v-html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><div v-text="age">2年龄：</div><div v-html="age">3年龄：</div></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#test",data:{age:18,}})
</script>

看起来和v-text没有区别哈，再看：

代码变更：

效果：

区别总结:

  1. v-html会html标签解析，而v-text只会把他们看做是一个文本

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

        我们先来回顾一下，js中事件三要素

  1. 事件源：发生事件源头就是事件源，一般指的是html标签
  2. 事件：发生特定动作 如：onclick单击，dbclick双击...
  3. 监听器：事件处理程序，一般指的是事件处理函数

        vue事件v-on，大家看代码，结合着理解一下：

例1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><button v-on:click="test1">点我</button></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#test",data:{age:18},methods:{test1:function() {alert('hhhhhh')}}})
</script>

例2：

为什么是this.age，而不是this.data.age呢，我们打印vue对象来看看：

打开浏览器的console： 

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

  1. v-show:用来控制页面中某个标签是否展示
  2. v-if：用来控制页面元素是否展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><button v-show="true">v-show111</button><button v-show="false">v-show222</button><button v-if="true">v-if111</button><button v-if="false">v-if222</button></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vue = new Vue({el:"#test",data:{age:18},methods:{}});console.log(vue)
</script>

效果展示，只展示了值为true的：

再来看个案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><button v-show="isShow" @click="test1">v-show111</button><button v-if="isShow" @click="test2">v-if111</button></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vue = new Vue({el:"#test",data:{age:18,isShow:true},methods:{test1() {this.isShow = !this.isShow},test2() {this.isShow = !this.isShow}}});console.log(vue)
</script>

重要点：

小结：

  1. 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。
  2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏3.v-if、vshow : 作用: 都是用来控制页面中标签是否展示和隐藏 使用: 标签:v-if
  3. ="true false",v-show="true false"
  4. 区别:
    • v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏。推荐使用: v-show 在数据量比较大和控制显示状态切换频繁时。
    • v-if: 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏

3.5、v-bind

3.5.1、基础语法

v-bind：用来绑定标签的属性，从而通过vue动态修改标签属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.aaa {background-color: blue;}.bbb {background-color: red;}</style>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><button v-bind:class="cla" @click="test1">v-show111</button></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vue = new Vue({el:"#test",data:{age:18,cla:"aaa"},methods:{test1() {this.cla="bbb"}}});console.log(vue)
</script>

点击后，颜色就会变了~

3.5.2、语法简化加新技巧

不止是class，除了value，其他的都可以~

3.6、v-for

v-for：作用就是用来对 对象进行遍历（数组也是对象的一种）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><!-- 遍历对象 --><div v-for="(value,key,index) in user">{{index}}_{{key}}: {{value}};</div><!-- 遍历数组 --><div v-for="(name,index) in names">{{index}}_{{name}}</div><!-- 变量含有对象的数组 --><div v-for="(user,index) in users">方1：{{index}}___{{user}}方2：{{index}}___name:{{user.name}};age"{{user.age}};bir:{{user.bir}}</div></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vue = new Vue({el:"#test",data:{age:18,user:{name:"小龙",age:18,bir:"2003"},names:["龙","陈","CL"],users:[{name:"小龙",age:18,bir:2003},{name:"小c",age:20,bir:2004},{name:"小l",age:22,bir:2002},]},methods:{test1() {this.cla = !this.cla}}});console.log(vue)
</script>

效果：

3.7、v-model双向绑定

v-model：作用是用来绑定标签元素的值与vue实例对象中的data数据保持一致，从而实现双向的数据绑定

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><div>1年龄：{{age}}  </div><input type="text" v-model="age"></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vue = new Vue({el:"#test",data:{age:18},methods:{}});console.log(vue)
</script>

所谓的双向绑定，就是指表单中的数据变化，vue实例data数据也会变化，vue中data的值变化，表单的值也会变化

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch基本操作之索引操作

Elasticsearch基本操作之索引操作

本文说下Elasticsearch基本操作之索引操作 文章目录 概述创建索引创建索引示例重复创建索引示例 查看索引查看所有索引查看单个索引 删除索引删除索引 概述 由于是使用命令来操作Elasticsearch&#xff0c;可以使用kibana&#xff0c;postman和apifox等工具 我使用了apifox来执…
阅读更多...
Access数据库C#读写验证

Access数据库C#读写验证

1、数据库简介 Access数据库是一个相当古老的文件型数据库&#xff0c;主打一个简单方便&#xff0c;没有复杂的安装过程&#xff0c;没有庞大的后端管理&#xff0c;整个数据库就是一个文件。可以像普通文件一样复制和修改&#xff0c;可以同时读写。 在小型系统中&#xff0c…
阅读更多...
Java序列化篇----第一篇

Java序列化篇----第一篇

系列文章目录 文章目录 系列文章目录前言一、什么是java序列化，如何实现java序列化？二、保存(持久化)对象及其状态到内存或者磁盘三、序列化对象以字节数组保持-静态成员不保存四、序列化用户远程对象传输前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，…
阅读更多...
探索生成式AI：自动化、问题解决与创新力

探索生成式AI：自动化、问题解决与创新力

目录 自动化和效率&#xff1a;生成式AI的颠覆力量 解谜大师生成式AI&#xff1a;如何理解和解决问题 创新与创造力的启迪&#xff1a;生成式AI的无限潜能 自动化和效率&#xff1a;生成式AI的颠覆力量 1. 神奇的代码生成器&#xff1a;生成式AI可以帮助开发人员像魔术一样快…
阅读更多...
外包干了3个多月，技术退步明显。。。。。

外包干了3个多月，技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…
阅读更多...
Pytest的测试报告——Allure

Pytest的测试报告——Allure

一、html-report测试报告 html-report测试报告。是pytest下基本的测试报告。要使用pytest-html测试报告&#xff0c;就要确保python版本在3.6及以上即可。本身pytest所提供的测试结果汇总&#xff0c;是基于控制台的文本输出形式。 pytest-html是基于HTML格式实现的测试报告的…
阅读更多...
手机视频监控客户端APP如何实现跨安卓、苹果和windows平台，并满足不同人的使用习惯

手机视频监控客户端APP如何实现跨安卓、苹果和windows平台，并满足不同人的使用习惯

目 录 一、手机视频监控客户端的应用和发展 二、手机视频监控客户端存在的问题 三、HTML5视频监控客户端在手机上实现的方案 &#xff08;一&#xff09;HTML5及其优点 &#xff08;二&#xff09;HTML5在手机上实现视频应用功能的优势 四、手机HTML5…
阅读更多...
机器人相关知识

机器人相关知识

机器人学&#xff08;Robotics) 一些基础概念 位姿 位姿位置姿态 位姿的表示 刚体 刚性物体是一组粒子的集合&#xff0c;其中任意两个粒子之间的距离保持固定&#xff0c;不受物体运动或施加在物体上的力的影响。 “完全不可变形”的物体就是刚体。 刚体位置 刚性连杆 …
阅读更多...
2024年阿里云优惠活动清单_优惠代金券领取大全

2024年阿里云优惠活动清单_优惠代金券领取大全

阿里云服务器优惠活动大全包括&#xff1a;云服务器新人特惠、云小站、阿里云免费中心、学生主机优惠、云服务器精选特惠、阿里云领券中心等&#xff0c;活动上阿里云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;…
阅读更多...
使用Go语言编写高效的HTTP服务器

使用Go语言编写高效的HTTP服务器

随着互联网的快速发展&#xff0c;HTTP服务器在Web开发中扮演着越来越重要的角色。而Go语言作为一种高效、并发性强的编程语言&#xff0c;为编写高性能的HTTP服务器提供了强大的支持。本文将探讨如何使用Go语言编写高效的HTTP服务器。 首先&#xff0c;我们需要了解Go语言的H…
阅读更多...
基于FFmpeg的短视频编辑工具Cut

基于FFmpeg的短视频编辑工具Cut

前言 最近在学习FFmpeg和音视频的相关知识&#xff0c;为了加强对FFmpeg的认识和了解&#xff0c;于是撸了一个短视频编辑软件Cut。 效果图先行&#xff1a; 技术点 启动页优化 但启动app的时候会有一个短暂的黑屏或者白屏。为什么呢&#xff1f; 是因为在App启动时&#x…
阅读更多...
word2019保存后的图片变模糊了怎么办？Word 2019 默认保存后压缩变模糊的问题，解决方案

word2019保存后的图片变模糊了怎么办？Word 2019 默认保存后压缩变模糊的问题，解决方案

Word 2019 默认保存后压缩变模糊的问题&#xff0c;解决方案 1&#xff0c;新建word 文件&#xff0c;插入一张原始图片&#xff0c;1080*1920&#xff0c;如下图&#xff1a; 2&#xff0c;保存时&#xff0c;word 2019默认选项&#xff0c;导致word 保存后&#xff0c;图片…
阅读更多...
Reids原理及简单命令

Reids原理及简单命令

目录 1.关系数据库与非关系型数据库 关系型数据库 非关系型数据库 关系型数据库和非关系型数据库区别 数据存储方式不同 扩展方式不同 对事务性的支持不同 总结&#xff1a; 2. Redis简介 什么是redis reids优点 reids使用场景&#xff1a; reids快的原因 Redis数…
阅读更多...
Linux/Unix/国产化操作系统常用命令（二）

Linux/Unix/国产化操作系统常用命令（二）

目录 后CentOS时代国产化操作系统国产化操作系统有哪些常用Linux命令关于Linux的LOGO 后CentOS时代 在CentOS 8发布后&#xff0c;就有了一些变化和趋势&#xff0c;可以说是进入了"后CentOS时代"。这个时代主要表现在以下几个方面&#xff1a; CentOS Stream的引入…
阅读更多...
阿里云迁移AWS视频点播技术攻坚

阿里云迁移AWS视频点播技术攻坚

文章目录 &#x1f437; 背景&#x1f9a5; 简述&#x1f425; Aws服务&#x1f99c; AWS CloudFormation&#x1f41e; 问题&#x1f409; 落地方案&#x1f989; Aws vs Aliyun&#x1f344; 避坑指南 &#x1f437; 背景 由于AWS整体成本略低于阿里云&#xff0c;公司决定将…
阅读更多...
【软件测试】学习笔记-测试覆盖率

【软件测试】学习笔记-测试覆盖率

测试覆盖率通常被用来衡量测试的充分性和完整性&#xff0c;从广义的角度来讲&#xff0c;测试覆盖率主要分为两大类&#xff0c;一类是面向项目的需求覆盖率&#xff0c;另一类是更偏向技术的代码覆盖率。 需求覆盖率 需求覆盖率是指测试对需求的覆盖程度&#xff0c;通常的做…
阅读更多...
YOLOv5训练损失、精度、mAP绘图功能 | 支持多结果对比，多结果绘在一个图片（消融实验、科研必备）

YOLOv5训练损失、精度、mAP绘图功能 | 支持多结果对比，多结果绘在一个图片（消融实验、科研必备）

一、本文介绍 本文给大家带来的是YOLOv5系列的绘图功能，我将向大家介绍YOLO系列的绘图功能。我们在进行实验时，经常需要比较多个结果，针对这一问题，我写了点代码来解决这个问题，它可以根据训练结果绘制损失(loss)和mAP（平均精度均值）的对比图。这个工具不仅支持多个文件…
阅读更多...
本地引入Element UI后导致图标显示异常

本地引入Element UI后导致图标显示异常

引入方式 npm 安装 推荐使用 npm 的方式安装&#xff0c;它能更好地和 webpack 打包工具配合使用。 npm i element-ui -SCDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源&#xff0c;在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <…
阅读更多...
脆弱的SSL加密算法漏洞原理以及修复方法

脆弱的SSL加密算法漏洞原理以及修复方法

漏洞名称&#xff1a;弱加密算法、脆弱的加密算法、脆弱的SSL加密算法、openssl的FREAK Attack漏洞 漏洞描述&#xff1a;脆弱的SSL加密算法&#xff0c;是一种常见的漏洞&#xff0c;且至今仍有大量软件支持低强度的加密协议&#xff0c;包括部分版本的openssl。其实&#xf…
阅读更多...
数据库攻防学习之Redis

数据库攻防学习之Redis

Redis 0x01 redis学习 在渗透测试面试或者网络安全面试中可能会常问redis未授权等一些知识&#xff0c;那么什么是redis&#xff1f;redis就是个数据库&#xff0c;常见端口为6379&#xff0c;常见漏洞为未授权访问。 0x02 环境搭建 这里可以自己搭建一个redis环境&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023