Vue 基礎篇二

 

Vue元件

元件 (Component) 是 Vue.js 最強大的功能之一。

元件可以擴充套件 HTML 元素，封裝可重用的程式碼。是可複用的Vue例項。

元件的註冊

// html 程式碼
<div id="app">
  <my-component></my-component>
</div>
//
 
 js 程式碼
Vue.component('my-component', {
  template: '<div>A component!</div>'
})
var app = new Vue({
  el: '#app',
  data: {
       
  } 
});

全域性註冊

// html 程式碼
<div id="app">
  <my-component></my-component>
</div>
//
 
 js 程式碼
// 元件中的data必須是個函式
var Child = {
  template: '<div>A component!</div>',
  data: function() {
      return {
            name: "gao",
      }
}};

new Vue({
  // ...
  components: {
    // <my-component> 將只在父元件模板中可用
    'my-component': Child
  }
})

區域性註冊

// js 程式碼
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "點我",
        }
    },
    methods: {
        on_click(){
            alert(123)
        }
    }
});
new Vue({
    el: "#app",
})

元件中的data methods

<script>
    var my_component = {
        template: `<div><h1>{{msg}}</h1></div>`,
        data(){
            return{
                msg: "這是子元件"
            }
        }
    };
    var global_component = {
        template: `<div>
                        <h1>{{msg}}</h1>
                        <button @click="on_click">點我</button>
                        <my_component></my_component>
                    </div>`,
        data(){
            return {
                msg: "全域性元件"
            }
        },
        methods: {
            on_click() {
                alert("123")
            }
        },
        components:{
            my_component:my_component,
        }
    };
    const app = new Vue({
        el: "#app",
        data: {

        },
        components: {
            global_component: global_component,
            // my_component: my_component,
        }
    });


</script>

子元件的註冊

元件之間的通訊

我們的元件在任何地方用的時候都要是一個樣子麼~

可不可以我們給元件傳個引數~讓元件在不同的地方表現不同的狀態~

我們之前說過部落格評論@某某某，點選使用者名稱可以跳轉到該使用者站點。

這樣一個小功能，我們每次@的時候都要寫，我們可以封裝成元件，傳值即可~~

// html 程式碼
<div id="app">
    <child username="gaoxin"></child>
</div>
// js 程式碼
Vue.component('child', {
    template: `<a :href="'/user/'+ username">{{username}}</a>`,
    props: ["username"],
});


var app = new Vue({
    el: "#app",
    data:{
        name: "@gaoxin"
    }

});

父子通訊

app.$on(event, callback) 監聽當前例項上的自定義事件，事件由$emit觸發，回撥函式接收事件觸發器額外引數。

app.$emit(event, [args....])  觸發當前例項上的事件，額外引數傳給監聽器的callback回撥函式。

// html 程式碼
<div id="app">
    <parent></parent>
</div>
// js 程式碼
Vue.component('parent',{
    template: `
        <div>
            <child @show_balance="show"></child>
            <p v-if="active">您的餘額998</p>
        </div>
    `,
    data: function () {
        return {
            active: false,
        }
    },
    methods: {
        show: function(data){
            this.active=true;
            console.log(data)
        }
    }

});
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "顯示餘額",
        }
    },
    methods: {
        on_click(){
            // alert(123)
            this.$emit('show_balance', {q:1,b:2})
        }
    }
});

子父通訊

平行元件之間的通訊，喊話需要一箇中間排程器，在元件載入完成之後去監聽排程器事件，回撥函式接收資料。

// html 程式碼
<div id="app">
    <whh></whh>
    <shh></shh>
</div>
// js 程式碼
var Event = new Vue()

Vue.component('whh',{
    template: `
        <div>
            我說: <input @keyup="on_change" v-model="i_said">
        </div>
    `,
    data: function () {
        return {
            i_said: '',
        }
    },
    methods: {
        on_change: function () {
            Event.$emit("whh_said_something", this.i_said)
        }
    }
});
Vue.component('shh', {
    template: `
        <div>
            花花說:{{whh_said}}
        </div>
    `,
    data: function () {
        return {
            whh_said: '',
        }
    },
    mounted: function () {
        var me = this
        Event.$on('whh_said_something', function (data) {
            me.whh_said = data
        })
    }
});

