Vue入门 Demo1

最新推荐文章于 2024-06-28 17:29:09 发布

城南花已开呀

最新推荐文章于 2024-06-28 17:29:09 发布

阅读量120

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104633748

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo1

在页面输出"hello world",并在2秒后变成"bye world";

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

       <script>
           //原生的获取app,赋值hello world
        //    var dom = document.getElementById('app');
        //    dom.innerHTML = 'hello world';


           //使用vue.js赋值 hello world
           //创建vue的实例
           var app = new Vue({
               //配置项
               el: '#app',
               data : {
                   content: 'hello world',
               }
           })

           //2秒钟后content的内容发生改变
           setTimeout(function() {
               app.$data.content = 'bye world';
           }, 2000)
       </script>
    </body> 
</html>

城南花已开呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门 Demo1

Vue入门 Demo1在页面输出"hello world",并在2秒后变成"bye world";<!DOCTYPE html><html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <title>he...
复制链接

扫一扫

专栏目录