目录
- 一、利用Vue编写一个“Hello World”的定时更新
- （1）vue编码在Html文件中
- （2）vue编码在js文件中
- 二、利用javascript编写一个“Hello World”的定时更新
一、利用Vue编写一个“Hello World”的定时更新
（1）vue编码在Html文件中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 以cdn的方式引入开发版本的vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body><!-- 创建一个id为App的div标签 --><div id="app"><!-- 插值表达式{{}}用来输出Vue对象中的content的值。 -->{{content}}</div> <script>javascript">// 在script标签内创建Vue实例对象，设置该对象下的俩属性：el和datavar app = new Vue({ // el属性（挂载元素）用于将vue实例绑定到id为app的dom中el:'#app', // data属性（数据）用于数据存储data:{ content:"Hello world!" }})// 使用vue的话，不需要再考虑DOM上的操作了，而是把精力集中到数据的管理上setTimeout(function(){app.$data.content = 'new Hello world'},2000)</script>
</body>
</html>
代码执行结果如下：
（2）vue编码在js文件中
1、创建一个Html文件
<html>
<head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>{{message}}</h1></div><script src="main.js"></script>
</body>
</html>
2、创建一个main.js文件
javascript">var app = new Vue({el: '#app',data: {message: "Hello world!"}
})setTimeout(function () {app.$data.message = 'new Hello world'
}, 2000)
代码执行结果如下：
javascriptHello_World_72">二、利用javascript编写一个“Hello World”的定时更新
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script>javascript">var dom = document.getElementById('app');dom.innerHTML = 'hello world';// 让div中的数据，两秒后更换一次setTimeout(function(){dom.innerHTML = "new Hello world";},2000)</script>
</body>
</html>
代码执行结果如下：
