1 第一个vue程序

news2024/11/24 14:43:39

复习次数 :✔

1.1 vue优势

1.2 vue环境

        直接在idea的插件搜vue.js,然后下载。

        接着创建一个空项目,并添加模块。然后,创建一个html文件。

1.3 vue例子

        完整的html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层-->
    <h1 id="bottom-h">
        {{message2}}
    </h1>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> <!--CDN,视图层和数据层的中间件-->

    <script>
        var vm = new Vue({
            el: "#bottom-h", /*绑定id*/
            /*model层*/
            data: {
                message :"hello!",
                message2:"nihao!"
            }
        });
    </script>
</body>
</html>

        运行结果如下:

1.4 注意点

            其中,使用CDN来安装和管理vue的依赖:

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

        注意点:

        1.创建Vue对象:var vm = new Vue(); 其中,Vue的V是大写的,然后在小括号里面写花括号;

        2.花括号里有el和data属性;

        3.el用来绑定id,"#id名";

        4.data用来存储数据,作为model层,格式是:data:{key = "xxx"},如果存在两个key,用逗号隔开;

        5.el和data用逗号隔开;

        6.在视图层(view层)用{{key}}来接收数据;

1.5 通过网页,不刷新改变视图层的值

        打开网页,点击console:

         输入vm.key名 = "修改的内容",然后回车,即可改变视图层的数据:

         这里的key是message。

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

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

相关文章

Linux Day01

目录 一、Linux终端介绍 二、Linux目录介绍 1.目录结构 2.常见目录说明 3.绝对路径与相对路径 4.家目录 一、Linux终端介绍 二、Linux目录介绍 Linux目录&#xff1a;是从根目录"/"开始的 是一棵倒着的树 1.目录结构 2.常见目录说明 目前记住 bin 存放常用命…

网络安全领域关键信息泄露事件引发关注

近日&#xff0c;一家知名网络安全公司发布了一份报告揭露了一起重大信息泄露事件。据称&#xff0c;该事件涉及大量敏感用户数据的泄露引发了全球网络安全领域的广泛关注。 根据报道&#xff0c;该事件发生在全球范围内涉及多个国家和组织。专家指出&#xff0c;此次泄露事件…

ESP-C2模组实现透传示例说明

WIFI-TTL透传模块说明 V 1.0 2022-11-24 1 简介 WiFi-TTL透传模块基于我司DT-ESPC2-12模块研发&#xff0c;引出串口TTL、EN、STATE 等引脚。产品内置我司最新版本的串口透传固件可完成设备TTL 端口到WiFi/云的数据实时透传。本模块可直接取代原有的有线串口&#xff0c;实现…

java注解和自定义注解

目录 一、注解的概念 二、注解的类型 2.1、内置注解 2.2、元注解 2.2.1、各个元注解的作用 2.3、自定义注解 2.4、自定义注解实现及测试 一、注解的概念 1、注解的作用 ①&#xff1a;注解一般用于对程序的说明&#xff0c;就像注释一样&#xff0c;但是区别是注释是给…

出现了HTTPSConnectionPool(host=‘huggingface.co‘, port=443)错误的解决方法

在下载huggingface 模型的时候&#xff0c;经常会出现这个错误&#xff0c;HTTPSConnectionPool(host‘huggingface.co’, port443)&#xff0c;即使你已经有了正确的上网姿势。 如在下载Tokenizer的时候&#xff0c;就会出现&#xff1a; tokenizer AutoTokenizer.from_pre…

权智A133P 安卓10移植SPI转串WK2124驱动

硬件连接示意图 主控CPU通过SPI总线与WK2XXX芯相连接。WK2XXX控制4个UART的数据收发。 其中重要的参数有CS片选线和IRQ中断引脚。 LInux串口驱动框架 当WK2XXX驱动在内核注册成功后&#xff0c;会在/dev目录下面生成ttysWK0,ttysWK1,ttysWK2,ttysWK3节点。上层通过open,read,w…

pytest 第三方插件

目录 前言&#xff1a; 顺序执行&#xff1a;pytest-ordering 失败重试&#xff1a;pytest-rerunfailures 并行执行&#xff1a;pytest-xdist 前言&#xff1a; pytest 是一个广泛使用的 Python 测试框架。它具有强大的测试运行器、测试驱动开发和测试结果可视化等功能。除…

《面试1v1》如何能从Kafka得到准确的信息

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

对高校数字化转型的思考

数字新技术与国民经济各产业的融合深化&#xff0c;使行业产业数字化、网络化、全球化、知识化、智能化趋势愈发显著&#xff0c;深刻改变着人的职业生涯、现代社会对人才的需求和新型就业形式&#xff0c;引发教育资源、形态和范式的深刻变革。数字化转型对于提高学校管理效率…

