Vue的经典实战练习：bootstrap框架应用留言板（todolist）
hello，还是你们熟悉的老沈，今天下午看了智能社的一节课，受益匪浅啊，学习vue的过程中掌握了很多boot和js的语法，又
跟着导师自己做了一个留言板的小案例。
--案例感受，vue的入门是真的很简单，学到了vue的自定义指令，能够很快的做一个非常实用的留言板，但是由于是前端页面，不能数据保存
，等到后期教师满意度的项目结束以后，会写一个购物网站，把vue+bootstrap+javabean能够完整的做一个项目。
--先po一下代码吧。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>简易留言板
| 序号 | 用户名 | 年龄 | 操作 |
|---|---|---|---|
| {{$index+1}} | {{item.username}} | {{item.age}} | |
|
暂无数据。。。 |
|||
--js代码
new Vue({
el:'#window',
data:function () {
return{
message:[],
username:'',
age:'',
Nowindex:'-99'
}
},
methods:{
submit:function () {
this.message.push({
name:this.username,
age:this.age
});
this.age='';
this.username='';
},
nowdelete:function (index) {
if(index==-2){
this.message=[]
}else{
this.message.splice(index,1);
}
}
}})
--得引入jq和boot和vue
--案例功能，能够提交表单信息到下方的表格，以及删除
--用到的vue指令
v-model的表单双向数据绑定
v-for循环vue数组内容
--ps：在vue2.0的版本中，不能直接使用$index来表示序列了，要在for循环声明index的存在，比如v-for="(item,$index) in message
--ps:vue的点击事件v-on:click，如果后面跟的方法名如果有参数要表达的话，要写成@click="submit($index)"，类似这种
明天继续，结束！
