【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

news/2024/4/24 17:35:14/文章来源:https://blog.csdn.net/HIGK_365/article/details/136543832

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

Vue模板代码

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title>
</head>
<body>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "",data: {},methods: {}})
</script>
</body>
</html>

Vue文本相关

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue文本相关</title>
</head>
<body>
<div><!--插值,不依赖于标签-->{{info}}<p>{{info}}</p><!--让元素的文本内容和变量进行绑定--><p v-text="info"></p><!--让元素的标签内容和变量进行绑定--><p v-html="info"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {info: "<b>文本相关</b>"}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue属性绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue属性绑定</title>
</head>
<body>
<div><!--属性绑定:v-bind--><a v-bind:href="url">超链接1</a><!--属性绑定简写(省略掉"v-bind")--><a :href="url">超链接2</a><input type="text" :value="info"><img :src="imgUrl" alt="">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {url: "http://www.baidu.com",info: "文本内容",imgUrl: "https://img-blog.csdnimg.cn/direct/f4f51baf0fd64076975340d0bce02fbb.png"}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue双向绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue双向绑定</title>
</head>
<body>
<div><input type="text" :value="info_a"><!--双向绑定:v-model--><input type="text" v-model="info_b">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {info_a: "属性绑定",info_b: "双向绑定"}})setTimeout(function () {alert(v.info_a + "  " + v.info_b)}, 8000)
</script>
</body>
</html>

结果

在这里插入图片描述

在这里插入图片描述

Vue事件绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue事件绑定</title>
</head>
<body>
<div><!--事件绑定:v-on:事件名="方法名"--><input type="button" value="按钮1" v-on:click="f()"><!--事件绑定简写--><input type="button" value="按钮2" @click="f">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {},methods: {f() {alert("按钮点击了");}}})
</script>
</body>
</html>

结果

在这里插入图片描述
在这里插入图片描述

Vue循环遍历

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue循环遍历</title>
</head>
<body>
<div><ul><!--循环遍历:v-for--><li v-for="name in arr">{{name}}</li></ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {arr: ["刘备", "关羽", "诸葛亮", "孙尚香", "刘禅"]},methods: {}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue显示隐藏

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue显示隐藏</title>
</head>
<body>
<div><!--显示删除:v-if--><h1 v-if="isVisible">刘德华</h1><!--显示删除:v-else--><h1 v-else>张三</h1><!--显示隐藏:v-show--><h1 v-show="isVisible">张学友</h1><h1>郭富城</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "body>div",data: {isVisible: true},methods: {}})
</script>
</body>
</html>

结果

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Day 8.TCP包头和HTTP

TCP包头 1.序号&#xff1a;发送端发送数据包的编号 2.确认号&#xff1a;已经确认接收到的数据的编号&#xff08;只有当ACK为1时、确认号才有用&#xff09;&#xff1b; TCP为什么安全可靠 1.在通信前建立三次握手 SYP SYPACK ACK 2.在通信过程中通过序列号和确认号和…

数据库原理实验课(1)

目录 实验内容 安装头歌中的相关内容 具体过程 完结撒花~ 我也是第一次接触oracle的相关软件和操作&#xff0c;所以是一次傻瓜式教学记录 实验内容 安装头歌中的相关内容 具体过程 这是我在百度网盘中下载解压出来的oracle文件夹内的全部内容&#xff08;可能有因为安装完…

【CSS】(浮动定位)易忘知识点汇总

