[Exuma]

Vue is brilliant when you actually use it. Nothing you've mentioned is remotely ever a problem in my experience. Also :href="xxx" isn't a string, that is javascript in there.

You won't ever have more than 10 characters at most in an attribute, and if you do you make a method for it and call the method.

The other alternative is JSX type stuff in react where you are injecting full JS into the templates which is like committing seppuku to me. Vue is so much nicer to use than react IMO, and I've used both extensively.

[zkldi]

> :href="xxx" isn't a string, that is javascript in there.

This is the part I don't really follow, though. Technically:

    <a href="print(1//3)"></a>

href here isn't a string, it's python, but it's stored as a string, representing python. In the :href example for JS, that's not JS - an engine isn't seeing that - that's a string that is evaluated as JS at some point in the vue lifecycle.

[Exuma]

Without refreshing my knowledge on it, I don't think it's actually a string. A <template> block is actually a "single file component" which is a special vue plugin/loader/whatever for webpack. It compiles template/script/style tags into a single compiled version.

I'm like 60% sure that your "string' example is never run in production. So I believe that it gets compiled before vue even sees it (at build time, or dev-server compile time) into the standard method that vue is used to... a vue component:

    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

https://v3.vuejs.org/guide/single-file-component.html

[zkldi]

Then that sounds pretty good that it's not ran in production and compiled out!

I guess my remaining alien issue is that the DSL for Vue is a mish-mash of JS, custom syntax, dom attribute context and possibly more?

[Exuma]

I think it won't really make sense until you try the alternatives. I've used react since it's inception, vue, ember, angular (going back all the way to angular 1), knockout, etc etc etc.

All these frameworks try to solve what you're mentioning in different ways.

Obviously people have different opinions, but after seeing the way things are done from all these different frameworks, Vue is extremely "clean" and minimal feeling, while remaining extremely flexible. I have built multiple very complicated apps and there's nothing that I'm not absolutely DELIGHTED how it's solved, especially with the new composition API. It feels extremely elegant compared to the other ones I've mentioned.

Perhaps consider the alternatives, and you most certainly will have a much worse development experience if you're not willing to play ball with 2-way data binding (ie use html attributes to bind things, etc). As I said, other frameworks have tried other methods to minimize attribute use and they're excruciating to use. Ember is literally one of the most painful frameworks I've ever used to do even the most simple of things.

[lenkite]

Vue template HTML can be parsed by an HTML parser - lots of them available. Can you do that with JSX ? Personally, I find JSX is more of an "alien" than Vue template HTML.

[zkldi]

Well, no, because JSX is meant to be parsed by a JS parser and not a HTML parser.

[likeclockwork]

It's not stored anywhere. You seem to be upset that it's written with quotes around it. Are you aware that most computer programs are just text?

[zkldi]

Yes.

[lenkite]

Not exactly. Template are first compiled to a render function. https://medium.com/glovo-engineering/dissecting-vue-3-templa...

Vue first parses the template into an AST in a process known as the template parsing:

    function compile(template) {
     const ast = parse(template)
     transform(ast, transformations)
     return generate(ast)
    }