Vue.js之HelloWorld

秒速五厘米 2022-07-12 13:44 117阅读 0赞

1、关于Vue.js的一个简单例子

2、DOM里面的代码

<div id="app">{
       {msg}}</div>

3、JavaScript的代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
    
    <script type="text/javascript">
    			window.onload = function() {
    				var vm = new Vue({
    					el: '#app',
    					data: {
    						msg: 'Hello World'
    					}
    
    				});
    			}
    </script>

4、完整页面代码

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
    
    		<script type="text/javascript">
    			window.onload = function() {
    				var vm = new Vue({
    					el: '#app',
    					data: {
    						msg: 'Hello World'
    					}
    
    				});
    			}
    		</script>
    	</head>
    
    	<body>
    		<div id="app">{
       {msg}}</div>
    	</body>
    
    </html>

5、运行结果

![20170224212547251][]

[20170224212547251]: /images/20220710/01909e1f8d0941b49a676454c9273df8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关 C++之HelloWorld

1、控制台输入输出流不同的系统或平台有自己的控制台，输入输出流与具体的平台有关，标准库std里定义了三个流，cout标准输出流，cin标准输入流和cerr标准错误流。 2

不念不忘少年蓝@/ 2022年07月16日 09:08/ 0 赞/ 224 阅读

相关 Dubbo之HelloWorld

生产者的项目结构： ![这里写图片描述][20161006151103729] 消费者的项目结构： ![这里写图片描述][20161006151131186] 生产者项

「爱情、让人受尽委屈。」/ 2022年07月16日 04:51/ 0 赞/ 205 阅读

相关 qml 之 HelloWorld

QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML，一个用

ゞ浴缸里的玫瑰/ 2022年06月02日 04:38/ 0 赞/ 311 阅读

相关 Springboot之HelloWorld

功能：浏览器发送hello请求，服务器接收请求并处理，响应HelloWorld字符串一、创建一个maven工程（jar） ![70][] 创建好的样子 ![70

「爱情、让人受尽委屈。」/ 2022年05月22日 10:19/ 0 赞/ 246 阅读

相关 JAVA之HelloWorld

在任意一级目录下新建一个文本。 ![70][] 将文本的名字修改为HelloWorld.java 拓展名要修改成 java。 ![70 1][] 将下面代码拷贝到Hel

矫情吗；*/ 2022年05月19日 11:15/ 0 赞/ 205 阅读

相关 Akka之HelloWorld

> UntypedActor就是我们所说的Actor，之所以这里强调是无类型的，那是因为在Akka中，还支持一种有类型的Actor。有类型的Actor可以使用系统中的其他类型构

系统管理员/ 2022年05月12日 04:34/ 0 赞/ 261 阅读

相关 egret之HelloWorld

-------------------- 标签: egret，入门什么是Egret？ Egret是一套HTML5游戏开发解决方案，产品包含Egret Engin

红太狼/ 2022年03月02日 11:28/ 0 赞/ 226 阅读

相关 java之HelloWorld

1.创建HelloWorldApp.java文件 2.编写 / 文件名要和类名一致. / public class HelloWorldA

一时失言乱红尘/ 2022年02月23日 01:58/ 0 赞/ 265 阅读

相关 springboot之helloworld

1、简介简化Spring应用的初始搭建以及开发过程。嵌入式的Tomcat，无需部署war文件。对于J2EE的开发提供了一站式的解决方案。 S

￡神魔★判官ぃ/ 2021年12月16日 12:51/ 0 赞/ 415 阅读

相关 Hibernate之HelloWorld

1、新建一个Java Project项目HibernateDay01\_HelloWorld 2、导包：你可以去Hibernate官网www.hiberna

╰半夏微凉°/ 2021年10月06日 13:18/ 0 赞/ 340 阅读