你如何设计VueJS组件？

Question

Vue的初学者 - 所以对此有些愚蠢或者我错过了一些东西;但我假设你能够定位自定义元素，IE：

my-element {styles go here}

但是，当我创建一个元素时，我似乎只能定位它包含的元素。 EG - 我创建了一个nav-bar元素（下图），但我只能在其中设置实际的nav / img / a元素的样式 - 就像通常情况下那样，如果有意义的话？

Vue.component
('nav-bar', {
            template:   '<nav>'+
                        '<img src="" alt="header-logo">'+
                        '<div class="ui-component">'+
                        '<input type="text">'+
                        '<a href="#">logout</a>'+
                        '</div>'+
                        '</nav>'
        });
        var nav = new Vue({
            el: '#nav'
        });

我错过了什么，或者你只能在网页元素中设置样式而不是vue中的自定义元素？

Answer 1

如果你已经创建了一个nav-bar组件，你可以简单地将一个类分配给你的自定义组件进行样式设置，如下所示：

<nav-bar class="my-css-selector"></nav-bar>

这是向自定义元素添加选择器的完全合法方式。

Answer 2

如果你使用single-file components，你可以只为组件编写CSS，他们称之为scoped CSS。不要把它与obsolete css scoped attribute混淆;这是一个Vue功能。