当前位置：首页 > article >正文

利用Vue和javascript分别编写一个“Hello World”的定时更新

article 2025/2/4 21:18:38

一、利用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>
        // 在script标签内创建Vue实例对象，设置该对象下的俩属性：el和data
        var 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文件

var app = new Vue({
    el: '#app',
    data: {
        message: "Hello world!"
    }
})

setTimeout(function () {
    app.$data.message = 'new Hello world'
}, 2000)

代码执行结果如下：
在这里插入图片描述

二、利用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>
        var dom = document.getElementById('app');
        dom.innerHTML = 'hello world';

        // 让div中的数据，两秒后更换一次
        setTimeout(function(){
            dom.innerHTML = "new Hello world";
        },2000)
    </script> 
</body>
</html>