共计 3303 个字符，预计需要花费 9 分钟才能阅读完成。
这部分内容写的非常详细，是为了让没有接触过 vue 的小白，可以快速的上手使用 vue，同时也回答了一些初学者使用 vue 的一些问题，通过这个案例，做到把 vue 的基础知识了解透彻的目的，为以后使用 vue 做复杂的页面特效或者使用 vue+elementUI，iview 等 UI 做准备。
有分页的单独做一遍文章，
读者看文章的同时，如果能回答出里面的提问，那么就说明已经掌握了这部分内容。
– 无分页分支
后台接口测试
http://localhost:8888/classesAll
– 后台的写法和 ssm 项目的写法一致，
code as below
@RestController
//@CrossOrigin
public class ClassController {
@GetMapping(“/classesAll”) // 显示 List
public List classesAll() throws Exception {ClassExample classExample = new ClassExample();
List<com.zz.entity.Class> classList = classService.selectByExample(classExample);
return classList;
}
service 和 mapper 的代码，mapper 可以自动生成
略
then 新建一个 jsp，用 vue 代码，把接口传过来的 json 数据在页面上展示出来就可以了，we can use the vue，angular, and jsp techniques.
【question: how to use the jquery technique handlling the json array data, which comes from the java code】
at this place,we use the vue easily to solute the json array data.
json type, mainly two types, one is json object–>{name:’name01′,age:18}
the other is json array–>[{},{}]
vue 数据域，查询只要有一个 classes 就可以了
–var 是什么
–{} 是什么
–classes: [] 这段代码为什么有：，[] 代表什么
–beanAdd：{} 大括号代表什么
—- 属性名：属性值
—- 每一组之间用，分割
–el 属性：代表 vue 要操作页面的 dom 元素，#app，app 是页面 dom 元素的 id，一般放在 jsp 页面里的最大的 div 上
–data 指 vue 的数据域，绑定到我们之前用 js 代码建立的 json 对象上。
–mounted– 代表 vue 初始化执行的操作，和 jquery 的 ready 函数一样
–new Vue（{}）；代表页面加载 vue，如果页面没有引入 vuejs，那么这行代码直接报错
–methods 是 vue 的方法域，里面的对象
开发过程
1th
var vue=new Vue（{}）；
2th
new Vue（{
el：“#app”
}）；
3th
new Vue（{
el：“#app”，
data：data4Vue
}）；
4th
new Vue（{
el：“#app”，
data：data4Vue，
mounted：function(){
}
}）；
5th
new Vue（{
el：“#app”，
data：data4Vue，
mounted：function(){
},
methods: {
listAll: function(){
},
list: function(){
}
}
}）；
–methods
–{属性：属性值，属性：属性值}
– 有的属性值是一个函数，有的属性值是一个 json 对象
– 这个内容非常重要，要反复练习
– 提问：方法域里有 listAll 和 list 两个方法，那么这两个方法之间为什么用逗号分割开呢？不写这个逗号可以吗？
回忆一下 jquery ajax 的写法？
axios ajax 请求，和 jquery ajax 请求类似
var url=”classesAll”;
axios.get(url).then();
then（）相当于 success：
axios.get(url).then(function（res）{
console.log（res.data）;
});
这个 data 是什么数据呢？
页面 dom
– 这里学习使用 vue 的 v -for 标签
–classes 是 vue 数据域定义的变量，vue 数据域可以定义无数多个变量，classes 只是我们定义的一个。
v-for 是专门用来循环输出 json array 和数组的。From the example，we found eally it likes the c:foreach of jsp.
v-for and c:foreach are allmost same.
编辑，删除，和修改这三行不用看。等学习完查询列表再学习新政，删除。
simplify the code and then, as below
1th, 因为循环输出的内容是 tr，一个班级对应一组 tr
<tr><td></td><td></td><td></td><td></td><tr>
2th
<tr v-for=”bean in classes”><td></td><td></td><td></td><td></td><tr>
3th
<tr v-for=”bean in classes”>
<td>{{bean.classid}}</td>
<td>{{bean.classname}}</td>
<td>{{bean.classmsg}}</td>
<td></td>
<tr>
–attention the code comparing with the【c:foreach】version
table header part
<tr>
<td>classid</td>
<td>classname</td>
<td>classmsg</td>
<td> 操作 </td></tr>
uintil now, page effect as below
page js code as below
var data4Vue={classes:[]}
– 因为 classes 是 json 数组，所以用 []，如果是 json 对象则用大括号
– 查询功能只需要一个变量，所以 vue 属性域只有一个变量，什么时候是一个变量，什么时候是两个变量，都是有原因的，并不是随便写的，没有用的变量可以去掉
—
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 –>jquery ready()–>body onload 事件
this.listAll(1);
},
listAll: function(start){
var url = "classesAll?";//
axios.get(url).then(function(response) {
// 不分页分支
vue.classes = response.data;
})
},
– 到此，不分页的查询列表就介绍完成了。
–vue.classes = response.data;// 把 ajax 查询返回的 json 数组绑定到 vue 数据域中的 classess 变量上。
–vue.classes = response.data; 不能写成 this.classes=response.data; 为什么
– 当 classes 有值的时候，v-for 会自动循环输出 classes 的内容。
axios 和 jquery ajax 的效果一样，如果熟悉 jquery ajax 的，可以直接用 jquery ajax
example as below
$.ajax({
url: "",
type："json",
success: function(res){vue.classes=res}
});
– 多说一句，axios 没有同步 ajax，全是异步 ajax，那么如果要使用同步的场景，该如何使用呢？
—
学习的时候，先要把文档看懂，文档的每一句话都理解是什么意思，每一行代码，包括注释都是什么意思，只有基础扎实了，以后才能应对复杂的业务逻辑。
基本上对 js 语法有一些认识的就能看懂
上面是一个单表的查询的例子
