{"action":"opened","issue":{"url":"https://api.github.com/repos/yyx990803/vue/issues/1325","labels_url":"https://api.github.com/repos/yyx990803/vue/issues/1325/labels{/name}","comments_url":"https://api.github.com/repos/yyx990803/vue/issues/1325/comments","events_url":"https://api.github.com/repos/yyx990803/vue/issues/1325/events","html_url":"https://github.com/yyx990803/vue/issues/1325","id":106902509,"number":1325,"title":"1.0 binding syntax (latest reference)","user":{"login":"yyx990803","id":499550,"avatar_url":"https://avatars.githubusercontent.com/u/499550?v=3","gravatar_id":"","url":"https://api.github.com/users/yyx990803","html_url":"https://github.com/yyx990803","followers_url":"https://api.github.com/users/yyx990803/followers","following_url":"https://api.github.com/users/yyx990803/following{/other_user}","gists_url":"https://api.github.com/users/yyx990803/gists{/gist_id}","starred_url":"https://api.github.com/users/yyx990803/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyx990803/subscriptions","organizations_url":"https://api.github.com/users/yyx990803/orgs","repos_url":"https://api.github.com/users/yyx990803/repos","events_url":"https://api.github.com/users/yyx990803/events{/privacy}","received_events_url":"https://api.github.com/users/yyx990803/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/yyx990803/vue/labels/1.0%20proposal","name":"1.0 proposal","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/yyx990803/vue/milestones/13","html_url":"https://github.com/yyx990803/vue/milestones/1.0.0-alpha","labels_url":"https://api.github.com/repos/yyx990803/vue/milestones/13/labels","id":1257572,"number":13,"title":"1.0.0-alpha","description":"","creator":{"login":"yyx990803","id":499550,"avatar_url":"https://avatars.githubusercontent.com/u/499550?v=3","gravatar_id":"","url":"https://api.github.com/users/yyx990803","html_url":"https://github.com/yyx990803","followers_url":"https://api.github.com/users/yyx990803/followers","following_url":"https://api.github.com/users/yyx990803/following{/other_user}","gists_url":"https://api.github.com/users/yyx990803/gists{/gist_id}","starred_url":"https://api.github.com/users/yyx990803/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyx990803/subscriptions","organizations_url":"https://api.github.com/users/yyx990803/orgs","repos_url":"https://api.github.com/users/yyx990803/repos","events_url":"https://api.github.com/users/yyx990803/events{/privacy}","received_events_url":"https://api.github.com/users/yyx990803/received_events","type":"User","site_admin":false},"open_issues":3,"closed_issues":14,"state":"open","created_at":"2015-08-17T06:29:02Z","updated_at":"2015-09-17T02:54:46Z","due_on":null,"closed_at":null},"comments":0,"created_at":"2015-09-17T02:54:46Z","updated_at":"2015-09-17T02:54:46Z","closed_at":null,"body":"> This is a reference issue that holds the **latest** binding syntax proposal. The syntax may still be in discussion and not implemented in any released version. For discussion/feedback please use this [thread](https://github.com/yyx990803/vue/issues/1308).\r\n\r\n### Quick Reference\r\n\r\nIf this is your first time here, read the [section below](#detailed-changes-from-012) first.\r\n\r\n``` html\r\n<!-- normal directive -->\r\n<div v-if=\"ok\"></div>\r\n\r\n<!-- directive with argument -->\r\n<button v-on:click=\"onClick\"></button>\r\n\r\n<!-- v-on with argument + key modifier -->\r\n<input v-on:keyup.enter=\"handleEnter\">\r\n\r\n<!-- literal modifier: pass literal string to directive -->\r\n<a v-link.literal=\"/a/b/c\"></a>\r\n\r\n<!-- binding an attribute with v-bind -->\r\n<img v-bind:src=\"imgSrc\">\r\n<a v-bind:href=\"baseURL + '/path'\">\r\n\r\n<!-- shorthand: colon for v-bind -->\r\n<img :src=\"imgSrc\">\r\n<a :href=\"baseURL + '/path'\">\r\n\r\n<!-- shorthand: @ for v-on -->\r\n<input\r\n  @click=\"onClick\"\r\n  @keyup.enter=\"handleEnter\">\r\n\r\n<!-- props -->\r\n<my-comp\r\n  v-bind:prop=\"defaultOneWay\"\r\n  v-bind:prop.sync=\"twoWay\"\r\n  v-bind:prop.once=\"oneTime\">\r\n</my-comp>\r\n\r\n<!-- component with props and custom events, in shorthand -->\r\n<item-list\r\n  :items=\"items\"\r\n  :mode=\"active\"\r\n  @ready=\"onItemsReady\"\r\n  @update=\"onItemsUpdate\">\r\n</item-list>\r\n\r\n<!-- v-el and v-ref now use dedicated syntax -->\r\n\r\n<!-- registers vm.$.child -->\r\n<comp $.child></comp>\r\n<!-- registers vm.$$.node -->\r\n<div $$.node></div>\r\n<!-- caveat: must use dash-case instead of camelCase, similar to props -->\r\n<!-- registers vm.$.someComp -->\r\n<comp $.some-comp></comp>\r\n```\r\n\r\n### Detailed Changes from 0.12\r\n\r\n1. ##### Directive Arguments\r\n\r\n  The concept of multiple clauses (multiple directives separated by comma in the same attribute) is deprecated, and directive arguments are moved into the attribute name:\r\n\r\n  ``` html\r\n  <!-- before: -->\r\n  <div v-dirname=\"arg1: expression1, arg2: expression2\">\r\n\r\n  <!-- after: -->\r\n  <div\r\n    v-dirname:arg1=\"expression1\"\r\n    v-dirname:arg2=\"expression2\">\r\n  ```\r\n\r\n  Using real directives as example:\r\n\r\n  ``` html\r\n  <!-- before: -->\r\n  <div v-on=\"click: doThis, keyup: doThat\">\r\n\r\n  <!-- after: -->\r\n  <div\r\n    v-on:click=\"doThis\"\r\n    v-on:keyup=\"doThat\">\r\n  ```\r\n\r\n  In particular, for `v-class` and `v-style` you can use Object literals which is largely equivalent to the old args + multiple clause syntax:\r\n\r\n  ``` html\r\n  <!-- toggle classes -->\r\n  <div v-class=\"{ 'class-a': true, 'class-b': false }\"></div>\r\n  <!-- apply a list of classes -->\r\n  <div v-class=\"[ dynamicClass, 'literal-class' ]\"></div>\r\n\r\n  <!-- apply style object (camelCase accepted) -->\r\n  <div v-style=\"{ fontSize: '14px', color: 'red' }\"></div>\r\n  <!-- apply multiple style objects -->\r\n  <div v-style=\"[ styleObjectA, styleObjectB ]\"></div>\r\n  ```\r\n\r\n2. ##### Literal Directives\r\n\r\n  There is no longer \"literal directives\" from the implementation perspective. All directives are reactive by default, which makes it easy to know whether an attribute value is an expression or a literal string. If you wish to pass the directive a literal string, use the following syntax:\r\n\r\n  ``` html\r\n  <div v-dirname.literal=\"a literal string\">\r\n  ```\r\n\r\n  The ending `.literal` is called a **Binding Modifier**, which forces the directive to be bound in literal mode. We will see this concept used below for prop binding types as well. In literal mode, the directive's `update` function will be called once, with the literal string as the argument.\r\n\r\n3. ##### Attribute Bindings\r\n\r\n  **Mustache tags will no longer appear inside attribute values.** They will only be used for text/HTML interpolation in 1.0. To dynamically bind an attribute, use the `v-bind` directive (which replaces `v-attr`):\r\n\r\n  ``` html\r\n  <a v-bind:href=\"baseURL + '/abc'\"></a>\r\n  <img v-bind:src=\"imgSrc\">\r\n  ```\r\n\r\n  This also applies to special attributes like `is` for dynamic component and `name` for dynamic partials:\r\n\r\n  ``` html\r\n  <component v-bind:is=\"view\"></component>\r\n  <partial v-bind:name=\"partialName\"></partial>\r\n  ```\r\n\r\n4. ##### Props\r\n\r\n  Previously props use mustaches to indicate reactivity. Now they also use `v-bind`:\r\n\r\n  ``` html\r\n  <my-comp\r\n    prop=\"a literal string\"\r\n    v-bind:prop=\"expression\">\r\n  </my-comp>\r\n  ```\r\n\r\n  Binding type indicators (`@` and `*`) are now replaced by more explicit binding modifiers:\r\n\r\n  ``` html\r\n  <my-comp\r\n    v-bind:prop=\"defaultOneWay\"\r\n    v-bind:prop.sync=\"twoWay\"\r\n    v-bind:prop.once=\"oneTime\">\r\n  </my-comp>\r\n  ```\r\n\r\n5. ##### Shorthands\r\n\r\n  You may have noticed we will be using `v-bind` and `v-on` quite a lot. 1.0 will provide optional shorthand syntax for these two directives. `v-bind:` can be shortened to a single colon `:`, while `v-on:` can be shortened to a single `@` symbol:\r\n\r\n  ``` html\r\n  <img :src=\"imgSrc\">\r\n  <input @click=\"handleClick\" @keyup=\"handleKeyup\">\r\n  <my-comp :prop=\"expression\"></my-comp>\r\n  ```\r\n\r\n  If you are only using Vue as an enhancement on existing HTML pages, you may want to stick with the `v-` prefixed versions. The shorthand is designed to make the template more succinct when you are building large SPAs where Vue manages everything. Don't worry about it not looking like valid HTML - all browsers can parse it just fine, and Vue removes all the special stuff in the rendered HTML anyway.\r\n\r\n6. ##### `v-on` on Child Component\r\n\r\n  `v-on` will also listen to custom Vue events (emitted via `vm.$emit`) when it is used on a child component. The idea is that **props** and **events** should constitute the public API of a component:\r\n\r\n  - props for passing data down;\r\n  - events for handling actions up.\r\n\r\n  A typical component would look like this:\r\n\r\n  ``` html\r\n  <item-list\r\n    v-bind:items=\"items\"\r\n    v-bind:mode=\"active\"\r\n    v-on:ready=\"onItemsReady\"\r\n    v-on:update=\"onItemsUpdate\">\r\n  </item-list>\r\n  ```\r\n\r\n  With shorthand:\r\n\r\n  ``` html\r\n  <item-list\r\n    :items=\"items\"\r\n    :mode=\"active\"\r\n    @ready=\"onItemsReady\"\r\n    @update=\"onItemsUpdate\">\r\n  </item-list>\r\n  ```\r\n\r\n7. ##### `v-on` Key Modifier\r\n\r\n  `v-on` can now leverage a **Key Modifier** that replaces the old `key` filter (you can use all the old aliases usable in the key filter, or use a direct keyCode):\r\n\r\n  ``` html\r\n  <!-- before -->\r\n  <input v-on=\"\r\n    keyup: handleEnter | key 'enter',\r\n    keyup: handleEsc | key 'esc'\">\r\n\r\n  <!-- after -->\r\n  <input\r\n    @keyup.enter=\"handleEnter\"\r\n    @keyup.esc=\"handleEsc\">\r\n  ```\r\n\r\n8. ##### New Syntax for `v-el` and `v-ref`\r\n\r\n  `v-el` and `v-ref` are deprecated in favor of the new dedicated syntax:\r\n\r\n  ``` html\r\n  <!-- child component ref, registers vm.$.child -->\r\n  <comp $.child></comp>\r\n  <!-- elsewhere... -->\r\n  {{$.child.msg}}\r\n\r\n  <!-- element ref, registers vm.$$.node -->\r\n  <div $$.node></div>\r\n  ```\r\n\r\n  **Caveat:** camelCase names are converted to all lowercase when the HTML is parsed:\r\n\r\n  ``` html\r\n  <comp $.someThing></comp>\r\n  ```\r\n\r\n  Gets rendered as:\r\n\r\n  ``` html\r\n  <comp $.something></comp>\r\n  ```\r\n\r\n  Thus, it is necessary to use the dash-case <-> camelCase mapping for refs too (similar to props):\r\n\r\n  ``` html\r\n  <comp $.some-thing></comp>\r\n  {{ $.someThing.msg }}\r\n  ```"}}