当前位置:首页 > 前端 > 正文

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>

上一篇
js匿名函数封装

下一篇
curl访问