vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

一、定义一个组件

定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
    template:‘<h3>我是标题3</h3>‘
});

Vue.component(‘aaa‘,Aaa);

    *组件里面放数据:
        data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
    放到某个组件内部
var vm=new Vue({
    el:‘#box‘,
    data:{
        bSign:true
    },
    components:{ //局部组件
        aaa:Aaa
    }
});

1. 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            template:‘<h3>我是标题3</h3>‘
        });

        Vue.component(‘aaa‘,Aaa);

        var vm=new Vue({
            el:‘#box‘,
            data:{
                bSign:true
            }
        });

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <script>　　　　//另外一种写法，全局
        Vue.component(‘my-aaa‘,{
            template:‘<strong>好</strong>‘
        });

        var vm=new Vue({
            el:‘#box‘
        });

    </script>
</body>
</html>

组件里面放数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            //组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
            data(){
                return {
                    msg:‘我是标题^^‘
                };
            },
            methods:{
                change(){
                    this.msg=‘changed‘
                }
            },
            template:‘<h3 @click="change">{{msg}}</h3>‘
        });
        Vue.component(‘aaa‘,Aaa);//放在这里是全局
        var vm=new Vue({
            el:‘#box‘,
            data:{
                bSign:true
            }
        });
    </script>
</body>
</html>

2. 局部组件
放到某个组件内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
        <br/>
        <br/>
        <my-aaa></my-aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            template:‘<h3>{{msg}}</h3>‘,
            data(){
                return {
                    msg:‘ddddd‘
                }
            }
        });
        var vm=new Vue({
            el:‘#box‘,
            data:{
                bSign:true
            },
            components:{ //局部组件
                aaa:Aaa,
                ‘my-aaa‘:Aaa//这里的my-aaa需要用引号
            }
        });
    </script>
</body>
</html>

另外一种写法，局部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <script>
        var vm=new Vue({
            el:‘#box‘,
            components:{
                ‘my-aaa‘:{
                    data(){
                        return {
                            msg:‘welcome vue‘
                        }
                    },
                    methods:{
                        change(){
                            this.msg=‘changed‘;
                        }
                    },
                    template:‘<h2 @click="change">标题2->{{msg}}</h2>‘
                }
            }
        });

    </script>
</body>
</html>

 二、配合模板

配合模板:
    1. template:‘<h2 @click="change">标题2->{{msg}}</h2>‘

    2. 单独放到某个地方
        a). <script type="x-template" id="aaa">
            <h2 @click="change">标题2->{{msg}}</h2>
        </script>
        b). <template id="aaa">
            <h1>标题1</h1>
            <ul>
                <li v-for="val in arr">
                    {{val}}
                </li>
            </ul>
        </template>

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <script type="x-template" id="aaa">
        <h2 @click="change">标题2->{{msg}}</h2>
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>3333</li>
            <li>1111</li>
        </ul>
    </script>

    <script>
        var vm=new Vue({
            el:‘#box‘,
            components:{
                ‘my-aaa‘:{
                    data(){
                        return {
                            msg:‘welcome vue‘
                        }
                    },
                    methods:{
                        change(){
                            this.msg=‘changed‘;
                        }
                    },
                    template:‘#aaa‘
                }
            }
        });
    </script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <template id="aaa">
        <h1 @click="change">{{msg}}</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>
    <script>
        var vm=new Vue({
            el:‘#box‘,
            components:{
                ‘my-aaa‘:{
                    data(){
                        return {
                            msg:‘welcome vue‘,
                            arr:[‘apple‘,‘banana‘,‘orange‘]
                        }
                    },
                    methods:{
                        change(){
                            this.msg=‘changed title‘;
                        }
                    },
                    template:‘#aaa‘
                }
            }
        });
    </script>
</body>
</html>

三、动态组件

动态组件:
<component :is="组件名称"></component>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</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>
        <!--<component :is="组件名称"></component>-->
    </div>
    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:‘aaa‘
            },
            components:{
                ‘aaa‘:{
                    template:‘<h2>我是aaa组件</h2>‘
                },
                ‘bbb‘:{
                    template:‘<h2>我是bbb组件</h2>‘
                }
            }
        });
    </script>
</body>
</html>

时间： 2024-10-13 03:15:58

vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件的相关文章

0810 vue 创建组件模板动态组件传值

lesson10 1.demo vue样本 <body> <div id="myApp"> </div> </body> <script> new Vue({ el:"#myApp", data:{}, methods:{}, computed:{}, filters:{} }) </script> 2.案例: 模拟百度搜索框 <!DOCTYPE html> <html

VUE动态组件component以及<keep-alive>

component 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-U

vue.2.0-自定义全局组件

App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> <Loading></Loading>  </div> </template> main.js import Vue from 'vue' import App fro

vue定义全局组件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> </head> <

Vue组件的全局注册

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 使用 <div id="components-demo"> <but

Vue组件之全局组件与局部组件

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><

vue - 单文件组件定义与使用

1.组件的定义 <template name="组件名称"> <view> ...... </view> </template> <script> export default { name: "组件名称", //组件外层属性 props: { 属性名称: { type: String,//属性类型 value: "值" }, ...... }, //组件生命周期 created:fun