Vue组件使用入门

最新推荐文章于 2024-02-01 21:12:51 发布

qq_40447533

最新推荐文章于 2024-02-01 21:12:51 发布

阅读量129

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_40447533/article/details/109782079

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

4.todolist组件拆分


定义局部组件，需要去newVue里面注册
var TodoItem={
     template:'<li>item</li>'
}
Vue.component(TodoItem){
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item
                v-for="(item,index) of list" 
                :key="item"
                :content="item" //如果模板里面使用需要在模板里面定义
            ></todo-item>
        </ul>
    </div>
     
    <script>
        Vue.component('todo-item',{
            props:['content'],
            template:'<li>{{content}}</li>'
        })
        // var TodoItem={
        //     template:'<li>item</li>'
        // }
        new Vue({
            el:"#root",
            data:{
                inputValue:"hello",
                list:[]
            },
            methods:{
                handleClick:function(){
                    this.list.push(this.inputValue);
                    this.inputValue="";
                }
            }
        })
    </script>
</body>
</html>

5.组件和实例的关系

VUE 中每一个组件都是一个vue的实例

var TODOITEM = {//每个组件都是一个实例

    props:['msg'],//接收参数

    template:"<li @click='handleClick'>{{msg}}</li>",//使用参数

    methods:{

      handleClick:function(){

        alert("hello")

      }

    }

  }

6.组件通信

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">

        <title>VUE绑定事件处理</title>

        <script src="vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    </head>

<body>

    <div id="root">
    
    <div>
    
    <input v-model="inputValue" />
    
    <button @click="Submit">提交</button>
    
    </div>
                     
    <ul>
    
       <todo-item 
    
               v-for="(item,index) of list" 
    
               :key="index"
    
               :content="item"
    
               :index="index"
    
               @delete="handleDelete"
    
               >
               </todo-item>   
    </ul>   
    </div>    
    <script>
                  
    Vue.component('todo-item',{   
        props:['content','index'],       //接收父模板的值
        template:"<li @click='handleClick'>{{content}}</li>", //触发点击事件
                methods:{   
                    handleClick:function(){   
                        this.$emit('delete',this.index)   
                    },
    
                }
    
    })
   
    new Vue({    
        el:"#root", 
        data:{       
        inputValue:'',
        
        list:[],    
        },
        
        methods:{
        Submit:function() {
        this.list.push(this.inputValue)     
        this.inputValue=''
    
    },
    
        handleDelete:function(index){

            this.list.splice(index, 1)

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

qq_40447533

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件使用入门

4.todolist组件拆分定义局部组件，需要去newVue里面注册var TodoItem={ template:'<li>item</li>'}Vue.component(TodoItem){}完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue</title>
复制链接

扫一扫