初识Vue 输出Hello World 及注意事项

news2024/12/24 7:41:19

在我们还没接触Vue之前,我同学常说我可以直接在元素里输出JS的表达式吗?肯定是不太行。当我们接触vue.js后,这个想法成了现实。
每当我们学习一门新的语言或者框架时,我们都习惯打印一个“hello world”,在我们vue当中,我们如何打印,或使用呢?接下来让我为大家介绍一下吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 我们使用{{}}的形式 -->
    <div class="root">Hello {{name}}</div>
    <!-- 我们发现页面直接输出了 Hello {{name}} 说明Vue实例是一一对应的-->
    <div class="root">Hello {{name}}</div> 
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    new Vue ({ //Vue实例化
        // 注意:需要以对象的形式去使用 记得加逗号
        el:".root", //el代表的是元素,后面跟字符串形式的css选择器
        data:{ //data相当于存储数据的地方 供el所指的容器去使用
            name:"World" //存一个name
        }
    })
</script>
</html>

在这里插入图片描述

注意事项:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为Vue模板
4.Vue实例与容器是一一对应的
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

找到数组中出现一种/两种奇数——异或运算

找到数组中出现一种/两种奇数 题目&#xff1a;一个数组有一种数出现了奇数次&#xff0c;其他数都出现了偶数次&#xff0c;怎么找到并打印这个数&#xff1f; trick 因为异或运算有个特点&#xff0c;满足交换律和结合律&#xff0c;同时有两个重要的特点&#xff1a; n^n…

页面淘汰算法模拟实现与比较

1.实验目标 利用标准C 语言&#xff0c;编程设计与实现最佳淘汰算法、先进先出淘汰算法、最近最久未使用淘汰算法、简单 Clock 淘汰算法及改进型 Clock 淘汰算法&#xff0c;并随机发生页面访问序列开展有关算法的测试及性能比较。 2.算法描述 1. 最佳淘汰算法&#xff08;Op…

Jenkins自动化部署相关shell命令

1. 只后台启动&#xff1a; nohup java -jar jar/demo*.jar & 2. 增加命令启动日志输出位置&#xff0c;防止超时处理配置&#xff1a; nohup java -jar /soft/gitee-demo-0.0.1-SNAPSHOT.jar >mylog.log 2>&1 & 简化写法&#xff1a; nohup java -jar /s…

CTF-RSA加密-1

RSA加密算法 RSA算法的具体描述如下&#xff1a; &#xff08;1&#xff09;任意选取两个不同的大素数p和q计算乘积 n p q npq npq &#xff0c; φ ( n ) ( p − 1 ) ( q − 1 ) φ(n)(p-1)(q-1) φ(n)(p−1)(q−1) &#xff1b; &#xff08;2&#xff09;任意选取一个大…

大数据之LibrA数据库系统告警处理(ALM-12010 Manager主备节点间心跳中断)

告警解释 当主Manager节点在7秒内没有收到备Manager节点的心跳信号时&#xff0c;产生该告警。 当主Manager节点收到备Manager节点的心跳信号后&#xff0c;告警恢复。 告警属性 告警参数 对系统的影响 如果主Manager进程异常&#xff0c;主备倒换无法进行&#xff0c;影响…

云主机VNC报错 fork:cannot allocate memory ,也无法SSH

查找解决办法,发现大部分都是因为现有的进程数超过系统设置最大进程数 开始排查: 1.重启系统然后SSH连接(刚启动进程少是可以连上的),查看系统设置的最大进程数: 1.1 执行以下命令,查看系统 pid_max 值。 sysctl -a | grep pid_max根据返回结果,进行对应操作: 返回…

Linux越学越头疼,我要怎么办?

最近&#xff0c;听到一些同学说&#xff0c;“Linux越学越头疼”。其实这句话&#xff0c;在我之前刚接触Linux的时候&#xff0c;也是深有感触。Linux越学越不明所以。最后干脆放弃学习&#xff0c;转而学习其他东西。 其实大家在初学Linux的时候&#xff0c; 有这个感受&am…

Midjourney prompt 大赏(亲测可用)

AI 绘图是什么 AI 绘画&#xff0c;顾名思义就是利用人工智能进行绘画&#xff0c;是人工智能生成内容&#xff08;AIGC&#xff09;的一个应用场景。其主要原理简单来说就是收集大量已有作品数据&#xff0c;通过算法对它们进行解析&#xff0c;最后再生成新作品&#xff0c;…

RocketMQ sql92的使用及原理简单分析附源码

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 RocketMQ 版本 5.1.0 RokcetMQ消息过滤 目前官方支持的消息过滤方式主要有两种 tagsql92 我们可以通过查看ExpressionType的源码证明 tag过滤方式是现在最为…

