{"action":"created","issue":{"url":"https://api.github.com/repos/yyx990803/vue/issues/1308","labels_url":"https://api.github.com/repos/yyx990803/vue/issues/1308/labels{/name}","comments_url":"https://api.github.com/repos/yyx990803/vue/issues/1308/comments","events_url":"https://api.github.com/repos/yyx990803/vue/issues/1308/events","html_url":"https://github.com/yyx990803/vue/issues/1308","id":106238555,"number":1308,"title":"1.0 binding syntax (discussion thread)","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":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":114,"created_at":"2015-09-13T20:43:28Z","updated_at":"2015-09-18T03:31:42Z","closed_at":null,"body":"Note: This post may contain outdated content. Latest reference is now maintained at #1325 \r\n\r\n---\r\n\r\nHere's yet another long post on the new binding syntax. I know we have gone through a lot of changes during the alpha phase, but please, bear with me - I want to make sure we land on something that is good enough to be called a 1.0 - something that is consistent, explicit, and most importantly, stable. We are going to strictly follow semver post 1.0 - I don't want to have to release 2.0 in a few months ;)\r\n\r\nI've been thinking about all the discussion on consistent `v-`, and I feel that the new syntax may indeed be a bit too different from what we have in 0.12. Some of the justifications about the additional prefixes was based on the fact that Angular 2 and Aurelia are both introducing custom syntax for bindings; but then I realize Vue is not Angular or Aurelia, because these two are full-stack frameworks, where Vue aims to be flexible in as many use cases as possible.\r\n\r\nSo, let's take a step back and think about the original problems that we set out to solve with the new syntax, and evaluate what we have so far:\r\n\r\n1. #### Confusion about expressions vs. literals for directives\r\n\r\n  **Example:**\r\n\r\n  ``` html\r\n  <div v-text=\"msg\"></div>\r\n  <div v-link=\"/a/b/c\"></div>\r\n  ```\r\n\r\n  Here `msg` is an expression but `a/b/c` is a literal string. There's no way to tell which should be literal except looking at the directive's documentation.\r\n\r\n  **Current solution in alpha.4:**\r\n\r\n  Explicit syntax for literal directives: `v-link#=\"123\"`. This also simplifies implementation of custom directives. I think this is a good change.\r\n\r\n2. #### Confusion about where mustaches are allowed.\r\n\r\n  **Example:**\r\n\r\n  ``` html\r\n  <!-- these works... -->\r\n  <a v-link=\"/a/b/{{abc}}\"></a>\r\n  <a href=\"/a/b/{{abc}}\"></a>\r\n\r\n  <!-- these don't -->\r\n  <a v-model=\"{{abc}}\">\r\n  <a v-attr=\"href: 'a/b/{{abc}}'\">\r\n  ```\r\n\r\n  The general rule is that mustaches are only allowed in literal strings but not in expressions. But mustaches just make people think in the string template mindset and assume it should work everywhere.\r\n\r\n  In addition, mustaches inside attributes have some subtle gotchas, for example when used in `src` it causes a 404 error; when used in `style` it causes IE to ignore it.\r\n\r\n  **Current solution  in alpha.4:**\r\n\r\n  No more mustaches inside attribute values. Attribute bindings use the `bind-` special prefix.\r\n\r\n  As someone pointed out, this introduces an additional prefix and isn't as distinctive and consistent as `v-`. But `v-attr` also has its own warts, mostly related to the \"arguments + multiple clauses\" micro-syntax. We will discuss this in more details below.\r\n\r\n3. #### Directive micro-syntax\r\n\r\n  **Example:**\r\n\r\n  ``` html\r\n  <div v-on=\"click: doThis, keyup: doThat\"></div>\r\n  <div v-attr=\"href: address, src: imgSrc\"></div>\r\n  ```\r\n\r\n  The problem here is that it looks like an object, but it is not; it also becomes awkward to format (different indentation, no syntax highlight) when you have a lot of handlers/attributes:\r\n\r\n  ``` html\r\n  <div\r\n    other-attribute-a\r\n    other-attribute-b\r\n    v-on=\"\r\n      click: doThis,\r\n      keyup: doThat | key 'esc',\r\n      keyup: doSomethingElse | key 'enter'\">\r\n  ```\r\n\r\n  **Current Solution  in alpha.4:**\r\n\r\n  ``` html\r\n  <div\r\n    bind-href=\"address\"\r\n    bind-src=\"imgSrc\"\r\n    on-click=\"doThis\"\r\n    on-keyup-esc=\"doThat\"\r\n    on-keyup-enter=\"doSomethingElse\">\r\n  </div>\r\n  ```\r\n\r\n  I think breaking each binding into a single attribute is definitely the right move. But we also introduced yet another prefix: `on-`.\r\n\r\n4. #### Not-so-good prop syntax.\r\n\r\n  **Example:**\r\n\r\n  ``` html\r\n  <component\r\n    literal=\"string\"\r\n    dynamic=\"{{something}}\"\r\n    two-way=\"{{@something}}\"\r\n    one-time=\"{{*something}}\">\r\n  </component>\r\n  ```\r\n\r\n  First, this looks like normal attribute bindings. Second, as we noted above, mustache bindings indicates that it evaluates into a literal string. However, the 0.12 prop syntax is ambiguous in this aspect:\r\n\r\n  ``` html\r\n  <component prop=\"{{ anObject }}\">\r\n  ```\r\n\r\n  ^ This passes down the actual object.\r\n\r\n  ``` html\r\n  <component prop=\"abc-{{ anObject }}\">\r\n  ```\r\n\r\n  ^ This will try to concatenate \"abc-\" and the object, resulting in \"abc-[object Object]\".\r\n\r\n  The binding indicator can also be confusing:\r\n\r\n  ``` html\r\n  <!-- what does this do? -->\r\n  <component prop=\"abc-{{@something}}\">\r\n  ```\r\n\r\n  **Current Solution in alpha.4:**\r\n\r\n  ``` html\r\n  <component\r\n    literal=\"string\"\r\n    bind-dynamic=\"something\"\r\n    bind-two-way@=\"something\"\r\n    bind-one-time*=\"something\">\r\n  ```\r\n\r\n  By getting rid of mustaches and move the binding type indicator into the attribute name, I think we've solved most of the issues above, but it relies on the extra `bind-` prefix.\r\n\r\n---\r\n\r\n### Recap\r\n\r\nI think with the current 1.0.0-alpha.4 syntax we've addressed most of the original issues, but also introduced some new ones. Most of the negative feedback is concerned with the fact that we now have three prefixes instead of one: `v-`, `on-` and `bind-`. Do event handlers and attribute bindings really deserive their own special prefix?\r\n\r\nMy original intention was that `on-` and `bind-` would allow us to get rid of the \"micro-syntax\" issue mentioned above. But I also agree that more top-level prefixes also introduce additional cognitive overhead. So here's an update that attempts to address this issue:\r\n\r\n``` html\r\n<!-- 0.12 directive syntax -->\r\n<div v-dirname=\"arg1: expression1, arg2: expression2\"></div>\r\n\r\n<!-- 1.0 directive syntax -->\r\n<div\r\n  v-dirname:arg1=\"expression1\"\r\n  v-dirname:arg2=\"expression2\">\r\n<div>\r\n```\r\n\r\nSo, instead of what we currently have in 1.0.0-alpha.4:\r\n\r\n``` html\r\n<div\r\n  bind-href=\"address\"\r\n  bind-src=\"imgSrc\"\r\n  on-click=\"doThis\"\r\n  on-keyup-esc=\"doThat\">\r\n</div>\r\n```\r\n\r\nWe would write:\r\n\r\n``` html\r\n<div\r\n  v-bind:href=\"address\"\r\n  v-bind:src=\"imgSrc\"\r\n  v-on:click=\"doThis\"\r\n  v-on:keyup:esc=\"doThat\">\r\n</div>\r\n```\r\n\r\nA little more verbose, but more consistent, more Vue-specific, and maps to 0.12 concepts better.\r\n\r\nWhen we are using Vue alone to build an SPA, the `v-` prefix may not be that important anymore. So it is still possible to provide optional, more concise sugar on top of `v-bind` and `v-on`:\r\n\r\n``` html\r\n<!-- : for bind -->\r\n<div\r\n  :href=\"address\"\r\n  :src=\"imgSrc\">\r\n</div>\r\n\r\n<!-- @ for on -->\r\n<input\r\n  @click=\"doThis\"\r\n  @keyup:esc=\"doThat\">\r\n```\r\n\r\nYou probably would prefer the shorthand for component props as well (changing two-way indicator to `&` instead of `@`):\r\n\r\n``` html\r\n<component\r\n  :prop=\"something\"\r\n  :two-way&=\"something\"\r\n  :one-time*=\"something\">\r\n</component>\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/yyx990803/vue/issues/comments/141334109","html_url":"https://github.com/yyx990803/vue/issues/1308#issuecomment-141334109","issue_url":"https://api.github.com/repos/yyx990803/vue/issues/1308","id":141334109,"user":{"login":"Pandahisham","id":10324240,"avatar_url":"https://avatars.githubusercontent.com/u/10324240?v=3","gravatar_id":"","url":"https://api.github.com/users/Pandahisham","html_url":"https://github.com/Pandahisham","followers_url":"https://api.github.com/users/Pandahisham/followers","following_url":"https://api.github.com/users/Pandahisham/following{/other_user}","gists_url":"https://api.github.com/users/Pandahisham/gists{/gist_id}","starred_url":"https://api.github.com/users/Pandahisham/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Pandahisham/subscriptions","organizations_url":"https://api.github.com/users/Pandahisham/orgs","repos_url":"https://api.github.com/users/Pandahisham/repos","events_url":"https://api.github.com/users/Pandahisham/events{/privacy}","received_events_url":"https://api.github.com/users/Pandahisham/received_events","type":"User","site_admin":false},"created_at":"2015-09-18T03:31:42Z","updated_at":"2015-09-18T03:31:42Z","body":"@yyx990803 the latest syntax is wonderful , it reads really well and intuitively, respect   :+1: "}}