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

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

Vue模板代码

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板</title>
</head>
<body>
<div id="box"></div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {},methods: {}})
</script>
</body>
</html>

Vue插值语法

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue插值语法</title>
</head>
<body>
<div id="box"><p>name:{{name}}</p><p>gender:{{gender}}</p><p>9*9:{{9*9}}</p>
</div>
<hr>
<div id="box_1"><p>name:{{name}}</p><p>gender:{{gender}}</p><p>9*9:{{9*9}}</p>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {name: 'SUNxRUN',gender: 'man'},})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue属性绑定语法

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue属性绑定语法</title>
</head>
<body>
<div id="box"><a :href="href">11</a><a v-bind:href="href">22</a><a href="9*9">33</a><a :href="9*9">44</a>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {href: "https://www.baidu.com/"},methods: {}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue事件绑定语法

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板</title>
</head>
<body>
<div id="box"><button v-on:click="show">点我-01</button><button @click="talk">点我-02</button>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {},methods: {show() {alert('啊啊啊啊')},talk: function () {alert('呀呀呀呀')}}})
</script>
</body>
</html>

结果

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

Vue事件参数

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue事件参数</title>
</head>
<body>
<div id="box"><button @click="choose"></button><button @click="choose"></button><button @click="choose"></button><button @click="choose"></button><h3>以上选项哪个最重要:{{focus}}</h3>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {focus: '??'},methods: {choose(e) {var c = e.target.innerHTMLthis.focus = c}}})
</script>
</body>
</html>

结果

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

Vue事件传参

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue事件传参</title>
</head>
<body>
<div id="box"><button @click="add(10,20)">add</button>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",methods: {add(x, y) {alert(x + y)}}})
</script>
</body>
</html>

结果

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

Vue事件传参的混合模式

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue事件传参的混合模式</title>
</head>
<body>
<div id="box"><button data-x="10" @click="add(20,$event)">add</button>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",methods: {add(y, e) {alert(y - -e.target.dataset.x)}}})
</script>
</body>
</html>

结果

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

Vue显示与隐藏

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue显示与隐藏</title>
</head>
<body>
<div id="box"><button @click="x = true">显示</button><button @click="x = false">隐藏</button><p>x:{{x}}</p><h1 v-show="x">Hello Vue!</h1>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {x: false},methods: {}})
</script>
</body>
</html>

结果

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

Vue’v-html’和’v-text’

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue'html'与'text'</title>
</head>
<body>
<div id="box"><div v-html="msg"></div><div v-text="msg"></div>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {msg: '<h1>Hello Vue!</h1>'},methods: {}})
</script>
</body>
</html>

结果

Vue’v-once’

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue'v-once'</title>
</head>
<body>
<div id="box"><button @click="num++">+1</button><p>num:{{num}}</p><p v-once>num:{{num}}</p>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {num: 10},methods: {}})
</script>
</body>
</html>

结果

Vue’v-if’

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue'v-if'</title>
</head>
<body>
<div id="box"><p v-if="true">Hello</p><p v-if="false">World!</p><p v-show="false">Vue!</p><hr><button @click="num++">{{num}}</button><p v-if="num % 2 == 1">奇数</p><p v-else>偶数</p><hr><h4>打分:{{score}}</h4><button @click="score += 10">+10</button><p v-if="score < 60">删掉</p><p v-else-if="score < 80">良好</p><p v-else-if="score < 100">优秀</p><p v-else>超限</p>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {num: 1,score: 0},methods: {}})
</script>
</body>
</html>

结果

Vue’v-for’

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue'v-for'</title>
</head>
<body>
<div id="box"><button v-for="n in names">{{n}}</button><hr><li v-for="s of skills">{{s}}</li><hr><a v-for="w in webs" :href="w.href">{{w.title}}<br></a>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#box",data: {names: ['关羽', '张飞', '刘备'],skills: ['html', 'css', 'javascript'],webs: [{title: '百度', href: 'https://www.baidu.com/'},{title: '斗鱼', href: 'https://www.douyu.com/'},]},methods: {}})
</script>
</body>
</html>

结果

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

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

相关文章

redis 性能优化二

前言 性能优化的第二篇文章&#xff0c;将重点讲一下Redis 的响应延迟&#xff0c;响应延迟如何对redis 进行优化。这个延迟不是说一个命令或者几个命令变慢了&#xff0c;延迟了几秒&#xff0c;就说Redis 变慢了。在不同的软硬件环境下&#xff0c;Redis 本身的绝对性能并不…

[go 面试] 一致性哈希:数据分片与负载均衡的黄金法则

在分布式系统中&#xff0c;一致性哈希&#xff08;Consistent Hashing&#xff09;是一项关键算法&#xff0c;为解决数据分片和负载均衡难题提供了强大的支持。本文将深入研究一致性哈希的核心原理&#xff0c;解析其如何超越传统哈希算法&#xff0c;同时详细探讨一个关键问…

基于STM32开路清障车控制系统设计

目 录 摘 要 I Abstract II 引 言 1 1总体方案论证与设计 3 1.1设计方案 3 1.2主控模块的选型和论证 3 2系统硬件电路设计 5 2.1主控模块设计 5 2.1.1 STM32单片机概述 5 2.1.2 STM32单片机最小系统电路 5 2.2 MCU主要实现功能 6 2.3火焰传感器 7 2.4超声波模块 8 2.5驱动模块…

Docker-自定义镜像

目录 1 前言 2 构建java应用的步骤及镜像结构图 2.1 构建步骤 2.2 镜像结构图 3 Dockerfile常用指令 4 Dockerfile的内容举例 4.1 一般形式 4.2 一般形式的优化 5 构建镜像 5.1 指令 5.2 实操 5.2.1 加载jdk镜像(基础镜像) 5.2.2 构建我们的镜像 5.2.3 使用我们的…

