zoukankan      html  css  js  c++  java
  • 使用前端组件化思想修改todolist

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>todolist</title>
     9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    10 </head>
    11 
    12 <body>
    13     <div id="app">
    14         <input type="text" name="" id="" v-model="inputValue">
    15         <button v-on:click="handleBtnClick">提交</button>
    16         <!-- 把li标签里的内容整体变成一个组件 -->
    17         <ul>
    18             <!-- <li v-for="item in list">{{item}}</li> -->
    19             <!-- v-bind:向子组件传递一个绑定值 -->
    20             <todo-item v-bind:content="item" v-for="item in list">
    21             </todo-item>
    22         </ul>
    23     </div>
    24 
    25     <script>
    26         // Vue.component('TodoItem', {
    27         //     props: ['content'], //从父组件接收的内容
    28         //     template: '<li>{{content}}</li>',
    29         // }); //vue提供的创建全局组件的方法
    30 
    31         //注册局部对象
    32         var TodoItem = {
    33             props: ['content'],  //定义接收外部传递过来的数据
    34             template: '<li>{{content}}</li>',  //子组件的模板
    35         };
    36 
    37         var app = new Vue({
    38             el: '#app',
    39             components: {
    40                 TodoItem: TodoItem, //把局部组件注册到实例中 
    41             },
    42             data: {
    43                 list: [],
    44                 inputValue: ''
    45             },
    46             methods: {
    47                 handleBtnClick: function() {
    48                     this.list.push(this.inputValue);
    49                     this.inputValue = '';
    50                 }
    51             }
    52         });
    53     </script>
    54 </body>
    55 
    56 </html>
    你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。
  • 相关阅读:
    转-文件批量重命名
    解决死锁之路(终结篇)
    Python批量修改文件名
    Android AudioTrack分析
    Android Audio介绍
    Android GNSS介绍
    Android HIDL介绍
    【vue】类和内联样式绑定
    【vue】计算属性
    svn post-commit不能同步
  • 原文地址:https://www.cnblogs.com/knuzy/p/9258001.html
Copyright © 2011-2022 走看看