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>

 

转载于:https://www.cnblogs.com/liluning/p/10435718.html