浮动特性 加了浮动之后的元素,会具有很多特性,需要我们掌握的. 1、浮动元素会脱离标准流(脱标&#xff1a;浮动的盒子不再保留原先的位置) 2、浮动的元素会一行内显示并且元素顶部对齐 注意&#xff1a; 浮动的元素是互相贴靠在一起的&#xff08;不会有缝隙&#xff09;&…

可编程线性霍尔传感器 IC

一、产品概述 CC6521/2 是一款高性能的可编程线性霍尔传感器 IC&#xff0c;采用先进的 BiCMOS 制程生产&#xff0c;具有霍尔系数高的优点&#xff0c;芯片内部包含了高灵敏度 霍尔传感器&#xff0c;霍尔信号预放大器&#xff0c;高精度的霍尔温度补偿单元&#xff0c;振荡…

Vessel - Linux hackthebox

#hard #runc #RE #Nodejs-SQLI Enumeration .git leak 使用 dumpall 下载 .git 打开 routes/index.js 可以看到网站使用 nodejs mysql 编写&#xff0c;且只有登录功能 router.post(/api/login, function(req, res) {let username req.body.username;let password req…

【自然语言处理六-最重要的模型-transformer-上】

自然语言处理六-最重要的模型-transformer-上 什么是transformer模型transformer 模型在自然语言处理领域的应用transformer 架构encoderinput处理部分&#xff08;词嵌入和postional encoding&#xff09;attention部分addNorm Feedforward & add && NormFeedforw…

uniapp的h5端在线预览文件

步骤如下&#xff1a; 1、下载需要准备的工具文件包 2、将其解压到/static/pdf文件夹下,如图&#xff1a; 3、创建在线查看文件的页面&#xff1a; <template><view><web-view :src"path"></web-view></view> </template>&l…

#微信小程序(布局、渲染层基础知识)

1.IDE&#xff1a;微信开发者工具 2.实验&#xff1a; 3.记录: &#xff08;1&#xff09;view&#xff08;类似于div&#xff09; &#xff08;2&#xff09;块级元素不占满一行且水平均分布局flex,justify(space-around) &#xff08;3&#xff09;滚动<scroll view sc…

css使用

文章目录 一、什么是CSS二、CSS导入方式三、CSS选择器四、CSS属性 一、什么是CSS <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>div{color: red;}</style> &…

Tonka Finance,BTCFi 浪潮的发动机

在 2023 年年初&#xff0c;Ordinals 技术方案为比特币 Layer1 带来了一种全新的资产发行方式&#xff0c;此后一场以比特币生态为主战场的新一轮资金、注意力价值争夺战打响&#xff0c;并且越来越多的加密原教旨主义者、密码极客们加入这场战争中。我们看到&#xff0c;铭文市…

【K8S】一种基于Istio+Okteto下的快乐开发模式

自从服务上云引入K8S后&#xff0c;我们开发模式也发生了改变。我们最能想到的一种开发流程就是&#xff1a; 首先用ide编写业务代码其次&#xff0c;编译打包成镜像&#xff0c;并上传至habor接着&#xff0c;通过kubectl edit deployment替换镜像或者通过helm --install的方…

少儿编程机器人技术架构解析与实现流程

随着科技的飞速发展&#xff0c;少儿编程机器人成为了越来越受欢迎的教育工具&#xff0c;为孩子们提供了学习编程的新途径。在这篇文章中&#xff0c;我们将深入探讨少儿编程机器人的技术架构和实现过程&#xff0c;揭示背后的技术原理和开发策略。同时&#xff0c;我们也将介…

穿越牛熊,股市的春天还有多远?

2023年&#xff0c;资本市场的严冬令无数投资者和机构投资者都感受到了前所未有的压力。VC/PE、公募基金、股权投资类公司等机构&#xff0c;在这一年里业绩普遍不佳&#xff0c;寒意弥漫。VC/PE机构的营业收入普遍呈现负增长&#xff0c;公募基金更是历史上首次连续两年亏损&a…

Halcon基本语法

Halcon是什么&#xff1f; Halcon&#xff08;全称为Halcon Imaging Library&#xff09;是由德国MVTec Software GmbH开发的一套功能强大的机器视觉软件库。Halcon提供了丰富的图像处理和机器视觉算法&#xff0c;用于解决各种工业和科学领域中的视觉检测、识别和测量等问题。…

重学SpringBoot3-WebMvcAutoConfiguration类

重学SpringBoot3-WebMvcAutoConfiguration类 是什么什么用生效条件作用 自定义配置的三种方式自定义配置举例1. 自定义 DispatcherServlet 配置2. 静态资源配置3. 自定义MVC配置4. 消息转换器5. 异常处理 是什么 org.springframework.boot.autoconfigure.web.servlet.WebMvcAut…

HTML---表单验证

文章目录 目录 本章目标 一.表单验证概述 二.表单选择器 属性过滤选择器 三.表单验证 表单验证的方法 总结 本章目标 掌握String对象的用法会使用表单选择器的选择页面元素会使用JQuery事件进行表单验证Ajax的概念和作用 一.表单验证概述 前端中的表单验证是在用户提交表…

Vision Transformer结构解析

Vision Transformer结构解析 ViT简介ViT参数量ViT三大模块ViT图像预处理模块——PatchEmbed多层Transformer Encoder模块MLP&#xff08;FFN&#xff09;模块 基本的Transformer模块Vision Transformer类的实现Transformer知识点网络结构计算复杂度对比Transformer的参数量和计…

C#,煎饼排序问题(Pancake Sorting Problem)算法与源代码

1 煎饼排序问题 给定一个未排序的数组&#xff0c;任务是对给定数组进行排序。您只能在阵列上执行以下操作。 翻转&#xff08;arr&#xff0c;i&#xff09;&#xff1a;将数组从0反转为i 示例&#xff1a; 输入&#xff1a;arr[]{23、10、20、11、12、6、7} 输出&#xff1a…

通过联合部署DDoS高防和WAF提升网站防护能力

如果您的网站遭受的攻击既有流量型攻击&#xff0c;又混杂精巧的Web应用层攻击时&#xff08;例如SQL注入、跨站脚本攻击、命令注入等&#xff09;时&#xff0c;推荐您组合使用阿里云DDoS高防和Web 应用防火墙 WAF&#xff08;Web Application Firewall&#xff09;&#xff0…

B端系统优化,可不是换个颜色和图标,看看与大厂系统的差距。

Hi&#xff0c;我是贝格前端工场&#xff0c;优化升级各类管理系统的界面和体验&#xff0c;是我们核心业务之一&#xff0c;欢迎老铁们评论点赞互动&#xff0c;有需求可以私信我们 一、不要被流于表面的需求描述迷惑。 很多人找我们优化系统界面&#xff0c;对需求总是轻描淡…