Make .vue more expressive

[CarterLi]

Say I want to join two lists ( fooList and barList ) in vue template

Currently we can only write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).num" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text2" />
  </li>
</ul>

barList.find() is in v-for, so computed won't work here. Moving them into a new component works but that's a new topic.

In JSX we can write

<ul>
{
  fooList.map(foo => {
    const bar = barList.find(bar => bar.barId === foo.barId);
    return [
      <li v-text={foo.num} />
      <li v-text={foo.text} />
      <li v-text={bar.num} />
      <li v-text={bar.text} />
      <li v-text={bar.text2} />
    ];
  })
}
</ul>

If we can create new variables in Vue template like what we can do in JSX, we can write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const bar = barList.find(bar => bar.barId === foo.barId);
    </script>
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="bar.num" />
    <li v-text="bar.text" />
    <li v-text="bar.text2" />
  </li>
</ul>

It's not only cleaner, but also more efficient.

---

Another example:

<ul>
  <li v-for="item of list" :key="item.id">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const inputRef = ref<HTMLInputElement>():
    </script>
    
    <input v-model="item.text" :ref="x => inputRef = x" />
    <button @click="inputRef.focus()">Focus this line</button>
  </li>
</ul>

For now I would rather use $event.currentTarget.previousElementSibling than the standard ref stuff

---

Moved from Github duscussion: vuejs/core#5902 (comment)

[leopiccionia]

Duplicate of #73?