Vue入门 Demo3 使用全局组件和局部组件改造TodoList

最新推荐文章于 2023-02-21 15:05:38 发布

城南花已开呀

最新推荐文章于 2023-02-21 15:05:38 发布

阅读量110

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104649556

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo3 使用全局组件和局部组件改造TodoList

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>TodoList</title> 
        <script src="./vue.js"></script>
    </head> 
    <body> 
       <div id="app">
           <!--v-model 双向绑定inputValue-->
           <input type="text" v-model="inputValue"/>
           <!--点击button将加载点击事件-->
           <button v-on:click="handlerBtnClick">提交</button>
           <ul>
               <!-- <li v-for="item in list">{{item}}</li> -->
               <!-- 调用组件 v-bind="item":指向子组件传递值 -->
               <todo-item v-for="item in list" v-bind:content="item"></todo-item>
           </ul>
       </div>
          
       <script>

           //创建全局组件Vue.component props: ['content']:获取传递过来的值
        //    Vue.component("TodoItem", {
        //        props: ['content'],
        //        template: "<li>{{content}}</li>",
        //    })
           //创建局部组件
           var TodoItem = {
              props: ['content'],
              template: "<li>{{content}}</li>",
           }
           var app = new Vue({
               el: '#app',
               //使用局部组件进行注册
               components: {
                TodoItem: TodoItem,
               },
               data: {
                   list: [],
                   inputValue: '',
               },
               //点击事件加载需要在methods方法中
               methods: {
                  handlerBtnClick: function() {
                    //   alert(this.inputValue);
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                  }
               }
           })
       </script>
    </body> 
</html>