原生JS和VUE实现HelloWorld的输出和延时更改

最新推荐文章于 2023-06-05 16:07:48 发布

郝拾柒

最新推荐文章于 2023-06-05 16:07:48 发布

阅读量209

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/CrownNew/article/details/104239988

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用原生JavaScript和Vue.js分别实现HelloWorld的输出，并展示了如何使用JS计时器动态更改div内容。通过对比，强调Vue.js通过数据驱动的方式简化了DOM操作。

摘要由CSDN通过智能技术生成

首先我们来用原生JS实现HelloWorld

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWorld</title>
    </head>
    <body>
        <div id = "app"></div>         
        <script>
            //原生JS写法
             var dom = document.getElementById('app');
             dom.innerHTML = 'HelloWorld'
        </script>
    </body>
</html>

下面看用VUE实现HelloWorld

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWorld</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id = "app">{{content}}</div>           //插值表达式调用content里边的数据
        <script>
            //VUE写法
            var app = new Vue({         //创建一个VUE实例
                el:'#app',              //el限制该实例负责管理的区域    
                data:{                  //data负责定义一些数据
                    content:'HelloWorld'
                }
            })
        </script>
    </body>
</html>

用JS计时器更改div内的值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWorld</title>
    </head>
    <body>
        <div id = "app"></div>          
        <script>
            //原生JS写法
             var dom = document.getElementById('app');
             dom.innerHTML = 'HelloWorld'
			//用JS计时器更改div内的值
             setTimeout(function() {			
                 dom.innerHTML = 'ByeWorld'
             },2000)

        </script>
    </body>
</html>

而用VUE写法如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWorld</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id = "app">{{content}}</div>          
        <script>

            //VUE写法
            var app = new Vue({         //创建一个VUE实例
                el:'#app',              //el限制该实例负责管理的区域    
                data:{                  //data负责定义一些数据
                    content:'HelloWorld'
                }
            })
            
            setTimeout(function(){
                app.$data.content = 'ByeWorld'
            },2000)
        </script>
    </body>
</html>

两种方法都实现了同样的功能，但是VUE只是简单的改变了content内的数据值，而并没有像JS那样对dom进行操作。

郝拾柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS和VUE实现HelloWorld的输出和延时更改

首先我们来用原生JS实现HelloWorld<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> </head> <body&g...
复制链接

扫一扫

专栏目录