Vue初学15-组件语法糖

最新推荐文章于 2024-03-06 14:42:24 发布

置顶周达

最新推荐文章于 2024-03-06 14:42:24 发布

阅读量328

点赞数 1

分类专栏： vue 文章标签： vue组件语法糖 template标签

本文链接：https://blog.csdn.net/gis_zhouda/article/details/105099077

版权

vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

上文中提到组件使用需要三个步骤，创建，注册，使用，比较繁琐。

vue提供了一个简便写法，可以将创建和注册合并成一个步骤。如下：将对象直接放到component的第二个参数。

    <script src="../js/vue.js"></script>
     <div id="app">
         <!--使用组件-->
         <mycpn></mycpn>
     </div>
    <script>

        创建组件
        //const cpn = Vue.extend({
        //    template:`
        //        <div>
        //        <h1>我是标题</h1>
        //        <p>我是内容</p>
        //        </div>`
        //});
        //创建并注册组件
        Vue.component('mycpn',{
            template:`
                <div>
                <h1>我是标题</h1>
                <p>我是内容</p>
                </div>`
        });

        //vue绑定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>

效果如下：

template采用``语法效果也不是很好，可以将这一部分提出来。采用template标签或者script标签都可以。template标签比较常用。如下：代码比较清晰

    <script src="../js/vue.js"></script>

    <template id="cpn">
           <div>
                <h1>我是标题</h1>
                <p>我是内容</p>
            </div>
    </template>

     <div id="app">
         <!--使用组件-->
         <mycpn></mycpn>
     </div>

    <script>

        //创建并注册组件
        Vue.component('mycpn',{
            template:'#cpn'
        });

        //vue绑定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>