Vue.js 里属性绑定数据为什么弃用 Mustache {{ }} 而改用 v-bind

[kidlj]

在 0.12 版本的时候，可以这样绑定属性与数据：

<item page={{ displayPage }}></item>

后来改成了这样：

<item v-bind:page="displayPage"></item>

现在造成有两种绑定数据的方法，一种是属性，用 v-bind ，一种是文本，用 {{ }}，而原来只要一种 {{ }} 就够了。

这样增加复杂度的改动有什么原因呢？

[Troevil]

没看懂 lz 的意思
当前 vue2 的用法是:
绑定变量
<item :page="displayPage"></item>
绑定文本
<item page="我是文本"></item>

[kidlj]

@Troevil 在 Vue 0.12 的时候，绑定属性到数据（变量）是可以用 {{ }} 的：

<item page={{ displayPage }}></item>

后来在 1.0 的时候绑定属性到数据（变量）只能用 v-bind 了。

[yozman]

@kidlj
没毛病

[yozman]

<item v-bind:page="displayPage"></item>
如果是感觉写法啰嗦的话可以用
<item :page="displayPage"></item>

[fy]

解析上好区分吧，我觉得一种可能是考虑了模板渲染的实现优化，另一个是给方便给程序员看的

[kidlj]

@yozman 嗯嗯，知道可以这样简写。只是想知道为什么原来用一种 {{ }} 就可以完成的事情为什么分化成了两种？

[kikyous]

<img src = {{img_url}}>

这种浏览器会发送一个错误的 GET 请求，用 v-bind, <img :src = 'img_url'> 就不会

所以 2.0 是统一了接口，去除了不能通用的{{}}

[kikyous]

还有在属性里面使用 {{}} 会导致很多模糊的情况，不知道该不该用{{}}

如 v-if='show' 还是 v-if={{show}} 呢？

[jsq2627]

认同楼上的理由。
另一方面畸形的 HTML 可能会导致浏览器 parse 报错

[kidlj]

@kikyous 嗯，在 0.12 的时候 v-if 确实是 v-if="show" 这种写法的，和 {{ }} 造成了分裂，可当时为什么没有统一用 v-if={{ show}} 这种写法呢。

[kidlj]

@kikyous 还请问 <img src={{ img_url }}> 和 <img :src="img_url"> 在解析上有什么不同吗，为什么前者报错后者不报错，是跟组件生命周期有关吗？

[dodo20120]

laravel 模板中就是用的{{}}, 如果用 vue 的绑定会造成问题，而且 vue 现在成了 laravel 的默认 js 框架，所以，我是这么认为的。

[kikyous]

v-if={{ show}} 没有意义，因为不可能 给 v-if 一个非变量值

而且{{}}不能用于某些属性，如 img 的 src

在 1.0 的时候我经常很疑惑某个地方该不该用{{}}， 2.0 统一不能在属性中使用{{}} ，只能用做简单的插值，简洁明了

而且{{}}在底层也是编译成指令来执行的

[kikyous]

@kidlj html 都是给浏览器引擎解析的 <img src={{ img_url }}> ，在 vue 处理 img_url 之前,浏览器会得到一个错误的 src 值，即{{ img_url }}，所以会立即发送一个 get 请求，而 :src 或者 v-bind:src 浏览器根本不认识，一个没有 src 的 img ，浏览器是不会发出请求的

[kidlj]

@kikyous 赞，谢谢。已解惑 :)

[KingMario]

{{ msg }} 本来就是语法糖而已， 使用到 HTML 属性的话，一方面容易出错，另一方面 增加了编译引擎的复杂度

[learnshare]

@jsq2627 浏览器解析的问题可以忽略掉，因为实际产出的 HTML 都会解决掉这些不合法的语法