Redis简介、常用命令

目录 一、​​关系数据库​​与非关系型数据库概述 1.1 关系型数据库 1.2 非关系型数据库 二、关系数据库与非关系型数据库区别 2.1 数据存储方式不同 2.2 扩展方式不同 2.3 对事务性的支持不同 三、非关系型数据库产生背景 四、Redis简介 4.1 Redis的单线程模式 4.…

Linux系列---【Ubuntu 20.04安装KVM】

Ubuntu 20.04安装KVM 一、安装kvm 1.安装kvm sudo apt install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils 2. 将当前用户添加至libvirt 、 kvm组 sudo adduser $USER libvirt sudo adduser $USER kvm 3.验证安装 virsh list --all 4.启动libvert sudo syst…

Jmeter 压测实战:Jmeter 二次开发之自定义函数

目录 1 前言 2 开发准备 3 自定义函数核心实现 3.1 新建项目 3.2 继承实现 AbstractFunction 类 3.3 最终项目结构 4 Jmeter 加载扩展包 4.1 maven 构建配置 4.2 项目打包 4.3 Jmeter 加载扩展包 5 自定义函数调用调试 5.1 打开 Jmeter 函数助手&#xff0c;选择自…

0基础学习VR全景平台篇 第70篇:VR直播-如何设置付费观看、试看

对于拥有优质内容的VR直播&#xff0c;可以通过付费观看的方式进行内容变现&#xff0c;是当下非常流行的商业模式。 付费价格&#xff1e;0时便会自动弹出“试看时间”的设置项。试看时间&#xff1d;0秒时&#xff0c;用户进入直播间需要先付费才可观看&#xff1b;试看时间&…

【JVM】详解JVM的五大内存模型、可能出现的异常以及堆栈引用易错点

文章目录 1、堆(线程共享)2、方法区(线程共享)3、虚拟机栈&#xff08;线程私有&#xff09;4、本地方法栈(线程私有)5、程序计数器(线程私有)6、易错点 源自&#xff1a;深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践&#xff08;第3版&#xff09; 周志明 1、堆(线程…

Docker 镜像构建 搭建分布式LNMP论坛 实践

地址规划 nginx 172.18.0.10 mysql 172.18.0.20 php 172.18.0.30 宿主机准备 拉取镜像&#xff0c;下面以此镜像为基础 docker pull centos:7 创建自定义网段以便指定 IP 不变动 docker network create --subnet172.18.0.0/16 --opt "com.docker.network.bridge.na…

【计算机网络】计算机网络基础知识总结(秋招篇)

文章目录 前言计算机网络笔记TCP和UDP分别是什么 有什么区别基于TCP UDP这两个协议的上层协议有哪些&#xff1f;TCP和UDP分别在哪些领域被用的多&#xff1f;TCP实现可靠性传输用了哪些技术&#xff1f;&#xff08;TCP如何实现可靠性传输&#xff09;讲一下超时重传和超时定时…

T3/A40i支持Linux-5.10新内核啦,Docker、Qt、Python统统升级!

自2021年创龙科技推出全志国产化率100%的T3/A40i工业核心板后&#xff0c;不到两年时间已超过800家工业客户选择创龙科技T3/A40i平台。随着客户产品的不断升级与迭代&#xff0c;部分“能源电力”、“工业自动化”行业客户对T3/A40i的Linux版本提出了更高要求&#xff0c;主要涉…

Jmeter查看结果树之查看响应的13种详解方法

Jmeter查看结果树查看响应有哪几种方法&#xff0c;可通过左侧面板底部的下拉框选择: 01 Text 查看结果树中请求的默认格式为Text&#xff0c;显示取样器结果、请求、响应数据3个部分内容。 取样器结果&#xff1a; 默认Raw展示&#xff0c;可以切换为Parsed视图&#xff0c…

用i18next使你的应用国际化-Next.js(App router)

安装插件 npm install i18next react-i18next i18next-resources-to-backend1. 目录结构 . └── app└── [lng]├── second-page| └── page.js├── layout.js└── page.jsapp/[lng]/page.js文件&#xff1a; import Link from next/linkexport default funct…

新增WebDB和ChatGPT组件,支持对ChatGPT资产进行纳管,JumpServer堡垒机v3.5.0发布

2023年7月24日&#xff0c;JumpServer开源堡垒机正式发布v3.5.0版本。在这一版本中&#xff0c;新生代数据库连接组件——问题终结者Chen强势来袭&#xff0c;替代原有的OmniDB组件&#xff0c;在兼容旧版本的同时&#xff0c;解决了旧组件性能不足的问题&#xff0c;为用户提供…