Question

我想使用vue.js从Web服务获取数据。但是我无法获取数据，是否可以在不安装node.js的情况下使用vue.js？你能帮我吗？谢谢你。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>   <script src="https://unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script>        
</head>
<body>
     <div id="app">             
        <table border=1>
           <thead>
             <tr>
             <th>title</th>
             </tr>
            </thead>
             <tr id="app">
             <td>{{data.title}}</td>
             </tr>
         </table>           
     </div>
<script type="text/javascript">
var dataURL = 'https://swapi.co/api/films/?format=json';

var App = new Vue({
  el: '#app',
  data: {
    posts: [] // initialize empty array
  },
  mounted() { 
    var self = this 
    $.getJSON(dataURL, function(data) {
      self.posts = data.results;
    });
  }
})
</script>
</body>
</html>

Answer 1

您要添加Vue资源，但要使用Jquery。检出：https://github.com/pagekit/vue-resource

我还制作了一个v-for循环来遍历表中的posts数组。

注意：在使用VueJS时，实际上没有任何情况下需要JQuery。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>   <script src="https://unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script>        
</head>
<body>
     <div id="app">             
        <table border=1>
           <thead>
             <tr>
             <th>title</th>
             </tr>
            </thead>
             <tr v-for="item in posts">
             <td>{{item.title}}</td>
             </tr>
         </table>           
     </div>
<script type="text/javascript">
var dataURL = 'https://swapi.co/api/films/?format=json';

var App = new Vue({
  el: '#app',
  data() {
    return {
      posts: [] // initialize empty array
    }
  },
  mounted() { 
    this.$http.get(dataURL).then(res => {
     this.posts = res.body.results
    });
  }
})
</script>
</body>
</html>

Answer 2

看起来像$是未定义的。我猜那是jquery吗？ https://api.jquery.com/jQuery.getJSON/#jQuery-getJSON-url-data-success

还修复了其他一些问题。这对我有用。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>   <script src="https://unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script><script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>       
    </head>
    <body>
         <div id="app">             
            <table border=1>
               <thead>
                 <tr>
                 <th>title</th>
                 </tr>
                </thead>
                 <tr id="app" v-for="(post, index) in posts" :key="index">
                 <td>
                 {{post.title}}
                 </td>
                 </tr>
             </table>           
         </div>
    <script type="text/javascript">
    var dataURL = 'https://swapi.co/api/films/?format=json';

    var App = new Vue({
      el: '#app',
      data() { // data should be a function
        return {
          posts: [] // initialize empty array
        }
        
      },
      mounted() { 
        var self = this 
        $.getJSON(dataURL, function(data) {
          self.posts = data.results;
        });
      }
    })
    </script>
    </body>
    </html>

如何使用html中的Vue.js从Web服务获取数据？

2 个答案: