1、vue.js简介
Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。 从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格 式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。
Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。
本章使用的为独立版本，直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量.
2、start
2.1、Hello World !
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/vue/vue-dev/dist/vue.js"></script>
</head>
<body>
<div id="app1">
{{message}}
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app1",
data:{
message:"Hello World!"
}
})
</script>
</html>（注：这里有一个需要注意的地方，vue.js的代码必须在要操作的Dom之后，不然会无效，如果是写在外部js文件内，页面引用时也需要注意这里点！）
2.2、双向绑定
<div id="app2">
{{message}}
<input v-model="message">
</div>js代码：
new Vue({
el: "#app2",
data:{
message:"Hello Vue.js!"
}
})当在文本框内进行输入时，与其v-mode=“”l内名字所对应的名字的值都会改变。（v-model指令只能用于文本框才会有效）
2.3、列表渲染
<div id="app3">
<ul>
<li v-for="todo in todos">{{todo.rname}}</li>
</ul>
</div>js代码：
<!-- arr为模拟后台传入前台的json字符串 -->
var arr=[
{"annotation":"具有最高权限","rname":"超级管理员","rid":"001"},
{"annotation":"管理自己的一切博客","rname":"博主","rid":"002"},
{"annotation":"负责学生的生活，学习及心里问题","rname":"辅导员","rid":"003"},
{"annotation":"讲课的","rname":"教师","rid":"004"},
{"annotation":"听课","rname":"学生","rid":"005"}
]
new Vue({
el: "#app3",
data:{
roles:arr
}
});
2.4、事件的绑定
<div id="app4">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div> js代码：
new Vue({
el:"#app4",
data:{
message: "Hello Vue.js!"
},
methods:{
reverseMessage: function(){
alert(this.message);
}
}
});若方法需要加参数，直接在方法名后加上括号填入参数即可： v-on:click="reverseMessage(12)"，js代码中也要加入对应的参数.