数据联动选择l了Vue，不得不记下来
引入vuejs，new一个vue对象，
var vm = new Vue({
el: '#order_p',//这里是html选择器
data: {//data里面的数据是可以被页面绑定的 实现实时更新
packages:[{
}],
sortparam: ''
},
methods:{//这里面定义方法，this指向vm实例
},
computed: {//相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同事会出发实时计算
},
events: { // 创建监听相应响应子组件的事件
},
created:function(){//一个vue实例被生成后调用这个函数
},
})
//demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="data_vue">
名称：<input type="text" name="name" id="vue_name" />
年龄：<input type="number" name="age" id="vue_age"/>
<button v-on:click="add_user()">添加</button>
<table border="5" cellspacing="0">
<tr>
<th>序号</th>
<th>名称</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(user , key) in users">
<td>{{key+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<button v-on:click="del_user(key)">删除</button>
</td>
</tr>
</table>
<div id="age_box">
总年龄：{{age_total}} 平均年龄：{{age_total/users.length}}
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#data_vue',
data:{
users:[
{name:'name1',age:18},
{name:'name2',age:38},
{name:'name3',age:19},
],
totalAge:0,
},
//created和ready都是 vue 组件的生命周期
/*created
类型： Function
详细：
在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。
ready
类型： Function
详细：
在编译结束和 $el 第一次插入文档之后调用，如在第一次attached钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。*/
created:function(){
},
ready:function(){
},
computed:{//compted 是计算属性
age_total : function(){
this.totalAge = 0;
var users = this.users;
var len = users.length;
for(var i=0 ; i<len ; i++){
this.totalAge += users[i].age;
}
return this.totalAge;
},
},
methods:{//method用来定义方法的
del_user:function($idx){
this.users.splice($idx,1);
},
add_user:function(){
var name = $('#vue_name').val();
var age = parseInt($('#vue_age').val());
if(name && age){
this.users.push({
name:name,
age:age
});
}
},
},
});
</script>
</html>
