3

I encountered a weird syntax in a text on Vue and I don't know whether I missed some JS update on syntax from ES* or there's magic from Vue happening.

The question is, why and how, does this syntax work, without actually being a function but is more reminiscent of an object than a function?

EDIT: Thanks everybody for the quick replies, although this responses kinda answer I also wanted to know what happens, I mean: "bind" is already in the function's block, enclosing the following statements in an additional block, so if this were just a label, control would fall through like it were not there altogether. Or am I wrong? 

 new Vue({
        el: "#app",
        data(){
            return {
                welcome: "Hello world"
            }
        },
        directives: {
            styleMe(el, binding, vnode, oldVnode) {
                bind: {
                    el.style.color = "blue";
                    el.style.fontSize = "42px";
                    el.className = "text-center";
                    alert('done');
                }
            }
        }
Gigi
  • 159
  • 7
  • Please, highlight specific line of code that requires explanation. – aBiscuit Nov 06 '18 at 22:55
  • @aBiscuit I imagine it's the `bind: { ... }` part within the `styleMe` method – Phil Nov 06 '18 at 22:56
  • 1
    Looks like a [labeled block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label#Using_a_labeled_block_with_break) – Phil Nov 06 '18 at 23:00
  • Possible duplicate of [Is using labels in JavaScript bad practice?](https://stackoverflow.com/questions/4906762/is-using-labels-in-javascript-bad-practice) – Phil Nov 06 '18 at 23:03
  • Thanks everybody for the quick replies, although this responses kinda answer I also wanted to know what happens, I mean: "bind" is already in the function's block, enclosing the following statements in an additional block, so if this were just a label, control would fall through like it were not there altogether. Or am I wrong? – Gigi Nov 06 '18 at 23:18
  • @Gigi no, it will execute as if it wasn't labeled. In this case it's totally redundant. Labels are really only good for manipulating control flow. Now if something within that `bind` block were to execute `break bind`, anything after that statement but still within the block would not be executed. Again, see the very specific example here ~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label#Using_a_labeled_block_with_break – Phil Nov 07 '18 at 23:23

0 Answers0