Vue2中的各种自定义组件

来源：互联网发布：淘宝运动鞋店铺介绍编辑：程序博客网时间：2024/06/11 16:44
复制到页面看下效果。
<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script> -->        <script src="https://unpkg.com/vue"></script>        <!-- <script type="text/javascript" src="js/vue.js"></script> -->        <!-- <script type="text/javascript" src="js/vue.min.js"></script> -->        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">        <style type="text/css">            .red{color: #f00;}        </style>    </head>    <body>                <div id="app1">            <h2>模板测试1</h2>            <v-header></v-header>         </div>        <script type="text/javascript">            Vue.component("vHeader",{//标签中必须要将驼峰法拆开写。写成<vHeader></vHeader>就不会有效果                template: "<div>这里面是模板1的内容。</div>"            });            var app1 = new Vue({                el:"#app1"            });        </script>        <hr>           <div id="app2">            <h2>模板测试2</h2>            <!-- 创建一个 to-item 组件的实例 -->            <to-item></to-item>        </div>        <div id="app22">            <h2>模板测试2-----</h2>            <!-- 创建一个 to-item 组件的实例 可以多次调用 但必须实例化-->            <to-item></to-item>        </div>        <script type="text/javascript">            Vue.component("to-item",{   //"to-item"写成"toItem"驼峰写法也行。但调用模板的时候不能用驼峰。                template: "<strong class='red'>这里是模板2内容的。</strong>"            });             //定义模板后，必须实例化，不然是不显示的，找不到Vue中的模板方法。            var app2 = new Vue({                el: "#app2"            });             var app22 = new Vue({                el: "#app22"            });        </script>        <hr>           <div id="app3">            <h2>这里是模板测试3</h2>            <ul>                <other-item v-for="todo in list" :item = "todo" :key="todo.id" :id="todo.id"></other-item>            </ul>        </div>        <script type="text/javascript">            Vue.component("other-item",{                props: ["item"],                template: "<li>{{item.title}}</li>"            });            var app3 = new Vue({                el: "#app3",                data:{                    list:[                        {id: 0,title: "文本1"},                        {id: 1,title: "文本2"},                        {id: 2,title: "文本3"}                    ]                }            });        </script>        <hr />        <div id="app4">            <h2>全局模板4</h2>            <global-component></global-component><!-- 使用自定义标签在 Vue.js 模板中插入组件，编译时，这部分内容会被替换为组件的内容 -->        </div>        <div id="app5">            <h2>全局模板4-------在全局组件定义之后调用</h2>            <!-- 这里也插入了这个组件，全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用 -->            <global-component></global-component>        </div>        <template id="global-template"> <!-- 这个模板里面只能有一个跟目录 --><!-- 此 DOM 元素的 innerHTML 作为全局注册组件的模板 -->            <div>                <h4>这里面是全局定义的组件模板内容</h4>                <div>{{msg}}</div><!-- 和普通 Vue.js 模板一样，可以进行插值 -->                <input type="text" v-model="msg" /><!-- 和普通 Vue.js 模板一样，也可以进行表单数据绑定 -->            </div>        </template>        <script type="text/javascript">            Vue.component("global-component",{            // Vue.component("globalComponent",{ //globalComponent驼峰写法也行，但引用的时候不行。  使用语法糖（只使用扩展实例选项）全局注册组件                data: function(){   //Vue 扩展实例构造器的 data 选项，必须是一个工厂函数，返回数据对象                    return {                        msg: "输入内容看看会有什么变化。"                    }                },                template: "#global-template"                //template 是模板，可以是包含 HTML 代码的字符串，也可以是 # + id，如果是 # + id，则会使用该选择子匹配的 DOM 元素的 innerHTML 作为模板            });            //在定义模板之后实例化，才有效            var app4 = new Vue({                el: "#app4"            });            var app5 = new Vue({                el: "#app5"            });        </script>        <hr />        <div id="d">            <div>1</div>            <v-h></v-h>        </div>        <div id="dd">            <div>2</div>            <v-h></v-h>        </div>        <template id="tem">            <div>                <i>11</i>                {{msg}}                <input type="text" v-model="msg" />            </div>        </template>        <script type="text/javascript">            Vue.component("vH",{                data: function(){                    return {                        msg: "hello word."                    }                },                template: "#tem"                // template: "<h6>888</h6>"            })            new Vue({                el: "#d"            });            new Vue({                el: "#dd"            });        </script>        <hr />            </body></html>
阅读全文
0 0