vue 入门1 组件管理

最新推荐文章于 2024-08-03 00:11:32 发布

weixin_30670925

最新推荐文章于 2024-08-03 00:11:32 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/laopo/p/11073196.html

博客给出了Vue全局组件和局部组件的代码示例。全局组件通过Vue.component定义，局部组件则以变量形式定义。还展示了带有props和方法的全局组件示例，代码转载自相关博客。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件、局部组件

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