tomcuper

每个组件都可以有自己的data、methods、computed和您之前看到的所有内容—就像Vue实例本身一样。

您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象,而组件上的数据属性是一个函数。这是因为您可以在同一个页面上多次使用组件,而且您可能不希望它们共享数据对象

 

【前端全套视频教程】https://m.tb.cn/h.eR5xKOJ  点击链接,再选择浏览器咑閞;或椱ァ製这段描述¥EgZvYRaMUoS¥后到><

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title></title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div id="app">
            <custom-button></custom-button>
            
            <my-button></my-button>
        </div>
        <script>
            //全局定义组件
            Vue.component('my-button',{
                template:'<button v-on:click="showNumbers">this is my button {{positiveNumbers}}</button>',
                data(){
                    return {
                        numbers:[1,-2,3,-4,-5,6]
                    }
                },
                computed: {
                    //获取正数数组
                    positiveNumbers() {
                        return this.numbers.filter(function(number){
                            if(number>0){
                                return number;
                            }
                        });
                    }
                },
                methods:{
                    showNumbers(){
                        alert(this.numbers);
                    }
                }
            });
            
            var app = new Vue({
                el: '#app',
                data: {
                    isVisible:true,
                }
                
            });
        </script>
    </body>
</html>

分类:

vue

技术点:

web

相关文章: