Vue 组件的创建

最新推荐文章于 2024-12-01 15:12:23 发布

原创最新推荐文章于 2024-12-01 15:12:23 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了Vue.js中创建组件的三种方法：1. 使用Vue.extend()；2. 标签创建，需设置id属性；3. 使用<script type='text/x-template'>并指定id，防止内容被浏览器编译。

1、组件创建—有3中方法

extend()
< template id=’’>
< script type=‘text/x-template’ id=’’>

A、调用Vue.extend()，创建名为haha的组件，template定义模板的标签，模板的内容需写在该标签下

<body>
    <div id="app">

        <haha></haha>
        <haha></haha>
    </div>
</body>
<script>
    // 创建组件有三种方式
//     1、组件创建—有3中方法，
// extend()
// < template id=’’>
// < script type=‘text/x-template’ id=’’>

    var haha = Vue.extend({
        template:"<div>我是一个组件</div>",
    })
    var vm = new Vue({
        el:"#app",
        // 可以直接使用<haha/>了
        components:{
            "haha":haha
        }
    })
</script>

B、标签创建，需要加上id属性

<body>
    <div id="app">

        <haha></haha>
        <haha></haha>
    </div>

    <template id="haha">
        <div>
            我是一个组件
        </div>
    </template>
</body>
<script>
    // 创建组件有三种方式
//     1、组件创建—有3中方法，
// extend()
// < template id=’’>
// < script type=‘text/x-template’ id=’’>
    var vm = new Vue({
        el:"#app",
        // 可以直接使用<haha/>了
        components:{
            haha:{
                template:"#haha"
            }
        }
    })
</script>

C、< script type=‘text/x-template’ id=‘haha’>,需加id属性，同时还得加 type=“text/x-template”,加这个是为了告诉浏览器不执行编译里面的代码

<body>
    <div id="app">

        <haha></haha>
        <haha></haha>
    </div>
</body>
<script type="text/x-template" id="haha">
    <div>我是一个组件</div>
</script>
<script>

    var vm = new Vue({
        el:"#app",
        // 可以直接使用<haha/>了
        components:{
            haha:{
                template:"#haha"
            }
        }
    })
</script>