非父子元件通訊

混合Mixins

重複功能和資料的儲存器，可以覆蓋Mixins的內容。

// 點選顯示和隱藏  提示框的顯示和隱藏
// html 程式碼
<div id="app">
    <PopUp></PopUp>
    <ToolTip></ToolTip>
</div>
// js 程式碼
var base = {
     data: function () {
        return {
            visible: false,
        }
    },
    methods: {
        show: function () {
            this.visible = true
        },
        hide: function () {
            this.visible = false
        }
    }
}

Vue.component('popup', {
    template:`
        <div>
        <button @click="show">PopUp show</button>
        <button @click="hide">PopUp hide</button>
        <div v-if="visible"><p>hello everybody</p></div>
        </div>
    `,
    mixins: [base],
    data: function () {
        return {
            visible: true,
        }
    }

});
Vue.component('tooltip', {
    template: `
        <div>
        <div @mouseenter="show" @mouseleave="hide">ToolTip</div>
        <div v-if="visible"><p>ToolTip</p></div>
        </div>
    `,
    mixins: [base]
});

new Vue({
    el: "#app",
})

Mixins

插槽 Slot

插槽是一套內容分發的API，在元件中，<slot>作為內容承載分發的出口

// html 程式碼
<div id="app">
    <panel>
        <div slot="title"> HELLO</div>
        <div slot="content">hello</div>
        
    </panel>
    <panel></panel>
    <panel></panel>
</div>

<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <!--<div class="content">Failure is probably the fortification in your pole. It is like a peek your wallet as the thief, when you are thinking how to spend several hard-won lepta,</div>-->
        <div class="footer">
            <slot name="footer">更多資訊</slot>
        </div>
    </div>
</template>
// js 程式碼
Vue.component('panel', {
    template: '#panel-tpl',

});

new Vue({
    el: "#app",
})

Slot

 

Vue元件

元件 (Component) 是 Vue.js 最強大的功能之一。

元件可以擴充套件 HTML 元素，封裝可重用的程式碼。是可複用的Vue例項。

元件的註冊

// html 程式碼
<div id="app">
  <my-component></my-component>
</div>
// js 程式碼
Vue.component('my-component', {
  template: '<div>A component!</div>'
})
var app = new Vue({
  el: '#app',
  data: {
       
  } 
});

全域性註冊

// html 程式碼
<div id="app">
  <my-component></my-component>
</div>
// js 程式碼
// 元件中的data必須是個函式
var Child = {
  template: '<div>A component!</div>',
  data: function() {
      return {
            name: "gao",
      }
}};

new Vue({
  // ...
  components: {
    // <my-component> 將只在父元件模板中可用
    'my-component': Child
  }
})

區域性註冊

// js 程式碼
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "點我",
        }
    },
    methods: {
        on_click(){
            alert(123)
        }
    }
});
new Vue({
    el: "#app",
})

元件中的data methods

<script>
    var my_component = {
        template: `<div><h1>{{msg}}</h1></div>`,
        data(){
            return{
                msg: "這是子元件"
            }
        }
    };
    var global_component = {
        template: `<div>
                        <h1>{{msg}}</h1>
                        <button @click="on_click">點我</button>
                        <my_component></my_component>
                    </div>`,
        data(){
            return {
                msg: "全域性元件"
            }
        },
        methods: {
            on_click() {
                alert("123")
            }
        },
        components:{
            my_component:my_component,
        }
    };
    const app = new Vue({
        el: "#app",
        data: {

        },
        components: {
            global_component: global_component,
            // my_component: my_component,
        }
    });


</script>

子元件的註冊

元件之間的通訊

我們的元件在任何地方用的時候都要是一個樣子麼~

可不可以我們給元件傳個引數~讓元件在不同的地方表現不同的狀態~

我們之前說過部落格評論@某某某，點選使用者名稱可以跳轉到該使用者站點。

