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

在我们还没接触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.hqwc.cn/news/157278.html

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

相关文章

Node.js基础-三大模块

文章目录 一、概念对比作用总结 二、fs文件模块三、path路径模块四、http模块服务器相关概念IP地址域名和域名服务器端口号 创建基本的web服务器基本步骤req请求对象res响应对象根据不同的url响应不同的html内容 总结 一、概念 借助浏览器引擎&#xff08;提供BOM&#xff0c;…

【机器学习】一、机器学习概述与模型的评估、选择

机器学习简介 由来 阿瑟.萨缪尔Arthur Samuel,1952年研制了一个具有自学习能力的西洋跳棋程序&#xff0c;1956年应约翰.麦卡锡John McCarthy&#xff08;人工智能之父&#xff09;之邀&#xff0c;在标志着人工智能学科诞生的达特茅斯会议上介绍这项工作。他发明了“机器学习…

系列十五、idea全局配置

一、全局Maven配置 IDEA启动页面>Customize>All settings>Build,Execution,Deployment>Build Tools>Maven 二、全局编码配置 IDEA启动页面>Customize>All settings>Editor>File Encodings 三、全局激活DevTools配置 IDEA启动页面>Customize>A…

python连接clickhouse (CK)

Author: tkhywang 2810248865qq.com Date: 2023-11-01 11:28:58 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-11-01 11:36:25 FilePath: \PythonProject02\Python读取clickhouse2 数据库数据.py Description: 这是默认设置,请设置customMade, 打开koroFileHead…

61. 旋转链表、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;李歘歘的博客 &#x1f3c6; &#x1f33a;每天不定期分享一些包括但不限于计算机基础、算法、后端开发相关的知识点&#xff0c;以及职场小菜鸡的生活。&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&am…

Android开发知识学习——Kotlin进阶

文章目录 次级构造主构造器init 代码块构造属性data class相等性解构Elvis 操作符when 操作符operatorLambdainfix 函数嵌套函数注解使用处目标函数简化函数参数默认值扩展函数类型内联函数部分禁用用内联具体化的类型参数抽象属性委托属性委托类委托 Kotlin 标准函数课后题 次…

JavaWeb 怎么在servlet向页面输出Html元素?

service()方法里面的方法体&#xff1a; resp.setContentType("text/html;charsetutf-8");//获得输出流PrintWriter对象PrintWriter outresp.getWriter();out.println("<html>");out.println("<head><title>a servlet</title>…

EASYX实现多物体运动

eg1:单个物体运动使用easyx实现单个小球的运动 #include <stdio.h> #include <easyx.h> #include <iostream> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h> #define PI 3.14 #define NODE_WIDTH 4…

vs2013/2015/2019扩展-联机提示“未能建立到服务器的连接“/“基础连接已经关闭: 发送时发生错误“/“远程主机强迫关闭了一个现有的连接“

VS2013\VS2015 输入命令 [Net.ServicePointManager]::SecurityProtocol[Net.ServicePointManager]::SecurityProtocol-bOR [Net.SecurityProtocolType]::Tls12 采用上述方法偶尔可以有效&#xff0c;重新启动VS就没用了 VS2019 怎么样都不行 最终解决办法&#xff1a;换一…

React native window工程在macbook中打包运行环境搭建实录

做了个安卓的app&#xff0c;打算试试打包ios。但是mac中遇到许多挑战。在这记录下。 刚开始就是按照文档的操作的&#xff0c; 实际上这里Watchman 不是必须的&#xff0c; 这是监听文件变化然后自动同步更新模拟器效果的&#xff0c;完全可以修改后自己重新打包看效果&#…

(01)Mycat说明与介绍

1、Mycat是什么 Mycat是一个数据库中间件&#xff0c;前身是阿里的cobar。 2、Mycat可以用来做什么 1.读写分离 2.数据分片 &#xff08;1&#xff09;垂直拆分 &#xff08;2&#xff09;水平拆分 &#xff08;3&#xff09;垂直水平拆分 3.多数据源整合 3、Mycat实现的…

2、NLP文本预处理技术:词干提取和词形还原

一、说明 在上一篇文章中&#xff0c;我们解释了文本预处理的重要性&#xff0c;并解释了一些文本预处理技术。在本文中&#xff0c;我们将介绍词干提取和词形还原主题。 词干提取和词形还原是两种文本预处理技术&#xff0c;用于将单词还原为其基本形式或词根形式。这些技术的…