Vue笔记（开课吧课程）

第一课：购物车方案

案例图示：

这是开课吧原项目。加上css。

源码：

知识点：

v-model

    <h2>添加课程</h2>
  <div>
    <label for="">课程名称：</label>
    <input type="text" v-model="courseInfo.name">
  </div>
  <div>
    <label for="">课程价格：</label>
    <input type="text" v-model="courseInfo.price">
  </div>
  <div>

这里用Vue的双向绑定功能，意思就是在input里面输入的东西也会修改了courseInfo.name这个数据里面，在courseInfo.name里面修改也会在input上面显示

官方解释：

知识点：

v-on 缩写 @

    <<button @click="addCourseToList">添加项目到列表</button>

v-on 侦听事件，缩写为@ click点击事件，侦听点击事件，当点击按钮后触发

官方解释：

知识点：

v-for

      <tr v-for="(item,index) in courseList" :key="item.id">
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td><button @click="addCourseToCart(index)">添加到购物车</button></td>
      </tr>

v-for 遍历数组来渲染列表

官方解释：