Vue.js最简单的代码

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>vue.js的入门</title>


 <!-- 导入 -->

 <script type="text/javascript" src="../jss/vue.js"></script>

 <script type="text/javascript">


  <!-- 单一入口 -->

  window.onload = function(){    var app = new Vue({


    // el属性用来绑定元素节点

    el:"#app",


    // data属性用来绑定数据

    data:{

     message:"Hello World"

    }

   });
   // 建立vue对象

   var app2 = new Vue({     el:"#app2",     data:{      message:"页面加载中"+new Date().toLocaleString+"今天心情真好!"

    }

   });   }

 </script>  

</head>

<body>

<div id="app">


 <!-- vue的模板语法,用来输出变量 -->

 {{message}}

</div>  <div id="app2">


 <!-- 把title属性和messa变量联系起来 -->

 <span v-bind:title="message">

  请让鼠标悬停几秒钟,来观看这个页面刷新的时间

 </span>

</div>
<!-- 将tilte写“死” -->

 <a href="#" title="这是一个空链接">点击我</a> </body>

</html>

相关文章