1、列表案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> id:<input type="text" class="form-control" v-model="id"> </label> <label> name:<input type="text" class="form-control" v-model="name"> </label> <!-- 在vue中使用绑定机制，如果加了小括号，可以给函数传参--> <input type="button" value="添加" class="btn btn-primary" @click="add"> <input type="text" class="form-control" v-model="keyWords"> <input type="button" value="搜索" class="btn btn-primary"> </div> </div> <table class="table table-bordered"> <thead> <tr> <th>编号</th> <th>品牌</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <!--过滤器只能使用到插件表达式--> <td>{{item.ctime | timeFormat('yyyy-mm-dd hhmmss')}}</td> <td> <a href="#" @click.prevent="del(item.id)">删除</a> <a href="./Model.html">修改</a> </td> </tr> </tbody> </table> </div> <script> //设置全局跟域名 //如果我们通过全局配置了，请求的数据接口根域名，则在每次发起http请求的时候， //请求的url路径应该以相对路径开头，前面不能带/(eg:api/del)，否则不会启用根路径拼接 Vue.http.options.root = 'http://vue.studyit.io/'; //全局配置{emulateJSON:true} Vue.http.options.emulateJSON=true; //<!--全局过滤器只能使用到插件表达式--> Vue.filter('timeFormat',function (ctime,pattern) { var dt = new Date(ctime) var y =dt.getFullYear() var m = (dt.getMonth()+1).toString().padStart(2,0) var d = dt.getDate().toString().padStart(2,0) if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){ return `${y}-${m}-${d}` }else { var hh = dt.getHours().toString().padStart(2,0) var mm = dt.getMinutes().toString().padStart(2,0) var ss = dt.getSeconds().toString().padStart(2,0) return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } }) //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 list:[ {id:1,name:"奔驰",ctime:new Date()}, {id:2,name:"宝马",ctime:new Date()} ], id:'', name:'', keyWords:'', }, created(){ this.getAllList() }, methods: { //vue-resource获取数据 //删除 del(id){ this.$http.get('api/del'+id).then(result => { console.log("result=" + result.body) var result = result.body; if (result.status === 0) { this.getAllList() } else { alert('获取数据失败') } }) }, //添加 add(){ this.$http.post('api/post', {name:this.name},{emulateJSON:true}).then(result =>{ console.log("result=" + result.body) var result = result.body; if (result.status === 0) { this.getAllList() this.name = '' } else { alert('获取数据失败') } }) }, getAllList() { this.$http.get("api/getlunbo").then(result => { console.log("result=" + result.body) var result = result.body; if (result.status === 0) { this.list = result.message } else { alert('获取数据失败') } }) } } }) </script> </body> </html>