Vue.js 里属性绑定数据为什么弃用 Mustache {{ }} 而改用 v-bind
kidlj kidlj 2016-11-18 08:30:17 +08:00 5583 次点击这是一个创建于 3313 天前的主题，其中的信息可能已经有所发展或是发生改变。
在 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