> just shorthand
> accept regular javascript... The only exception is... but it is close enough to ES6
So you basically validated all I've said. And it's also incomplete. Because the amount of gotchas and things that you have to constantly keep in mind in Vue is mind-boggling compared to JSX. Because JSX is a paper-thin wrapper on top of React.createComponent, and goes out of its way to keep everything in Javascript. Unlike Vue.
Lets see your defence:
- : and @ as shorthands
It means new syntax that you have to learn, and know differences between. For all intents and purposes Vue has three different types html-like attributes. JSX has only one: javascript names.
- v-bind etc. accepting regular Javascript
Let's see how this is false:
This is not Javascript. If it was, it would assign the result of the function call to @click. It doesn't. It's a Javascript-like scripting language that has magical binding into regular Javascript.
- exception is v-for, as you mentioned, but it is close enough to ES6 for syntax to make sense
So, it's not Javascript (unlike some other places where it is Javascript), and it's not ES6 syntax, but it's "close enough to ES6". So it's not. It's a different Javascript-like scripting language.
The only place where Vue allows regular unadulterated Javascript is inside curly braces: {{}}. And there it only allows expressions (Note: JSX also only allows expressions inside curly braces).
However. Even there it's not Javascript. Not really:
{{ record.commit.message | truncate }}
Valid Vue. Invalid Javascript.
- You mean the script part of components? Do you have any examples of that?
Of course. See inline comments. Example from here: https://vuejs.org/v2/examples/tree-view.html
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
// `this.model` magically hoisted into `this`
// from `object.props.model`
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
// `this.isFolder` magically hoisted into `this` from
// `object.computed.isFolder`
if (this.isFolder) {
// `this.open` magically hoisted into `this` from
// `object.data` which is a function that
// returns an object whose keys and values are hoisted
// into `this`
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
// this.open can be set directly. Magic
// this.model.children cannot. Not magic
Vue.set(this.model, 'children', [])
// `this.addChild` magically hoisted into `this` from
// `object.methods.addChild`
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})