【计算机网络】(谢希仁第八版)第三章课后习题答案

第三章 1.数据链路(即逻辑链路)与链路(即物理链路)有何区别? “电路接通了”与”数据链路接通了”的区别何在? 答&#xff1a;数据链路与链路的区别在于数据链路出链路外&#xff0c;还必须有一些必要的规程来控制数据的传输&#xff0c;因此&#xff0c;数据链路比链路多了…

不要在不使用cvx优化的场合使用log_det,应改为log(det(..)),否者可能会出现奇怪的错误

跑代码的时候遇到的问题 %% 分解为功率和单位模&#xff0c;交替优化功率分量和单位模clc;clear; Nt 8; % 发射天线数目 8 Nr 4; % 接收天线数目 4 Ne 6; % Eve天线数目 6 noisePower 1; SNRTotaldB -5:5:35; %%%%最大发射功率单位dB SNRTotal 10.^(SNRTotaldB./…

运动耳机品牌排行榜前十名,运动耳机品牌有哪些?

​当你在健身房挥汗如雨&#xff0c;或者在户外享受大自然的时候&#xff0c;最想要的是听歌放松心情&#xff0c;而运动耳机就像一个不知疲倦的伙伴&#xff0c;陪着你度过每一刻。它的稳定性和舒适性在最大程度上保证了你可以专注于你的运动&#xff0c;而不用分心于耳机的位…

基于springboot实现原创歌曲分享平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现原创歌曲分享平台演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理平台应运而生&am…

创建ABAP数据库表和ABAP字典对象-理解表字段02

理解表字段 这一步&#xff0c;您将定义表字段。首先&#xff0c;你需要了解你的需求: 内置的ABAP类型和新定义的字段类型 下面我们将会创建3个字段类型在数据库表中。 ●内置字段类型&#xff1a;最快的方法:应用系统已经提供好的字段类型&#xff0c;基本类型、长度和描述…

AGENTBENCH:评估LLMs作为代理的能力

背景&#xff1a; 这篇文章介绍了他们是如何去构造智能Agent评测集&#xff0c;以及如何对智能Agent能力做了几大分类。如果你无法评测一个问题&#xff0c;那么往往你也不能很好的解决一个问题。评测集的设计往往是更深入本质&#xff0c;因为评测集测试的是更泛化能力&#…

Find My磁吸卡包|苹果Find My技术与磁吸卡包结合,智能防丢,全球定位

2020年苹果发布会上&#xff0c;磁吸卡包应运而生&#xff0c;磁吸卡包可放入银行卡、交通卡等常规卡片&#xff0c;通过磁力轻松吸附在iPhone或MagSafe磁吸保护壳背后&#xff0c;用户轻装出门携带卡片更方便。 在智能化加持下&#xff0c;磁吸卡包加入防丢功能&#xff0c;…

高速光耦合器TLP2361(TPL,E(T 在工业网络中的应用

TLP2361(TPL,E(T 由一个高输出 GaA ℓAs 发光二极管与集成的高增益、高速光电探测器组成。它采用 SO6 封装。 该光电耦合器可保证在高达 125 C 和 2.7 V 至 5.5 V 电源下运行。由于 TLP2361 已保证 1 mA 低电源电流 (ICCL/ICCH) 和 1.6 mA (Ta 125 C) 低阈值输入电流&#xf…

论坛类型知识问答科普源码系统 带完整搭建教程

在互联网上&#xff0c;用户对于获取各类知识的需求不断增长&#xff0c;尤其是对于一些专业性较强或者较为冷门的知识领域。传统的搜索引擎并不能完全满足用户的需求&#xff0c;因此&#xff0c;开发一款针对特定知识领域的问答系统变得尤为重要。今天源码小编来给大家介绍一…

java修仙传之海岛奇遇

昨日开会&#xff0c; 商量了一下接口返回数据&#xff0c; 要求统一&#xff0c; 之前也同意&#xff0c;直接抛异常&#xff0c; 现在觉得之前那个异常不好&#xff0c; 看着不美观&#xff0c;对客户不友好 要求重新做。 大概要求如下&#xff1a; 要求1&#xff1a;范…

公派访问学者申请应该如何选择国家?

选择国家是公派访问学者申请中至关重要的一步。不同国家拥有各自独特的文化、教育体系和研究环境&#xff0c;因此&#xff0c;选择合适的国家对于一个学者的职业生涯和学术发展至关重要。下面将探讨一些选择国家时需要考虑的因素。 首先&#xff0c;你应该考虑自己的研究领域和…