首页 > vuejs和后台交互问题?

vuejs和后台交互问题?

vuejs和后台交互问题:比如下面这个示例,

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>


new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

如果data中的todos是从后台取出来的,应该怎么替换,语法怎么写呢?(后台用的laravel)


vue-resource,语法自己看demo


前后分离异步数据


如果配合vue-resource的话,可以这么写

new Vue({
    el: '#app',
    data: {
        todos: [  ] 
    },
    created: function() {
        this
            .$http
            .get('你的api')
            .then((data) => {
                this.todos = data;
            })
    }
});

如果配合jqueryajax,可以这样:

new Vue({
    el: '#app',
    data: {
        todos: [  ] 
    },
    created: function() {
        $.get('你的api')
          .done((data) => {
                this.todos = data;
          });
    }
});

这里只要"你的api"返回的是todos数组就好了

至于后端怎么写,仅仅返回一个json数据,技术上应该不难吧!

【热门文章】
【热门文章】