废话不多说，直接上代码

html代码

    
                   
    
            {
  {message }}
     
       
     测试jquery加载数据       
     
                 
       
                       
{
  {data.Name}}
                       
{
  {data.Url}}
                       
{
  {data.Country}}
                  
             
     
   
    
   

js代码

/** * Created by sen on 2016/10/31. *///定义Vue组件var vum=new Vue({    el: "#app",    data: {        message: "",        datas: "",    },    methods:{        showData:function () {            jQuery.ajax({                type: 'Get',                url: "/vue1/json/data.json",                success: function (data) {                    vum.datas = data.sites;                }            })        }    }})//使用jqueryjQuery(function () {    // jQuery("#btn_1").bind("click", function () {    //     alert(jQuery("#name").val());    // });    loadData();})//jquery加载数据function loadData() {    jQuery.ajax({        type: 'Get',        url: "/vue1/json/data.json",        success: function (data) {            vum.message = data.sites[0].Name;        }    })}

json文件

{  "sites": [    {      "Name": "百度",      "Url": "www.baidu.com",      "Country": "CN"    },    {      "Name": "Google",      "Url": "www.google.com",      "Country": "USA"    },    {      "Name": "Facebook",      "Url": "www.facebook.com",      "Country": "USA"    },    {      "Name": "微博",      "Url": "www.weibo.com",      "Country": "CN"    }  ]}

为了模拟请求使用本地的json文件，正式开发可将Jquery ajax的url换成接口地址。

文件目录结构见下（不能上传附件，需要源码的私聊）