vue經常使用屬性

關鍵詞：filters  | 自定義過濾器 （首字母大寫）

<p>{{ msg | capitalize }}</p>

filters: {
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}

關鍵詞：methods函數方法

關鍵詞：computed計算屬性（實現字符串反轉）

<h1>{{ message }}</h1>
<h1>{{ reversedMessage  }}</h1>
<h1>{{ reversedMessages()  }}</h1>

methods: {
    clickthing() {
        alert("hello");
    },
    reversedMessages(){
        return this.message.split('').reverse().join('');
    }
},
computed: {
    reversedMessage:function(){
        return this.message.split('').reverse().join('')
    } 
},

方法與計算屬性的對比：咱們可使用 methods 來替代 computed，效果上兩個都是同樣的，可是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。而使用 methods ，在從新渲染的時候，函數總會從新調用執行。能夠說使用 computed 性能會更好，可是若是你不但願緩存，你可使用 methods 屬性。

關鍵詞：watch 監聽屬性（監聽計數器數值的變化）

<p style = "font-size:25px;">計數器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">點我</button>

watch: {
    //newnum參數是變化會的值 oldnum參數是變化前的值
    counter:function(newnum,oldnum) {
        alert("計數器值的變化 :" + oldnum + " 變爲 " + newnum + "!")
    }
}

關鍵詞：props 接受父組件傳入的數據

<!-- 父組件 -->
<template>
    <div class="practice">
         <Footer demo="我是底部！"/> 
    </div>
</template>

<script>
import Footer from '@/components/Footer'
export default {
    name: 'Practice',
    components: {
        Footer,
    }
</script>
<!-- 子組件 -->
<template>
    <div class="Footer">
        <h1>{{ demo }}</h1>
    </div>
</template>

<script>
export default {
    name: 'Footer',
    data () {
        return {
        }
    },
    props: {
        demo: {
            type: String,
            default:"我是底部"
        }
    }
}
</script>