使用vue.js+jquery的ajax从goods.json中获取商品, 并渲染到界面上。

使用Vue.js结合jQuery的Ajax技术，可以从`goods.json`文件中动态加载数据并将其渲染到网页上，通常可以按照以下步骤操作：

1. **安装依赖**:
首先确保你已经在项目中安装了Vue和jQuery。如果没有，可以分别通过npm或yarn安装：

   npm install vue @vue/cli-plugin-jquery jquery --save

2. **创建Vue实例**:
在HTML模板中引入Vue.js库，并在全局范围内创建Vue实例：

   <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="@vue/cli-plugin-jquery/plugin.js"></script>
   <div id="app">
     <!-- 商品列表将在这里显示 -->
   </div>

3. **定义数据和组件**:
在Vue实例的data选项中定义一个数组，用于存储从JSON中获取的商品数据。创建一个简单的组件来展示商品：

   // main.js (入口文件)
   new Vue({
     el: '#app',
     data() {
       return {
         goods: []
       }
     },
     created() {
       this.fetchGoods();
     },
     methods: {
       fetchGoods() {
         $.getJSON('goods.json', (response) => {
           this.goods = response;
           // 或者直接设置响应的数据到this.goods
           this.$set(this, 'goods', response);
         });
       }
     }
   });

4. **模板部分**:
在`<div id="app">`标签内，使用v-for指令遍历`goods`数组，渲染每个商品：

   <template>
     <ul>
       <li v-for="(item, index) in goods" :key="index">
         {{ item.name }} - {{ item.price }}
       </li>
     </ul>
   </template>

5. **JSON文件示例** (`goods.json`):

   [
     {"name": "商品A", "price": "价格A"},
     {"name": "商品B", "price": "价格B"}
   ]

现在，当你刷新页面或者首次访问时，Vue会发起GET请求到`goods.json`，然后将接收到的数据渲染到对应的HTML元素中。