vue实例化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
{
{a}}
<p>{
{rawHtml}}</p>
<p v-html="rawHtml"></p>
<div v-bind:class="color">
test......
</div>
<p>{
{number+1}}</p>
<p>{
{ok?'Yes':'No'}}</p>
<p>{
{message.split('').reverse().join('')}}</p>
<p v-if="seen">现在你看到我了</p>
<a v-bind:href='url'>....</a>
</div>
<script type="text/javascript">
var data = {
a:1,
rawHtml:'<span style="color:red">this is should be red</span>',
color:'blue',
number:10,
ok:false,
message:'vue',
seen:true,
url:"www.baidu.com"
}
var vm = new Vue({
el:'#app',
data:data,
});
// data.a = "hhhhh"
vm.$watch('a',function(newVal, oldVal){
console.log(newVal,oldVal)
})
vm.$data.a = 2
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue;font-size:100px;}
</style>
</body>
</html>
class与style的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div v-bind:class="{active:isActive,green:isGreen}"
style="width:200px;height:200px;text-align:center;line-height:200px;">
hi,vue
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el : '#app',
data : {
isActive:true,
isGreen:true
}
})
</script>
<style type="text/css">
.active{background:#FF0000;}
.green{color:#00FF00;font-size:20px;}
</style>
</body>
</html>
v-if
<!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 v-if= "type==='A'">
A
</div>
<div v-else-if="type ==='B'">
B
</div>
<div v-else-if="type ==='C'">
C
</div>
<div v-else>
D
</div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
type:"A"
}
});
</script>
</body>
</html>
列表渲染
（一）在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<!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="example-2">
<ul>
<li v-for="(item, index) in items">
{
{parentMessage}}-{
{index}}-{
{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var example2 = new Vue({
el:"#example-2",
data:{
parentMessage:'Parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js" type="text/javascript" charset='UTF-8'></script>
</head>
<body>
<ul id='v-for-object' class='demo'>
<li v-for="(value,name) in object">
{
{name}}:{
{value}}
</li>
</ul>
<script type="text/javascript">
var a = new Vue({
el:'#v-for-object',
data:{
object:{
title:'how to do list in vue',
author:'Jane Doe',
publishedAt:'2011'
}
}
})
</script>
</body>
</html>