V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kidlj
V2EX  ›  Vue.js

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

  •  
  •   kidlj ·
    kidlj · 2016-11-18 08:30:17 +08:00 · 5136 次点击
    这是一个创建于 2955 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 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
    这里是 Vue.js 中文圈,大家可以加进来,畅所欲言。(聊天形式)

    https://gitter.im/Vuejs-Chinese/Vue
    17 条回复    2016-11-18 11:19:32 +08:00
    Troevil
        1
    Troevil  
       2016-11-18 08:42:21 +08:00
    没看懂 lz 的意思
    当前 vue2 的用法是:
    绑定变量
    <item :page="displayPage"></item>
    绑定文本
    <item page="我是文本"></item>
    kidlj
        2
    kidlj  
    OP
       2016-11-18 08:44:34 +08:00
    @Troevil 在 Vue 0.12 的时候,绑定属性到数据(变量)是可以用 {{ }} 的:

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

    后来在 1.0 的时候绑定属性到数据(变量)只能用 v-bind 了。
    yozman
        3
    yozman  
       2016-11-18 09:22:57 +08:00
    @kidlj
    没毛病
    yozman
        4
    yozman  
       2016-11-18 09:23:27 +08:00
    <item v-bind:page="displayPage"></item>
    如果是感觉写法啰嗦的话可以用
    <item :page="displayPage"></item>
    fy
        5
    fy  
       2016-11-18 09:35:47 +08:00 via Android
    解析上好区分吧,我觉得一种可能是考虑了模板渲染的实现优化,另一个是给方便给程序员看的
    kidlj
        6
    kidlj  
    OP
       2016-11-18 09:36:05 +08:00
    @yozman 嗯嗯,知道可以这样简写。只是想知道为什么原来用一种 {{ }} 就可以完成的事情为什么分化成了两种?
    kikyous
        7
    kikyous  
       2016-11-18 09:47:46 +08:00
    <img src = {{img_url}}>

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

    所以 2.0 是统一了接口,去除了不能通用的{{}}
    kikyous
        8
    kikyous  
       2016-11-18 09:50:23 +08:00
    还有在属性里面使用 {{}} 会导致很多模糊的情况,不知道该不该用{{}}

    如 v-if='show' 还是 v-if={{show}} 呢?
    jsq2627
        9
    jsq2627  
       2016-11-18 09:54:02 +08:00
    认同楼上的理由。
    另一方面畸形的 HTML 可能会导致浏览器 parse 报错
    kidlj
        10
    kidlj  
    OP
       2016-11-18 09:58:44 +08:00
    @kikyous 嗯,在 0.12 的时候 v-if 确实是 v-if="show" 这种写法的,和 {{ }} 造成了分裂,可当时为什么没有统一用 v-if={{ show}} 这种写法呢。
    kidlj
        11
    kidlj  
    OP
       2016-11-18 10:00:35 +08:00
    @kikyous 还请问 <img src={{ img_url }}> 和 <img :src="img_url"> 在解析上有什么不同吗,为什么前者报错后者不报错,是跟组件生命周期有关吗?
    dodo20120
        12
    dodo20120  
       2016-11-18 10:04:26 +08:00
    laravel 模板中就是用的{{}}, 如果用 vue 的绑定会造成问题,而且 vue 现在成了 laravel 的默认 js 框架,所以,我是这么认为的。
    kikyous
        13
    kikyous  
       2016-11-18 10:06:35 +08:00   ❤️ 1
    v-if={{ show}} 没有意义,因为不可能 给 v-if 一个非变量值

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

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

    而且{{}}在底层也是编译成指令来执行的
    kikyous
        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 ,浏览器是不会发出请求的
    kidlj
        15
    kidlj  
    OP
       2016-11-18 10:35:57 +08:00
    @kikyous 赞,谢谢。已解惑 :)
    KingMario
        16
    KingMario  
       2016-11-18 11:04:04 +08:00
    {{ msg }} 本来就是语法糖而已, 使用到 HTML 属性的话,一方面容易出错,另一方面 增加了编译引擎的复杂度
    learnshare
        17
    learnshare  
       2016-11-18 11:19:32 +08:00
    @jsq2627 浏览器解析的问题可以忽略掉,因为实际产出的 HTML 都会解决掉这些不合法的语法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2640 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:01 · PVG 23:01 · LAX 07:01 · JFK 10:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.