vue 自定义组件方式

最新推荐文章于 2022-01-02 11:19:28 发布

aodunpu757775

最新推荐文章于 2022-01-02 11:19:28 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rock-wang/articles/7256008.html

版权

组件注册有三种组件模板的编辑方式
1，直接在Vue.component()方法的template属性中编辑html字符串如例子0
2，使用script标签封装 type = text/template ，需要有id，共组件注册使用
3，使用template标签封装 ，需要有id，共组件注册使用

    注意点：
    1，其实 组件注册时是使用css选择器选取的DOM树，所有使用什么标签封装都是可行的，
        但是script标签和template标签封装的好处是可以直接隐藏自定义组件内容
    2，自定义组件时官方要求组件顶层应只有一个元素封装内容。
        Component template should contain exactly one root element.
        If you are using v-if on multiple elements, use v-else-if to chain them instead.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ADD DOTO</title>
    <script src = "../../lib/vue.js">

    </script>
</head>


<body>

    <div id = "todo-list-example">
        <input
            v-model="newTodoText"
            @keyup.enter = "addNewTodo"
            placeholder="Add a todo"
            >
        <ul>
            <li is = "todo-item"
                v-for ="(todo,index) in todos"
                :key = "index"
                :title="todo"
                @remove="removeTodo(index)">
            </li>

        </ul>
    </div>

    <!--<div id = "app">-->
        <!--{{msg}}-->
    <!--</div>-->

</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:111
        }
    })

    Vue.component('todo-item',{
        template:'\
        <li>\
        {{title}}\
        <button @click ="$emit(\'remove\')">X</button>\
        </li>\
        ' ,
        props:['title']
    })

    new Vue({
        el:'#todo-list-example',
        data:{
            newTodoText:'',
            todos:[
                "do the disehes",
                "thalll",
                "nowddd"
            ]
        },

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ADD DOTO</title>
    <script src = "../../lib/vue.js">

    </script>

    <script type="text/x-template" id = "addtodoctrl">
            <li>
                {{title}}
                <button @click ="$emit('remove')">X</button>
            </li>
    </script>

</head>


<body>


    <div id = "todo-list-example">
        <input
            v-model="newTodoText"
            @keyup.enter = "addNewTodo"
            placeholder="Add a todo"
            >
        <ul>

            <todo-item
                v-for ="(todo,index) in todos"
                :key = "index"
                :title="todo"
                @remove="removeTodo(index)">
            </todo-item>

        </ul>
    </div>

    <!--<div id = "app">-->
        <!--{{msg}}-->
    <!--</div>-->

</body>
<script>
//    var vm = new Vue({
//        el:"#app",
//        data:{
//            msg:111
//        }
//    })

    Vue.component('todo-item',{
        template:"#addtodoctrl",
        props:['title']
    })

    new Vue({
        el:'#todo-list-example',
        data:{
            newTodoText:'',
            todos:[
                "do the disehes",
                "thalll",
                "nowddd"
            ]
        },
        methods:{
            addNewTodo:function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            },
            removeTodo:function (index) {
                this.todos.splice(index, 1)
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ADD DOTO</title>
    <script src="../../lib/vue.js">
    </script>
</head>

<body>
<template id="addtodoctrl">
    <li>
        {{title}}
        <button @click="$emit('remove')">X</button>
    </li>
    <li1>
        {{title}}
    </li1>
</template>

<!--<div id="addtodoctrl">-->
    <!--<li>-->
        <!--{{title}}-->
        <!--<button @click="$emit('remove')">X</button>-->
    <!--</li>-->
<!--</div>-->

<div id="todo-list-example">
    <input
            v-model="newTodoText"
            @keyup.enter="addNewTodo"
            placeholder="Add a todo"
    >
    <ul>

        <todo-item
                v-for="(todo,index) in todos"
                :key="index"
                :title="todo"
                @remove="removeTodo(index)">
        </todo-item>

    </ul>
</div>


</body>
<script>
    Vue.component('todo-item', {
        template: "#addtodoctrl",
        props: ['title']
    })

    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                "do the disehes",
                "thalll",
                "nowddd"
            ]
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            },
            removeTodo: function (index) {
                this.todos.splice(index, 1)
            }
        }
    })
</script>

</html>


        methods:{
            addNewTodo:function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            },
            removeTodo:function (index) {
                this.todos.splice(index, 1)
            }
        }
    })
</script>

</html>

转载于:https://www.cnblogs.com/rock-wang/articles/7256008.html

aodunpu757775

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 自定义组件方式

组件注册有三种组件模板的编辑方式1，直接在Vue.component()方法的template属性中编辑html字符串如例子02，使用script标签封装 type = text/template ，需要有id，共组件注册使用3，使用template标签封装，需要有id，共组件注册使用注意点： 1，其实组件注册时是使用css选择器选取的DOM树，所有使用什么标签封装都是...
复制链接

扫一扫