Vue框架（二）

来源：互联网发布：js windows.onload 编辑：程序博客网时间：2024/06/09 20:15

组件
vue的核心思想：
数据化驱动
组件化开发：最强大的核心功能之一，组件可以扩展 HTML 元素，封装可重用的代码。
组件（component）
1 定义组件
a全局定义
a)
扩展组件

    <!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" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="lib/bootstrap-v4/css/bootstrap.css"></head><body>    <div id="app1" class="container">        <div-app></div-app>    </div>    <div id="app2" class="container">        <div-app></div-app>        <div-app></div-app>        <div-app></div-app>        <div-app></div-app>        <div-app></div-app>    </div></body><script src="lib/vue/vue-v2.js"></script><script>    //扩展了模板    var component = Vue.extend({        template: '<div class="alert alert-primary">hello world</div>'    });    //注册组件    Vue.component('div-app', component);    //挂载到实例上面去    new Vue({        el: '#app1'    });    new Vue({        el: '#app2'    })</script></html>

   Vue.component('div-app', {        //template:模板属性，用来放置你需要封装的html代码        template:`        <div class="alert alert-secondary" role="alert">            This is a secondary alert—check it out!        </div>        `    });

b局部定义
a)

      new Vue({        el: '#app1',        components: {            'div-app': {                template: `<div class="alert alert-secondary" role="alert"></div>`,            }        }    });

例：

<!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" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="lib/bootstrap-v4/css/bootstrap.css"></head><body>    <div id="app1" class="container">        <div-app></div-app>    </div>    <div id="app2" class="container">        <!-- <div-app></div-app> -->    </div></body><script src="lib/vue/vue-v2.js"></script><script>    //挂载到实例上面去    new Vue({        el: '#app1',        components: {            'div-app': {                template: `                    <div class="alert alert-secondary" role="alert">                        {{msg}}                        <button class="btn btn-warning" @click="sunbian">戳我</button>                        <ul>                            <li v-for="(item,index) in arr" :key="index">{{item}}</li>                        </ul>                    </div>`,                data:function(){                    return {                        msg:'This is a secondary alert—check it out!',                        arr:[1111,222,333333,333333]                    }                },                methods:{                    sunbian:function(){                        alert(11111);                    }                }            }        }    });    new Vue({        el: '#app2'    })</script></html>

     var div = {        template: `<div class="alert alert-secondary" role="alert"></div>`,    };    new Vue({        el: '#app1',        components: {            'div-app': div        }    });

c):通过template标签，结构层和行为层分离，（强烈推荐）
例1：

<!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" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="lib/bootstrap-v4/css/bootstrap.css"></head><body>    <div id="app1" class="container">        <div-app></div-app>    </div>    <template id="app">        <div class="alert alert-secondary" role="alert">            {{msg}}            <button class="btn btn-warning" @click="sunbian">戳我</button>            <ul>                <li v-for="item in arr">{{item}}</li>            </ul>        </div>    </template></body><script src="lib/vue/vue-v2.js"></script><script>    //挂载到实例上面去    new Vue({        el: '#app1',        components: {            'div-app': {                template: '#app',                data: function () {                    return {                        msg: 'This is a secondary alert—check it out!',                        arr: [1111, 222, 333333, 333333]                    }                },                methods: {                    sunbian: function () {                        alert(11111);                    }                }            }        }    });</script></html>

例2，父子组件

<!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" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="lib/bootstrap-v4/css/bootstrap.css"></head><body>    <div id="app1" class="container">        <div-app></div-app>    </div>    <template id="app">        <div class="alert alert-success" role="alert">            {{msg}}            <button class="btn btn-warning" @click="sunbian">戳我</button>            <ul>                <li v-for="item in arr">{{item}}</li>            </ul>            <h1-app></h1-app>        </div>    </template>    <template id="h1">        <div class="jumbotron jumbotron-fluid">            <div class="container">                <h1 class="display-3">{{msg}}</h1>                <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>            </div>        </div>    </template></body><script src="lib/vue/vue-v2.js"></script><script>    new Vue({        el: '#app1',        components: {            //父组件            'div-app': {                template: '#app',                data: function () {                    return {                        msg: 'This is a secondary alert—check it out!',                        arr: [1111, 222, 333333, 333333]                    }                },                methods: {                    sunbian: function () {                        alert(11111);                    }                },                components: {                    //子组件                    'h1-app': {                        template: '#h1',                        data: function () {                            return {                                msg: '呵呵哒'                            }                        }                    }                }            }        }    });</script></html>

ps:
1 组件里面的data必须通过函数来定义，并且通过return返回数据源
2 在template里面如果是几个平行的元素，那么需要一个空元素将他们包起来

阅读全文

0 0