vue 入门1 组件管理

 全局 组件、局部组件

// Vue.component('todo-list',{
// template:'<li >item</li>'
// }); //全局

// var todoitem={
// template:'<li >item</li>'
// } //局部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/vuejs/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputvalue"/>
        <button @click='handlesubmit'>提交</button>
       <!-- <ul>
           <li v-for="(item, index) of list" :key="index">{{item}}</li>
       </ul> -->
       <ul>
        <!-- <li >{{item}}</li> -->
        <todo-list v-for="(item, index) of list" :key="index"
        :content='item'>      
        </todo-list>
    </ul>
    </div>
    <script>
        // Vue.component('todo-list',{
        //     template:'<li >item</li>'
        // });  //全局

    // var todoitem={
    //     template:'<li >item</li>'
    // }  //局部


Vue.component(
'todo-list',{
props:['content'],
template:'<li @click="handleclick" >{{content}}</li>',
methods: {
handleclick:function(){
alert(12)
}
},
},

new Vue({
          el:'#app',
        //   components:{
        //       'todo-list':todoitem
        //   },
          data:{
              inputvalue:'123',
              list:[]
          },
          methods: {
              handlesubmit:function()
              {
                  this.list.push(this.inputvalue);
                  this.inputvalue=''
              }
          },

     });
    </script>
</body>
</html>

 

posted @ 2019-06-23 16:18  每天进步一点点！  阅读(368)  评论(0)  编辑  收藏  举报