Vue组件

来源：互联网发布：1个域名指向多个ip 编辑：程序博客网时间：2024/05/02 00:53

全局组件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/vue1.0.js"></script>    <script>        //全局组件        var AAA = Vue.extend({            template:'<h3>这是标题</h3>'        });        Vue.component('aaa',AAA);        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{}            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/vue1.0.js"></script>    <script>        Vue.component('aaa',{            template:'<h3>这是标题</h3>'        });        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{}            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

局部组件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/vue1.0.js"></script>    <script>        var Aaa = Vue.extend({            template:'<h3>{{msg}}</h3>',            data(){                return{                    msg:'dddddd'                }            }        });        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    dSign:true                },                //局部组件                components:{                    aaa:Aaa                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/vue1.0.js"></script>    <script>        Vue.component('aaa',{            template:'<strong>标题</strong>'        });        window.onload = function(){            var vm = new Vue({                el:'#box',                components:{                    aaa:{                        template:'<h2>文字文字</h2>'                    }                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/vue1.0.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                components:{                    'aaa':{                        data(){                            return {                                msg:'文字文字'                            }                        },                        methods:{                            change(){                                this.msg = '改变了'                            }                        },                        template:'<h2 @clcik="change">标题-》{{msg}}</h2>'                    }                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

组件的其他形式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <!--<script src="../js/Vue.js"></script>-->    <script src="../js/vue1.0.js"></script>    <script>        //全局组件        window.onload = function(){            var Aaa = Vue.extend({                //data必须是函数形式，return返回的必须是json格式                data(){                    return {                        msg:'这是标题'                    };                },                methods:{                    change(){                        this.msg='点击后改变了的文字'                    }                },                template:'<h3 @click="change">{{msg}}</h3>'            });            Vue.component('aaa',Aaa);            var vm = new Vue({                el:'#box',                data:{                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                components:{                    aaa:{                        data(){                            return {                                msg:'welcome vue'                            }                        },                        methods:{                            change(){                                this.msg = 'changed';                            }                        },                        template:'<h2 @click="change">标题->{{msg}}</h2>'                    }                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

动态组件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    a:'aaa'                },                components:{                    aaa: {                        template:'<h2>这是aaa标签</h2>'                    },                    bbb:{                        template:'<h2>这是bbb标签</h2>'                    }                }            });        }    </script></head><body><div id="box">    <input type="button" @click="a='aaa'" value="aaa组件">    <input type="button" @click="a='bbb'" value="bbb组件">    <component :is="a"></component></div></body></html>

0 0