Vue框架（二）

今天药忘吃喽~ 2021-09-14 08:18 306阅读 0赞

**组件**  
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> </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里面如果是几个平行的元素，那么需要一个空元素将他们包起来**