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>

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

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. vue组件定义全局方法

    1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法

  3. 详解vue组件的is特性：限制元素&动态组件

    在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...

  4. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

  5. Vue 组件4 动态组件

    动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...

  6. vue组件---动态组件&异步组件

    (1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...

  7. vue动态组件-根据数据展示特定组件

    vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <templa ...

  8. vue API 知识点（4） --- 指令、特殊 attribute 、内置组件

    一.指令 1.v-text <span v-text="msg"></span> <!-- 两种写法是一样的 --> <span>{ ...

  9. vue 动态组件的传值

    vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...

  10. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

随机推荐

  1. Laravel创建自定义 Artisan 控制台命令实例教程

    来源:http://laravelacademy.org/post/1374.html 1.入门 Laravel通过Artisan提供了强大的控制台命令来处理非浏览器业务逻辑.要查看Laravel中所 ...

  2. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  3. centos7安装桌面环境

    在命令行运行: yum groupinstall ‘GNOME Desktop’

  4. Go语言高级特性总结——Struct、Map与JSON之间的转化

    Struct与Map之间互相转换 // Struct2Map convert struct to map func Struct2Map(st interface{}) map[string]inte ...

  5. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  6. org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0

    Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/Ma ...

  7. Qt_HelloWrold

    新建工程 -> 选择Qt Gui 应用 然后点击选择 在弹出的对话框中填写名称,创建路径等信息: 点击下一步,选择该工程的编译器. 点击下一步,可以选择生成的主窗口文件.不过这里我们仅仅用简单的 ...

  8. POJ3723--Conscription(MST)WRONG

    Description Windy has a country, and he wants to build an army to protect his country. He has picked ...

  9. Northwind测试学习用数据库

    下载地址: https://northwinddatabase.codeplex.com/

  10. Q他中的乱码再理解

    Qt版本有用4的版本的也有用5的版本,并且还有windows与linux跨平台的需求. 经常出现个问题是windows的解决了,源代码放到linux上编译不通过或者中文会乱码,本文主要是得出一个解决方 ...