Vue入门 Demo1

Vue入门 Demo1

  1. 在页面输出"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>
发布了33 篇原创文章 · 获赞 2 · 访问量 4723

猜你喜欢

转载自blog.csdn.net/qq_36778310/article/details/104633748