Vue起步_hello world

打开vscode编辑器，创建index.html文件，编辑：

原始hello world：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'hello world'
    </script>
</body>

</html>

打开扩展工具：

安装view in brower,然后在index.html上右键就会出现View in Browser选项

通过vue实现 hello world:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- <script src="/assets/js/vue.js"></script> -->
    <script src="E:\Code\Vue\assets\js\vue.js"></script>
</head>

<body>
    <div id="app">{{content}}</div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: 'Hello World'
            }
        })
    </script>
</body>
</html>

创建Vue实例，el表示实例负责管理的一个区域，#app指的是id等于app的div标签。

{{}} 插值表达式

data定义数据

添加div：

 
  < 
  div 
  >{{content}} 
  </ 
  div 
  > 
 

Vue实例只接管了app这个dom标签下的content

实现隔两秒钟改变Hello World内容：

 
   < 
   script 
   > 
  
   var 
   app = 
   new 
   Vue({ 
  
   el: 
   '#app', 
  
   data: { 
  
   content: 
   'Hello World' 
  
    } 
  
    }) 
  
   setTimeout( 
   function () { 
  
   app. 
   $data. 
   content = 
   'byte world' 
  
    }, 
   2000) 
  
   < 
   / 
   script 
   >

猜你喜欢