【发布时间】:2016-01-07 21:46:33
【问题描述】:
我正在阅读 vuejs 文档,包括 http://vuejs.org/guide/syntax.html 和 http://vuejs.org/guide/syntax.html#Binding_Expressions。简单来说(对于 JS 初学者)有人可以解释什么是绑定的。这也与“v-bind”语法有关吗?
谢谢。
【问题讨论】:
标签: javascript vue.js glossary
我正在阅读 vuejs 文档,包括 http://vuejs.org/guide/syntax.html 和 http://vuejs.org/guide/syntax.html#Binding_Expressions。简单来说(对于 JS 初学者)有人可以解释什么是绑定的。这也与“v-bind”语法有关吗?
谢谢。
【问题讨论】:
标签: javascript vue.js glossary
Vue 的整体理念是您不必手动更新 DOM(通过添加新的 div 或任何其他元素)。当您更改 JS 变量时,html 会自动更新。例如,如果您的代码中有<span>Hello {{ name }}!</span>,那么您在Vue 中有一个对应的变量,称为name。当您更新变量name 时,该<span> 的内容会自动更新。所以这是“绑定”到 javascript 变量的。
任何时候你看到像v-bind 或v-on 这样的自定义Vue 属性,你发送给它的值是一个变量,而不是一个字符串。例如,您可以使用<button v-bind:disabled="thisIsDisabled">。然后你需要在 Vue 中有一个名为 thisIsDisabled 的变量,如果为 true,则按钮将被禁用,如果为 false,则按钮将处于活动状态。同样,您不必更新按钮来禁用或启用它,它的 disabled 属性将绑定到您的变量。
【讨论】:
v-bind 或v-on 这样的自定义Vue 属性,你发送它的值是一个变量,而不是一个字符串。例如,您可以使用<button v-bind:disabled="thisIsDisabled">。然后你需要在 Vue 中有一个名为“thisIsDisabled”的变量,如果为 true,则按钮将被禁用,如果为 false,则按钮将处于活动状态。同样,您不必更新按钮来禁用或启用它,它的 disabled 属性将绑定到您的变量。