<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div>{{a}}</div>
<div v-once>{{b}}</div>
<div v-html="c"></div>
<div v-bind:class="d_class">{{d}}</div>
<div>{{e+1}}</div>
<div>{{f ? "TRUE" : "NO"}}</div>
<div>{{g.split("")}}</div>
<div v-if="h==1">v-if测试，h是1的时候我才显示！</div>
<div v-else-if="h==2">v-if测试，h是2的时候我才显示！</div>
<div v-else-if="h==3">v-if测试，h是3的时候我才显示！</div>
<div v-else-if="h==4">v-if测试，h是4的时候我才显示！</div>
<div v-else>v-if测试，h是其它值的时候我才显示！</div>
<div v-bind:class="{green:isGreen}">{{i}}</div>
<div :style="{fontSize: is100px ? '100px' : ''}">{{i}}</div>
<div v-show="j">j是true的时候显示我！</div>
<div>
<ul>
<li v-for="value,key in k">
{{key}}-{{value}}
</li>
</ul>
</div>
<div>
<ul>
<li v-for="value,index in m">
{{index}}-{{value}}
</li>
</ul>
</div>
<div v-on:click="click1">
<div v-on:click.stop="click2">
点一下我!
</div>
</div>
<div v-on:dblclick="click3">
双击我！
</div>
<div>
<input v-model="n1" />
<p>{{n1}}</p>
<textarea v-model="n2"></textarea>
<p>{{n2}}</p>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:app,
data:{
a:"aValue",
b:"bValue",
c:"<span style='color:red'>cValue</span>",
d:"dValue",
d_class:"red",
e:108,
f:true,
g:"Hello World!",
h:3,
i:"iValue",
isGreen:true,
is100px:true,
j:true,
k:{messageK1:"valueK1",messageK2:"valueK2"},
m:[{messageM1:"valueM1"},{messageM2:"valueM2"}],
n1:"我是n1初始值！",
n2:"我是n2初始值！"
},
methods:{
click1 : function(){
console.log("Click1..."+this.a);
},
click2 : function(){
console.log("Click2..."+this.b);
},
click3 : function(){
alert("我被双击了！");
}
}
});
</script>
<script type="text/javascript">
vm.$data.a = "newAValue";
vm.$data.b = "newBValue";
vm.$data.c = "<span style='color:red'>newCValue</span>";
vm.$data.d_class = "green";
</script>
<style type="text/css">
.red{color:red;}
.green{color:green;}
</style>
</body>
</html>