天天看點
傳回

Vue06-計算屬性、内容分發、自定義事件

1、什麼是計算屬性

計算屬性的重點突出在

屬性

兩個字上（屬性是名詞），首先它是個

屬性

其次這個屬性有

計算

的能力（計算是動詞），這裡的

計算

就是個函數：簡單點說，它就是一個能夠将計算結果緩存起來的屬性（将行為轉化成了靜态的屬性），僅此而已；可以想象為緩存！

上代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性computed</title>
</head>
<body>
<!--view層 模闆-->
<div id="app">
    <p>currentTime1=>{{currentTime1()}}</p>
    <p>currentTime2=>{{currentTime2}}</p>
</div>

<!--1.導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message : "hello,edgar!"
        },
        methods: {
            currentTime1: function () {
                return Date.now(); // 傳回一個時間戳
            }
        },
        computed:{ // 計算屬性: methods，computed不能重名，重名之後，隻會調用methods的方法
            currentTime2: function () {
                this.message;
                return Date.now(); // 傳回一個時間戳
            }
        }
    });
</script>
</body>
</html>

注意：methods和computed裡的東西不能重名

說明：

  • methods：定義方法，調用方法使用currentTime1()，需要帶括号
  • computed：定義計算屬性，調用屬性使用currentTime2，不需要帶括号；this.message是為了能夠讓currentTime2觀察到資料變化而變化
  • 如果在方法中的值發生了變化，則緩存就會重新整理!可以在控制台使用

    vm.message=”edgar"

     ， 改變下資料的值，再次測試觀察效果

結論：

調用方法時，每次都需要進行計算，既然有計算過程則必定産生系統開銷，那如果這個結果不經常變化的呢？此時就可以考慮将這個結果緩存起來，采用計算屬性可以很友善的做到這點，計算屬性的主要特性就是為了将不經常變化的計算結果進行緩存，以節約我們的系統開銷；

2、内容分發

在

Vue.js

中我們使用

<slot>

元素作為承載分發内容的出口，作者稱其為插槽，可以應用在組合元件的場景中；

測試

比如準備制作一個待辦事項元件（todo），該元件由待辦标題（todo-title）和待辦内容（todo-items）組成，但這三個元件又是互相獨立的，該如何操作呢？

第一步：定義一個待辦事項的元件

<div id="app">
    <todo></todo>
</div>
<!--1.導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    Vue.component('todo',{
        template:
       		'<div>\
                <div>待辦标題</div>\
                <ul>\
                    <li>待辦内容</li>\
                </ul>\
            </div>'
    })
</script>

第二步：我們需要讓待辦事項元件的标題和内容實作動态綁定，怎麼做呢？我們可以留一個插槽！

1、将上面的代碼留出一個插槽，即 slot

<script>
	Vue.component("todo", {
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    })
</script>

2、定義一個名為 todo-title 的待辦标題元件和 todo-items 的待辦内容元件

<script>
	Vue.component("todo-title", {
    	props: ['title'],
    	template: '<div>{{title}}</div>'
	})
    
    Vue.component("todo-items", {
    	props: ['item'],
    	template: '<li>{{item}}</li>'
	})
<script>

3、執行個體化 Vue 并初始化資料

<script>
var vm = new Vue({
    el: "#app",
    data: {
        title: "edgar學習系列課程",
        todoitems: ['edgar學Java', 'edgar學Linux', 'edgar學前端']
    }
});
<script>

4、将這些值通過插槽插入

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" :item="item"></todo-items>
    </todo>
</div>

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view層 模闆-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" :item="item"></todo-items>
    </todo>
</div>

<!--1.導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    // slot：插槽
    Vue.component("todo", {
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'

    })

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            title: "edgar學習系列課程",
            todoitems: ['edgar學Java', 'edgar學Linux', 'edgar學前端']
        }
    });
</script>
</body>
</html>

我們的

todo-title

和

todo-items

元件分别被分發到了

todo

元件的 todo-title 和 todo-items 插槽中。

3、自定義事件

