1、 提供的静态数据

• 数据存放在vue 中 data 属性中
• [AppleScript] 纯文本查看 复制代码

  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] 纯文本查看 复制代码

    <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] 纯文本查看 复制代码

      <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>

      
      
    
    
  
  

1、 提供的静态数据

• 数据存放在vue 中 data 属性中
• [AppleScript] 纯文本查看 复制代码

  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] 纯文本查看 复制代码

    <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] 纯文本查看 复制代码

      <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>