vue组件常用声明方式

2024-02-15 06:49•html•阅读 3748

一.前言

这是自己重新写的一个，感觉以前的太写了很多不必要的方式实际当中基本不会用的所以自己写了一个常用的组件什么方式更加的通俗易懂

二.代码如下

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>组件练习</title>
                <!-- 引入vue.js -->
                <script src="../vue/vue.js"></script>
        </head>
        <body>
                <div >
                        <!-- {{msg}} -->
                        <!-- 全局组件 -->
                        <my-div></my-div>
                        <!-- 局部组件 -->
                        <my-div2></my-div2>
                        <!-- //templata 注册全局组件 -->
                        <clj></clj>
<!-- //templata 注册局部组件 -->
                        <clj2></clj2>
                </div>
                <!-- //templata 注册全局组件 -->
                <template >
                        <div>
                                我是template全局组件
                        </div>
                </template>
<!-- //templata 注册全局组件 -->
                <template >
                        <div>
                                我是template局部组件
                        </div>
                </template>
                <script>
                        // 全局组件
                        Vue.component('clj',{template:"#my-template"})
                        Vue.component("my-div",{template:`<div>我是全局组件</div>`})
                        new Vue({
                                el:'#app',
                                data(){
                                        return{
                                                msg:'我不爱大海和森林'
                                        }
                                },
                        //局部组件
                                components:{
                                        'my-div2':{template:`<div>我是局部组件</div>`},
                                        'clj2':{template:"#my-template2"}
                                }
                        })
                </script>
        </body>
</html>

上一篇 »vue常用UI组件
下一篇 »vue的三种通信方式