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

news2025/1/18 6:22:52

【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.innerHTML
                this.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.coloradmin.cn/o/1496522.html

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

相关文章

python转换json

python转换json

import json import os from enum import Enumclass LaneDirectionType(int, Enum):LaneDirectionType_Unknown -1 # 类型未知OneWay 1 # 单向TwoWay 2 # 双向# 颜色类型 class ColorCombo(int, Enum):NOUSE 0 # 默认值UNKNOWN 1000 # 未定义WHITE 1 # 白色(默认值…
阅读更多...
【YOLO v5 v7 v8 v9小目标改进】辅助超推理SAHI：分而治之，解决高分辨率图像中小物体检测的问题

【YOLO v5 v7 v8 v9小目标改进】辅助超推理SAHI：分而治之，解决高分辨率图像中小物体检测的问题

辅助超推理SAHI&#xff1a;分而治之&#xff0c;解决高分辨率图像中小物体检测的问题 设计思路结构小目标涨点YOLO v5 魔改YOLO v7 魔改YOLO v8 魔改YOLO v9 魔改 论文&#xff1a;https://arxiv.org/pdf/2202.06934.pdf 代码&#xff1a;https://github.com/obss/sahi 设计思…
阅读更多...
造极宋韵：大麗和和全新城市系列

造极宋韵：大麗和和全新城市系列

中国美学,造极于宋。杭州,一座生活在宋画里的城市,一座繁华与优雅交织的华贵天城。 钱塘自古繁华,温润华贵的丝绸与漆器,诉说这座城市底蕴深藏的华贵;湖上雨霁,山水涳濛,油纸伞与石拱桥,描绘杭州空灵雅逸的自然山水;比德于玉,谦和含章,玉琮与礼玉文化,象征玉成和合的城市气质。…
阅读更多...
管理类联考--复试--面试问题--底层逻辑

管理类联考--复试--面试问题--底层逻辑

文章目录 了解面试官提问问题的背后逻辑&#xff0c;在面试时遇到&#xff0c;即使不懂&#xff0c;也能往边边靠近哈一句顶一万句自我介绍 了解面试官提问问题的背后逻辑&#xff0c;在面试时遇到&#xff0c;即使不懂&#xff0c;也能往边边靠近哈 “你最有挑战性的事是啥”…
阅读更多...
开源工业软件：SCADA系统开源

开源工业软件：SCADA系统开源

PyScada是一个开源的scada系统 源代码地址 http://www.gitpp.com/huangtomy/pyscada-cn SCADA系统是Supervisory Control And Data Acquisition的缩写&#xff0c;即数据采集与监视控制系统。它是以计算机为基础的DCS与电力自动化监控系统&#xff0c;应用领域非常广&#x…
阅读更多...
nginx代理参数proxy_pass

nginx代理参数proxy_pass

proxy_pass参数用于配置反向代理&#xff0c;指定客户端请求被转发到后端服务器&#xff0c;后端地址可以是域名、ip端口URI 代理后端报错提示本地找不到CSS文件、JavaScript文件或图片 例如&#xff1a; nginx &#xff1a;10.1.74.109 后端服务&#xff1a;http://10.1.74.…
阅读更多...
Github 2024-03-07 开源项目日报Top10

Github 2024-03-07 开源项目日报Top10

