Vue: ES6 template string

[yukulele]

Vue.js don't support es6 template string

<div :style="{transform:`rotate(${angle}deg)`}">

example:
http://codepen.io/yukulele/pen/KVLKoO

[posva]

I don't know if this can be easily implemented but, why should vue support an es6 feature, knowing that it isn't yet supported on most mobile devices (http://kangax.github.io/compat-table/es6/#test-template_strings)?

[yyx990803]

Note the fix only handles expression getter generation - it would still only work in Browsers that support template strings natively.

[yukulele]

thank you!

It works but only support one placeholder

it works for my first exemple,

<div :style="{transform:`rotate(${angle}deg)`}">

but not this one

<div :style="{transform:`translate(${x}px, ${y}px)`}">

[jankjn]

@yukulele Looks 1.0 still not support multi placeholder template string but 2.0 fix this
@yyx990803 Hope to fix this in 1.0, thanks.

[yukulele]

It works !
http://codepen.io/yukulele/pen/KVLKoO

thank you !

[booxood]

Mark...

[jingsam]

We can not use expressions with ES6 syntax in templates unless browsers support it, for the reason that babel can not extract out these expressions and transform them into ES5.

As I know, in vue 2.0, we can precompile templates into rendering functions in the backend. So, I want to know if it is possible to use babel to transform ES6 expressions into ES5? How do you think about it? @yyx990803 @posva

[jingsam]

I made a simple test with Vue 2.0. I noticed that babel can properly transform ES6 expressions into ES5. It's great and one more benefits to use Vue 2.0 instead of Vue 1.0. Sorry to disturb.

[gaby64]

filters dont work inside an es6 template string

<a :href="`/url/${test | myfilter}`">

[posva]

@gaby64 filters can only be used at the end of the expression: https://vuejs.org/v2/guide/filters.html

Locking this very old thread