1.vue-resource请求数据
vue-resource请求数据方式是官方提供的一个插件,通过npm install vue-resource --save或者cnpm install vue-resource --save进行安装，也可以通过在线引入的方式使用vue-resource，引用方式如下。
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <title>Vue</title> <style type="text/css"> li { list-style: none; } #demo{ width: 600px; margin: 0 auto; } </style> </head> <body> <div id="demo"> <table class="table table-bordered"> <tr> <th>id</th> <th>姓名</th> <th>密码</th> <th>邮箱</th> </tr> <tbody v-for="item in list"> <tr> <td>{{item.id}}</td> <td>{{item.userName}}</td> <td>{{item.pwd}}</td> <td>{{item.email}}</td> </tr> </tbody> </table> </div> </body> </html> <script src="../static/js/jquery-3.4.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script> let app = new Vue({ el: '#demo', data: { list: [] }, created() { this.getlist() }, methods: { // 数据请求 getlist() { this.$http.get('http://127.0.0.1:3000/getList').then(function(res) { // console.log(res.data.data) this.$data.list = res.data.data }) } } }) </script>！：这部分就能在mysql返回数据，前提是自己的后台服务要写好，我的后台的服务是node+express+mysql。
methods: { // 数据请求 getlist() { this.$http.get('http://127.0.0.1:3000/getList').then(function(res) { // console.log(res.data.data) this.$data.list = res.data.data }) } }！：created是vue.js 的一个钩子函数，具体我也解释不清楚，可以自己去看看vue 的生命周期讲解，我们暂时可以理解为dom挂载完成时，getlist()会被调用将数据渲染到页面。
created() { this.getlist() },：这只是其中一种数据请求方式，也只是简单的实现数据查找功能，不足之处请大家指教。