通過以上代碼不難發現，資料項在 Vue 執行個體中，但删除操作要在元件中完成，那麼元件如何才能删除 Vue 執行個體中的資料呢？此時就涉及到參數傳遞與事件分發了，Vue 為我們提供了自定義事件的功能，很好的幫助我們解決了這個問題；使用 this.$emit('自定義事件名', 參數)，操作過程如下：

1、在Vue的執行個體中增加了methods對象并定義了一個名為removeItems的方法

<script>
var vm = new Vue({
    el: "#app",
    data: {
        title: "edgar學習系列課程",
        todoitems: ['edgar學Java', 'edgar學Linux', 'edgar學前端']
    },
    methods: {
        removeItems: function (index) {
            console.log("删除了" + this.todoitems[index] + "OK")
            this.todoitems.splice(index, 1);// 一次删除一個元素
        }
    }
});
</script>

2、修改todo-items待辦内容元件的代碼，增加一個删除按鈕，并且綁定事件！

<script>
// 這裡的index，就是數組的下标，使用for循環周遊的時候，可以循環出來！    
Vue.component("todo-items", {
    props: ['item', 'index'],
    // 隻能綁定目前元件的方法
    template: '<li>{{index}}----{{item}}<button @click="remove">删除</button></li>',
    methods: {
        remove: function () {
            // this.$emit自定義事件分發
            this.$emit('remove', this.index)
        }
    }
})
</script>

3、修改todo-items待辦内容元件的HTML代碼，增加一個自定義事件，比如叫remove，可以群組件的方法綁定，然後綁定到Vue執行個體的方法！

<!--增加了v-on:remove="removeItems(index)"自定義事件，該元件會調用Vue執行個體中定義的removeItems方法-->
<todo-items slot="todo-items" v-for="(item,index) in todoitems"
            :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>

對上一個代碼進行修改，實作删除功能,完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view層 模闆-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--增加了v-on:remove="removeItems(index)"自定義事件，該元件會調用Vue執行個體中定義的removeItems方法-->
        <todo-items slot="todo-items" v-for="(item,index) in todoitems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<!--1.導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    // slot：插槽
    Vue.component("todo", {
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'

    })

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    })

    // 這裡的index，就是數組的下标，使用for循環周遊的時候，可以循環出來！
    Vue.component("todo-items", {
        props: ['item', 'index'],
        // 隻能綁定目前元件的方法
        template: '<li>{{index}}----{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function () {
                // this.$emit自定義事件分發
                this.$emit('remove', this.index)
            }
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {
            title: "edgar學習系列課程",
            todoitems: ['edgar學Java', 'edgar學Linux', 'edgar學前端']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了" + this.todoitems[index] + "OK")
                this.todoitems.splice(index, 1);// 一次删除一個元素
            }
        }
    });
</script>
</body>
</html>

邏輯了解

Vue06-計算屬性、内容分發、自定義事件

4、Vue入門小結

核心：資料驅動，元件化

優點：借鑒了 AngularJS 的子產品化開發和 React 的虛拟Dom，虛拟Dom就是把Dom操作放到記憶體中執行；

常用屬性：

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on 綁定事件，簡寫

    @
  • v-model 資料雙向綁定
  • v-bind 給元件綁定參數，簡寫

    :

元件化：

  • 組合元件 slot 插槽
  • 元件内部綁定事件需要使用到

    this.$emit('自定義事件名', 參數)
  • 計算屬性的特色，緩存計算資料

遵循Soc 關注度分離原則，Vue是存粹的試圖架構，并不包含，比如Ajax之類的通信功能，為了解決通信問題，我們需要使用 Axios 架構做異步通信；

說明

Vue的開發都是要基于NodeJS，實際開發采用 vue-cli腳手架開發，vue-router 路由，vuex做狀态管理；Vue UI界面我們一般使用 ElementUI（餓了麼出品），或者ICE（阿裡巴巴出品！）來快速搭建前端項目~

上一篇: Java的volatile到底該如何了解？（下）記憶體屏障
下一篇: Openjudge 1.13-21:最大質因子序列