SpringCloud微服务-RabbitMQ快速入门

文章目录 RabbitMQ快速入门1、什么是MQ&#xff1f;2、RabbitMQ概述3、RabbitMQ的结构和概念4、常见消息模型5、HelloWorld RabbitMQ快速入门 1、什么是MQ&#xff1f; MQ &#xff08;MessageQueue&#xff09;&#xff0c;中文是消息队列&#xff0c;字面来看就是存放消息的…

Linux nmcli命令使用教程(nmcli指令)

文章目录 先区分两个概念&#xff1a;网络设备和网络连接网络设备网络连接网络连接的UUID nmcli可以为一个网络设备创建多个网络连接&#xff0c;但同一时刻只有一个能生效 Mastering Network Management with nmcli in Linux&#xff08;掌握Linux中使用nmcli进行网络管理&…

掌握 Vue3、Vite 和 SCSS 实现一键换肤的魔法步骤

前言 一个网站的换肤效果算是一个比较常见的功能&#xff0c;尤其是在后台管理系统中&#xff0c;我们几乎都能看到他的身影&#xff0c;这里给大家提供一个实现思路。 搭建项目 vitevue3搭建项目这里就不演示了&#xff0c;vite官网里面讲得很清楚。 注&#xff1a;这里使…

解决跨域问题的FastAPI应用及常见报错解析

介绍&#xff1a; 跨域问题在前后端分离的Web应用中经常会遇到。FastAPI作为一个快速、现代化的Python Web框架&#xff0c;在处理跨域问题上也提供了一些解决方案。本文将介绍如何使用FastAPI来解决跨域问题&#xff0c;并分析一些常见的报错及解决方法。 正文&#xff1a; …

【Java项目介绍和界面搭建】拼图小游戏——作弊码、查看完整图片

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

实现qq音乐歌词滚动效果

闲来无事&#xff0c;听音乐的时候&#xff0c;突发奇想 实现该效果中&#xff0c;包含了根据声音高低生成音波的功能&#xff0c;有兴趣的直接下载代码即可 这是启动后的效果。

泛微OA本地部署项目

泛微OA本地部署 本文演示脱离公司服务器&#xff0c;在本地搭建泛微 OA。 本次演示的版本如下&#xff1a; ecology&#xff1a;e-9sql server 版本&#xff1a;2012jdk 版本&#xff1a;1.8 一、安装 VmWare、Centos 7 对于 VmWare、Centos 7的安装&#xff0c;此处不再一一…

力扣515. 在每个树行中找最大值(BFS,DFS)

Problem: 515. 在每个树行中找最大值 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1&#xff1a;BFS 套用BFS模板&#xff0c;直接在遍历树的某一层时将当前层的最大值存入数组中 思路2&#xff1a;DFS 回溯思想&#xff0c;在递归时不断更新可选列表&#xff08;根据…

前端每日一练:三栏布局,包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。

介绍 在网页开发中&#xff0c;三栏布局是一种常见的结构&#xff0c;通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。本文将介绍使用不同的布局方式实现三栏布局&#xff0c;包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。 …

计算机组成原理面试题

计算机组成原理是计算机科学的基础课程之一&#xff0c;涉及计算机系统的基本结构和工作原理。以下是一些可能出现在面试中的计算机组成原理相关题目&#xff1a; 1. **什么是冯诺依曼体系结构&#xff1f;** - 冯诺依曼体系结构是一种计算机组织架构&#xff0c;它将程序指…

【Flink网络数据传输(3)】RecordWriter的能力:实现数据分发策略或广播到下游InputChannel

文章目录 一.创建RecordWriter实例都做了啥1. 根据recordWrites数量创建不同的代理类2. 创建RecordWriters3. 单个RecordWriter的创建细节 二. RecordWriter包含的主要组件1. RecordWriter两种实现类分别实现分发策略和广播2. ChannelSelectorRecordWriter的发送策略2.1. Chann…

ArmSoM规划开发基于RK3576的开发套件

ArmSoM正计划推出一款新的产品&#xff0c;这款产品将采用强大的RK3576芯片。 本文将为您介绍我们的新产品搭载的RK3576性能参数&#xff0c;以及它如何为您提供卓越的性能和功能。 RK3576处理器 RK3576处理器是一款强大的处理器&#xff0c;具备出色的性能和多样化的功能&a…

8、Linux-软件安装:rpm和yum;配置yum阿里云镜像源

一、介绍 Linux安装软件有两种方式&#xff0c; ①rpm&#xff1a;安装已有的安装包&#xff0c;类似于Windows中双击exe的安装包程序 ②yum&#xff1a;拉取远程仓库的文件&#xff0c;类似于python的pip install 区别&#xff1a;假设软件A依赖软件B&#xff0c;软件B依赖…

速盾网络:cdn加速技术和云计算的区别

CDN加速技术和云计算是两种不同的技术&#xff0c;虽然都与网络性能和可扩展性有关&#xff0c;但它们在功能和应用方面存在一些不同之处。 首先&#xff0c;CDN加速技术&#xff08;Content Delivery Network&#xff09;是一种通过将网站内容分布到全球各地的服务器上&#…

【C++庖丁解牛】C++内存管理 | new和delete的使用以及使用原理

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1. C/C内存分布2. C语…

【C语言】走迷宫之推箱子

前言&#xff1a; 在上一篇文章当中我介绍了一个走迷宫的写法&#xff0c;但是那个迷宫没什么可玩性和趣味性&#xff0c;所以我打算在迷宫的基础上加上一个推箱子&#xff0c;使之有更好的操作空间&#xff0c;从而增强了游戏的可玩性和趣味性。 1. 打印菜单 void menu() {…