前端笔记Vue项目day2(六）

 

1、 提供的静态数据

• 数据存放在vue 中 data 属性中

• [AppleScript] 纯文本查看 复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

  var vm = new Vue({       el: '#app',       data: {         books: [{           id: 1,           name: '三国演义',           date: ''         },{           id: 2,           name: '水浒传',           date: ''         },{           id: 3,           name: '红楼梦',           date: ''         },{           id: 4,           name: '西游记',           date: ''         }]       }     }); var vm = new Vue({       el: '#app',       data: {         books: [{           id: 1,           name: '三国演义',           date: ''         },{           id: 2,           name: '水浒传',           date: ''         },{           id: 3,           name: '红楼梦',           date: ''         },{           id: 4,           name: '西游记',           date: ''         }]       }     });

• 2、 把提供好的数据渲染到页面上

  • 利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中

  • [AppleScript] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

    <tbody>     <tr :key='item.id' v-for='item in books'>        <!-- 对应的id 渲染到页面上 -->        <td>{{item.id}}</td>         <!-- 对应的name 渲染到页面上 -->        <td>{{item.name}}</td>        <td>{{item.date}}</td>        <td>          <!-- 阻止 a 标签的默认跳转 -->          <a href="" @click.prevent>修改</a>          <span>|</span>           <a href="" @click.prevent>删除</a>        </td>      </tr> </tbody>

  • 3、 添加图书

    • 通过双向绑定获取到输入框中的输入内容

    • 给按钮添加点击事件

    • 把输入框中的数据存储到 data 中的 books  里面

    • [AppleScript] 纯文本查看 复制代码

      ?

      01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

      <div>   <h1>图书管理</h1>   <div class="book">        <div>          <label for="id">            编号：          </label>           <!-- 3.1、通过双向绑定获取到输入框中的输入的 id  -->          <input type="text" id="id" v-model='id'>          <label for="name">            名称：          </label>            <!-- 3.2、通过双向绑定获取到输入框中的输入的 name  -->          <input type="text" id="name" v-model='name'>             <!-- 3.3、给按钮添加点击事件  -->          <button @click='handle'>提交</button>        </div>   </div> </div>   <script type="text/javascript">     /*       图书管理-添加图书     */     var vm = new Vue({       el: '#app',       data: {         id: '',         name: '',         books: [{           id: 1,           name: '三国演义',           date: ''         },{           id: 2,           name: '水浒传',           date: ''         },{           id: 3,           name: '红楼梦',           date: ''         },{           id: 4,           name: '西游记',           date: ''         }]       },       methods: {         handle: function(){           // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字           var book = {};           book.id = this.id;           book.name = this.name;           book.date = '';          // 3.5 把book  通过数组的变异方法 push 放到    books 里面           this.books.push(book);           //3.6 清空输入框           this.id = '';           this.name = '';         }       }     });   </script>