vue.js自定义标签(自定义组件)_vue在js里写标签-优快云博客

本文介绍了一个Vue.js组件的具体实现过程，分为模板定义、JS逻辑控制和HTML容器展示三部分。通过实例展示了如何创建一个用于添加待办事项的表单组件。

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

分为三个部分:
1.template模版：

<script type="text/x-template" id="todo-form-template">
    <form v-on:submit.prevent="addtodo(newtodo)">
        <input type="text" v-model="newtodo.title">
        <button type="submit">提交</button>
    </form>
</script>

2.vue.js的js操作:

Vue.component('todo-form',{
    template:'#todo-form-template',
    props:['todos'],
    data(){
        return {
            newtodo:{id:null,title:'',completed:false}
        } 
    },
    methods:{
        addtodo(newtodo){
            this.todos.push(newtodo);
            this.newtodo = {id:1,title:'',completed:false};
            // console.log(this.newtodo);
        },
    }
});