Vue.js 里属性绑定数据为什么弃用 Mustache {{ }} 而改用 v-bind
kidlj · kidlj · 2016-11-18 08:30:17 +08:00 · 5147 次点击这是一个创建于 2963 天前的主题，其中的信息可能已经有所发展或是发生改变。
在 0.12 版本的时候，可以这样绑定属性与数据：
<item page={{ displayPage }}></item>
后来改成了这样：
<item v-bind:page="displayPage"></item>
现在造成有两种绑定数据的方法，一种是属性，用 v-bind ，一种是文本，用 {{ }}，而原来只要一种 {{ }} 就够了。
这样增加复杂度的改动有什么原因呢？
第 1 条附言 · 2016-11-18 10:41:38 +08:00
Solved. 见 #13, #14 楼。
第 2 条附言 · 2016-11-18 11:02:54 +08:00
 |
1
Troevil 2016-11-18 08:42:21 +08:00
没看懂 lz 的意思
当前 vue2 的用法是: 绑定变量 <item :page="displayPage"></item> 绑定文本 <item page="我是文本"></item> |
 |
2
kidlj OP @Troevil 在 Vue 0.12 的时候，绑定属性到数据（变量）是可以用 {{ }} 的：
<item page={{ displayPage }}></item> 后来在 1.0 的时候绑定属性到数据（变量）只能用 v-bind 了。 |
 |
4
yozman 2016-11-18 09:23:27 +08:00
<item v-bind:page="displayPage"></item>
如果是感觉写法啰嗦的话可以用 <item :page="displayPage"></item> |
 |
5
fy 2016-11-18 09:35:47 +08:00 via Android
解析上好区分吧，我觉得一种可能是考虑了模板渲染的实现优化，另一个是给方便给程序员看的
|
 |
7
kikyous 2016-11-18 09:47:46 +08:00
<img src = {{img_url}}>
这种浏览器会发送一个错误的 GET 请求，用 v-bind, <img :src = 'img_url'> 就不会 所以 2.0 是统一了接口，去除了不能通用的{{}} |
|
8
kikyous 2016-11-18 09:50:23 +08:00
还有在属性里面使用 {{}} 会导致很多模糊的情况，不知道该不该用{{}}
如 v-if='show' 还是 v-if={{show}} 呢？ |
 |
9
jsq2627 2016-11-18 09:54:02 +08:00
认同楼上的理由。
另一方面畸形的 HTML 可能会导致浏览器 parse 报错 |
|
10
kidlj OP @kikyous 嗯，在 0.12 的时候 v-if 确实是 v-if="show" 这种写法的，和 {{ }} 造成了分裂，可当时为什么没有统一用 v-if={{ show}} 这种写法呢。
|
|
11
kidlj OP @kikyous 还请问 <img src={{ img_url }}> 和 <img :src="img_url"> 在解析上有什么不同吗，为什么前者报错后者不报错，是跟组件生命周期有关吗？
|
 |
12
dodo20120 2016-11-18 10:04:26 +08:00
laravel 模板中就是用的{{}}, 如果用 vue 的绑定会造成问题，而且 vue 现在成了 laravel 的默认 js 框架，所以，我是这么认为的。
|
|
13
kikyous 2016-11-18 10:06:35 +08:00  1
v-if={{ show}} 没有意义，因为不可能 给 v-if 一个非变量值
而且{{}}不能用于某些属性，如 img 的 src 在 1.0 的时候我经常很疑惑某个地方该不该用{{}}， 2.0 统一不能在属性中使用{{}} ，只能用做简单的插值，简洁明了 而且{{}}在底层也是编译成指令来执行的 |
|
14
kikyous 2016-11-18 10:10:16 +08:00 1
@kidlj html 都是给浏览器引擎解析的 <img src={{ img_url }}> ，在 vue 处理 img_url 之前,浏览器会得到一个错误的 src 值，即{{ img_url }}，所以会立即发送一个 get 请求，而 :src 或者 v-bind:src 浏览器根本不认识，一个没有 src 的 img ，浏览器是不会发出请求的
|
 |
16
KingMario 2016-11-18 11:04:04 +08:00
{{ msg }} 本来就是语法糖而已， 使用到 HTML 属性的话，一方面容易出错，另一方面 增加了编译引擎的复杂度
|
 |
17
learnshare 2016-11-18 11:19:32 +08:00
@jsq2627 浏览器解析的问题可以忽略掉，因为实际产出的 HTML 都会解决掉这些不合法的语法
|
Select Language