刚学vue，请问这里为什么需要双引号？

Question

（上一个问题不小心删掉了，用心回答的老哥们不好意思哈）
click后面的counter好像是个变量，那为什么还需要用双引号括起来呢，双引号不是用于框起字符串的吗？_(:з」∠)_

Answer 1

不管是原生js还是vue，都希望用引号将事件这个属性的内容用单引号或双引号包裹，应为引号中的内容会作为一段js语句解析，并不是单纯的一个变量；可以由多条js语句组成，用分号隔开；

比如 @click="run();num++;alert(1);";

不能主观的认为引号中的是字符串，别忘了这是.vue文件，click前面有v-on:,webpack在打包时会正确根据vue的语法规则编译这段代码。

Answer 2

用双引号括起来Vue才能识别出内容范围并解析结果.

至于你说的是变量还是字符串,看你的使用时候的写法,看下面例子

<span class="ddd"></span>   // ddd 这时候是个字符串,因为class前面没有修饰符

<span :class="ddd"></span>  // ddd 这时候是个变量,需要执行解析得到结果
<span v-bind:class="ddd"></span> // 同上

Answer 3

为了兼容 HTML 语法。
Vue 是一种 渐进式 的 web 框架，需要尽量减小对 HTML 的副作用，因此所有的 Vue 指令都以 HTML元素属性的形式嵌入，而 HTML 属性的标准格式就是 prop = "value"。
对比一下几种模板语法：

// jinjia by python for Django
{% for label,link in links %}
     <a href="{{ link }}">{{ label }}</a>
{% endfor %}
// 重指令而轻 HTML

// discuz by PHP for Discuz
<!--{if $\_G\['uid'\]}-->
    任意html语句
<!--{/if}-->
// discuz 对 HTML 的侵入性貌似最小，但写起来太长了

// Jsx by JS/TS for React
<div>
{users.map((user) => {
  return (
    <div>
      <div>姓名：{user.username}</div>
    </div>
  )
})}
</div>
// 更像 JS

当然，Vue 的双花括号会被显示在 HTML 里，这一点我就编不下去了。