<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active{
color:red;
}
.line{
color:blue;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<img v-bind:src="imgURL" />
<a v-bind:href="aHref">百度一下</a>
<div v-bind:title="title">this a title</div> <!--模板绑定，“v-bind：”可写为“：”-->
<input :placeholder="placeholder" v-model="content"/> <!--双向数据绑定-->
<div >{{content}}</div>
<h2 v-bind:class="{active:isActive,line:isline}">{{title}}</h2>//绑定类
</div>
<script>
new Vue({
el:"#root",
data:{
isActive:false,
isline:true,
title:"this a title",
placeholder:"this a content",
content:"",
aHref:"http://www.baidu.com",
imgURL:"http://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg"
},
methods:{
changeMsg:function(){
}
}
})
</script>
</body>
</html>
