1.声明方法：
new Vue({
......
})
一、在Vue对象中有很多常用的选项，
1.el 表示Element，用于控制Vue指定的元素。
2.data vue的所有的数据都是放在data里面的，data的内容也是对象,通过data里面的数据可以实现双向绑定。
data:{
}
3.method method用于存放方法，它的内容也是对象，需要将对象声明称方法。常见的情况就是用来处理事件函数。
<div v-on="doSth"></div>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
method:{
doSth:function(){
......
}
}
})
</script>
在这里通过一个指令，也就是v-on来绑定了一个点击事件，也可以通过缩写"@click"来绑定事件。
4.watch 可以用来监听，当监听的对象改变时，watch就会执行。
watch:{
'a':function(){
......
}
}
二、模板指令
1.v-text，v-html：用于数据渲染，二者的区别与jQuery中的.html和.text相似。
2.v-if,v-show：用于控制模块显示和隐藏。不同的是，v-if直接移除元素，v-show通过display：none来隐藏元素。
3.v-for：渲染循环列表，通过in关键字，类似于加强版的for循环，v-for="book in books"，这里，book是循环时使用的变量，books是在
data中定义的数据。
4.v-on（@）：绑定事件。
5.v-bind：属性绑定。比较常用在class和src上，所以这两个属性可以简写，:class,:src="{key:code}:如果以对象的形式写，前面的key值就是
class本身的值，后面用于判断这个class是否展现，如果以数组的形式，则显示data中的数据。
总结：new一个vue对象的时候，可以设置它的属性，最常用的属性是data，method和watch
data代表vue对象的数据，method是vue对象的方法，watch设置了对象的监听方法。
vue对象里面的设置通过html指令进行关联。
常用的指令包括：v-text渲染数据
v-if控制显示
v-on绑定事件
v-for循环渲染等。<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
</div>
<div id="app2">
<span v-bind:title="message">
<!--通过bind将message和title绑定在一起，当message改变时，title属性值也会改变，当鼠标悬浮在下面这段话上面时，会自动显示当前的系统时间-->
Hover your mouse over me for a new seconds to see my dynamically bound title
</span>
</div>
<div id="app3">
<p v-if="seen">Now you see me</p>
</div>
<div id="app4">
<p v-show="show">Now you see me</p>
</div>
</body>
<script>
var demo = new Vue({
el:"#app",
data:{
message:"hello world"
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:'You loaded this page on' + new Date()
}
});
var app3 = new Vue({
el:"#app3",
data:{
seen:false
}
});
var app4 = new Vue({
el:"#app4",
data:{
show:false
}
});
</script>
</html>
在这个例子中使用了基本的数据渲染，双向绑定和模块显示/隐藏。这里要注意v-if和v-show的区别，v-if会直接隐藏元素，并且元素的位置也会消失，v-show通过display:hidden;的方法来隐藏模块。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="book">
<ul id="books" v-for="book in books">
<li>{{book.id}}</li>
<li>{{book.name}}</li>
<li>{{book.author}}</li>
<li>{{book.price}}</li>
</ul>
<div id="addBook">
<h1>添加书籍</h1>
<div class="name">
<label for="">书名</label><br/>
<input type="text" v-model="book.name"/>
</div>
<div class="author">
<label for="">作者</label><br/>
<input type="text" v-model="book.author"/>
</div>
<div class="price">
<label for="">价格</label><br/>
<input type="text" v-model="book.price"/>
</div>
<input type="button" id="add" @click="addBooks" value="添加"/>
<input type="button" id="remove" value="删除" @click="remove(book)"/>
</div>
</div>
</body>
<script>
new Vue({
el:"#book",
data:{
book:{
id:0,
author:'',
name:'',
price:''
},
books:[
{
id:1,
author:"曹雪芹",
name:"红楼梦",
price:32.0
},{
id:2,
author:"施耐庵",
name:"水浒传",
price:30.0
},{
id:3,
author:"罗贯中",
name:"三国演义",
price:24.0
},{
id:4,
author:"吴承恩",
name:"西游记",
price:20.0
}
]
},
methods:{
addBooks:function(){
this.book.id = this.books.length + 1;
this.books.push(this.book);
this.book = '';
},
remove: function (book) {
this.books.$remove(this.books[0]);
}
}
});
</script>
</html>
这个例子中，首先使用v-for来进行循环渲染，循环输出books中的数据，通过v-model将data中的book与input的内容进行了双向绑定，这样在我们改变input框中的内容时，数据会同时更新到book中，然后在vue的methods属性中，定义了addBooks方法，首先计算出新添加的书的id，然后通过push方法将当前的book添加到books数组中，然后将book清空，以便下一次添加操作。在删除按钮中有一个特殊符号"$"这是代表接下来的remove是数组的自带方法，不是data数据。