這樣一個小功能，我們每次@的時候都要寫，我們可以封裝成元件，傳值即可~~

// html 程式碼
<div id="app">
    <child username="gaoxin"></child>
</div>
// js 程式碼
Vue.component('child', {
    template: `<a :href="'/user/'+ username">{{username}}</a>`,
    props: ["username"],
});


var app = new Vue({
    el: "#app",
    data:{
        name: "@gaoxin"
    }

});

父子通訊

app.$on(event, callback) 監聽當前例項上的自定義事件，事件由$emit觸發，回撥函式接收事件觸發器額外引數。

app.$emit(event, [args....])  觸發當前例項上的事件，額外引數傳給監聽器的callback回撥函式。

// html 程式碼
<div id="app">
    <parent></parent>
</div>
// js 程式碼
Vue.component('parent',{
    template: `
        <div>
            <child @show_balance="show"></child>
            <p v-if="active">您的餘額998</p>
        </div>
    `,
    data: function () {
        return {
            active: false,
        }
    },
    methods: {
        show: function(data){
            this.active=true;
            console.log(data)
        }
    }

});
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "顯示餘額",
        }
    },
    methods: {
        on_click(){
            // alert(123)
            this.$emit('show_balance', {q:1,b:2})
        }
    }
});

子父通訊

平行元件之間的通訊，喊話需要一箇中間排程器，在元件載入完成之後去監聽排程器事件，回撥函式接收資料。

// html 程式碼
<div id="app">
    <whh></whh>
    <shh></shh>
</div>
// js 程式碼
var Event = new Vue()

Vue.component('whh',{
    template: `
        <div>
            我說: <input @keyup="on_change" v-model="i_said">
        </div>
    `,
    data: function () {
        return {
            i_said: '',
        }
    },
    methods: {
        on_change: function () {
            Event.$emit("whh_said_something", this.i_said)
        }
    }
});
Vue.component('shh', {
    template: `
        <div>
            花花說:{{whh_said}}
        </div>
    `,
    data: function () {
        return {
            whh_said: '',
        }
    },
    mounted: function () {
        var me = this
        Event.$on('whh_said_something', function (data) {
            me.whh_said = data
        })
    }
});

非父子元件通訊

混合Mixins

重複功能和資料的儲存器，可以覆蓋Mixins的內容。

// 點選顯示和隱藏  提示框的顯示和隱藏
// html 程式碼
<div id="app">
    <PopUp></PopUp>
    <ToolTip></ToolTip>
</div>
// js 程式碼
var base = {
     data: function () {
        return {
            visible: false,
        }
    },
    methods: {
        show: function () {
            this.visible = true
        },
        hide: function () {
            this.visible = false
        }
    }
}

Vue.component('popup', {
    template:`
        <div>
        <button @click="show">PopUp show</button>
        <button @click="hide">PopUp hide</button>
        <div v-if="visible"><p>hello everybody</p></div>
        </div>
    `,
    mixins: [base],
    data: function () {
        return {
            visible: true,
        }
    }

});
Vue.component('tooltip', {
    template: `
        <div>
        <div @mouseenter="show" @mouseleave="hide">ToolTip</div>
        <div v-if="visible"><p>ToolTip</p></div>
        </div>
    `,
    mixins: [base]
});

new Vue({
    el: "#app",
})

Mixins

插槽 Slot

插槽是一套內容分發的API，在元件中，<slot>作為內容承載分發的出口

// html 程式碼
<div id="app">
    <panel>
        <div slot="title"> HELLO</div>
        <div slot="content">hello</div>
        
    </panel>
    <panel></panel>
    <panel></panel>
</div>

<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <!--<div class="content">Failure is probably the fortification in your pole. It is like a peek your wallet as the thief, when you are thinking how to spend several hard-won lepta,</div>-->
        <div class="footer">
            <slot name="footer">更多資訊</slot>
        </div>
    </div>
</template>
// js 程式碼
Vue.component('panel', {
    template: '#panel-tpl',

});

new Vue({
    el: "#app",
})

Slot