根据Github Trendings的统计，今日(2024-03-07统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目4C++项目3C#项目1TypeScript项目1非开发语言项目1HTML项目1CSS项目1屏幕截图转代码应用 创建周期：114 天开发语言：TypeScript, Pyt…
阅读更多...
vscode中eslint插件不生效问题

vscode中eslint插件不生效问题

case: 最近使用webpack打包js资源中使用到了VS Code中的eslint插件辅助eslint plugin对代码进行校验&#xff0c;在.eslintrc.js文件中以及webpack.config.js配置好后&#xff0c; 在控制台运行npx webpack可以读取到eslint plugin的检测结果 一、eslint插件读取项目中.eslint…
阅读更多...
下载无水印抖音视频

下载无水印抖音视频

在抖音看到某些视频想下载&#xff0c;却出现无法保存在本地【显示"作品暂时无法保存,链接已复制"】。或者下载的视频有水印。 而某些微信小程序下载可能需要付费或者有水印。其实我们可以直接使用电脑浏览器直接下载。 举个例子: 这是来自王道官方账号的一条视频链…
阅读更多...
小程序环形进度条爬坑

小程序环形进度条爬坑

在做微信小程序的时候&#xff0c;发现用canvas做的环形进度条&#xff0c;在带滚动条的view里面显示有闪动、显示不全的问题&#xff0c;后面改成echart-weixin的pie图实现了&#xff0c;option配置如下 // 表示进度的百分比 var progressValue 70;option {series: [{type: …
阅读更多...
回归预测 | Matlab实现BiTCN-BiGRU-Attention双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

回归预测 | Matlab实现BiTCN-BiGRU-Attention双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

回归预测 | Matlab实现BiTCN-BiGRU-Attention双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 回归预测 | Matlab实现BiTCN-BiGRU-Attention双向时间卷积双向门控循环单元融合注意力机制多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.M…
阅读更多...
Sqoop “hcatalog does not exist!” 提示信息消除方法

Sqoop “hcatalog does not exist!” 提示信息消除方法

sqoop运行的时候老是有这个报错提示&#xff0c;看着可烦&#xff0c;解决消除一下 解决方法&#xff1a; 1、在$SQOOP_HOME/bin目录下面修改configure-sqoop文件 1&#xff09;进文件夹 cd /training/sqoop-1.4.7/bin2&#xff09;编辑文件 vi /configure-sqoop3&#xff…
阅读更多...
区块链媒体套餐：精益求精链游媒体宣发推广7个关键细节分享-华媒舍

区块链媒体套餐：精益求精链游媒体宣发推广7个关键细节分享-华媒舍

在如今竞争激烈的游戏行业&#xff0c;一款优秀的游戏缺乏有效的宣发推广&#xff0c;很难脱颖而出。而随着区块链技术的兴起&#xff0c;链游媒体的宣发推广成为游戏开发者和运营商的重要选择之一。本文将为大家介绍精益求精的链游媒体宣发推广的七个关键细节。 1. 定位目标受…
阅读更多...
openGauss基于存储复制的资源池化安装部署流程

openGauss基于存储复制的资源池化安装部署流程

第一步&#xff1a;在主存储上创建资源池化需要的lun&#xff0c;以及远程同步复制xlog卷对应的lun&#xff0c;并且所有lun全部映射到业务计算节点上 1. 登录主集群DeviceManager&#xff0c;选择服务->LUN组->创建 来创建主集群LUN组&#xff1b; 2.登录主集群Device…
阅读更多...
通过docker安装Mongodb

通过docker安装Mongodb

通过Docker安装MongoDB非常简单和方便&#xff0c;以下是基本步骤&#xff1a; 拉取MongoDB镜像&#xff1a; 首先确保你已经在本地机器上安装了Docker。然后&#xff0c;在命令行中执行以下命令来从Docker Hub下载官方的MongoDB镜像&#xff08;这里以最新版本为例&#xff09…
阅读更多...
【洛谷 P8748】[蓝桥杯 2021 省 B] 时间显示 题解（数学+模运算+输入输出）

【洛谷 P8748】[蓝桥杯 2021 省 B] 时间显示 题解（数学+模运算+输入输出）

[蓝桥杯 2021 省 B] 时间显示 题目描述 小蓝要和朋友合作开发一个时间显示的网站。在服务器上&#xff0c;朋友已经获取了当前的时间&#xff0c;用一个整数表示&#xff0c;值为从 1970 年 1 月 1 日 00:00:00 到当前时刻经过的毫秒数。 现在&#xff0c;小蓝要在客户端显示…
阅读更多...
Transformer中的位置编码

Transformer中的位置编码

在Transformer模型中&#xff0c;位置编码是一种特殊的编码方式&#xff0c;用于向模型提供关于输入序列中单词位置的信息。由于Transformer模型没有循环结构&#xff0c;无法像循环神经网络那样从输入序列中推断单词的位置顺序&#xff0c;因此需要引入位置编码来帮助模型理解…
阅读更多...
window环境下使用k8s部署.net core项目

window环境下使用k8s部署.net core项目

前提&#xff1a;已经部署镜像到Docker 在项目发布目录下新建.yaml文件&#xff0c;内容如下&#xff08;以下仅举例出两种方式内容&#xff0c;可按需自由配置&#xff09; --方式一(创建deployment 、服务、指定命名空间) # ------------------- 注意层级结构&#xff0c;…
阅读更多...
多线程系列(十五) -常用并发工具类详解

多线程系列(十五) -常用并发工具类详解

一、摘要 在前几篇文章中&#xff0c;我们讲到了线程、线程池、BlockingQueue 等核心组件&#xff0c;其实 JDK 给开发者还提供了比synchronized更加高级的线程同步组件&#xff0c;比如 CountDownLatch、CyclicBarrier、Semaphore、Exchanger 等并发工具类。 下面我们一起来…
阅读更多...
嵌入式工程师必备知识点

嵌入式工程师必备知识点

嵌入式工程师必备知识点 一、基础知识与理论二、编程语言与工具三、嵌入式操作系统四、通信协议与接口技术五、设计与测试 嵌入式工程师作为现代电子工程领域的核心角色&#xff0c;其职责涵盖了从硬件设计、软件开发到系统测试等多个方面。为了胜任这一职位&#xff0c;嵌入式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023