{"action":"opened","issue":{"url":"https://api.github.com/repos/weexteam/weex-vue-framework/issues/11","repository_url":"https://api.github.com/repos/weexteam/weex-vue-framework","labels_url":"https://api.github.com/repos/weexteam/weex-vue-framework/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/weexteam/weex-vue-framework/issues/11/comments","events_url":"https://api.github.com/repos/weexteam/weex-vue-framework/issues/11/events","html_url":"https://github.com/weexteam/weex-vue-framework/issues/11","id":187474655,"number":11,"title":"Differences between using Vue in Web and Weex","user":{"login":"Jinjiang","id":206848,"avatar_url":"https://avatars.githubusercontent.com/u/206848?v=3","gravatar_id":"","url":"https://api.github.com/users/Jinjiang","html_url":"https://github.com/Jinjiang","followers_url":"https://api.github.com/users/Jinjiang/followers","following_url":"https://api.github.com/users/Jinjiang/following{/other_user}","gists_url":"https://api.github.com/users/Jinjiang/gists{/gist_id}","starred_url":"https://api.github.com/users/Jinjiang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jinjiang/subscriptions","organizations_url":"https://api.github.com/users/Jinjiang/orgs","repos_url":"https://api.github.com/users/Jinjiang/repos","events_url":"https://api.github.com/users/Jinjiang/events{/privacy}","received_events_url":"https://api.github.com/users/Jinjiang/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-05T03:46:57Z","updated_at":"2016-11-05T03:46:57Z","closed_at":null,"body":"In Weex you can write code with Vue, a progressive framework for building user interfaces. Also you can find some tools and resources by it.\r\n\r\nSo this introduction assumes you have knowledge of Vue in the web and know the syntax and usage of Vue.\r\n\r\nHere are some notes differences about using Vue between Weex and web.\r\n\r\n* In Weex you don't need to include Vue framework manually. It's just built-in.\r\n* You could start a Weex project with `weex-toolkit`. Also we will prepare one or more `vue-cli` template(s) in the future.\r\n* In a Weex page you don't have the host HTML code for example:\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>...</head>\r\n  <body>\r\n    <div id=\"app\">\r\n      ...template content here...\r\n    </div>\r\n    <div>\r\n      ...DOM out of Vue...\r\n    </div>\r\n    <script>\r\n      new Vue({\r\n        el: '#app',\r\n        ...\r\n      })\r\n    </script>\r\n  </body>\r\n</html>\r\n```\r\nSo we got some issues:\r\n1. We don't support template content written in DOM.\r\n2. No `el` to specify in Vue options. Having DOM out of Vue is not allowed.\r\n3. Writing `<link>`, `<meta>` is also not allowed. (Maybe we can support some APIs to set `<meta>`s.)\r\n4. We just write `*.vue` code directly.\r\n\r\nA \"hello world\" example in Weex is just below:\r\n```vue\r\n<template>\r\n  <div>\r\n    <text>{{ message }}</text>\r\n  </div>\r\n</template>\r\n<script>\r\n  export const data = {\r\n    message: 'Hello Vue!'\r\n  }\r\n</script>\r\n```\r\n\r\n* How it works: after you finish the `*.vue` code, it will be transformed by `weex-vue-loader` into JavaScript which automatically added some code like this:\r\n```javascript\r\n// wrap with new Vue(options)\r\nnew Vue({\r\n\r\n  // Make weex recognize the \"root\" Vue component,\r\n  // using value \"body\" by default.\r\n  el: 'body',\r\n\r\n  // content of <script>\r\n  data: {\r\n    message: 'Hello Vue!'\r\n  },\r\n\r\n  // compile <template> into render functions\r\n  render: function () {\r\n    with (this) {\r\n      return _h('div', {}, [\r\n        _h('text', { attrs: { value: message }})\r\n      ])\r\n    }\r\n  },\r\n  staticRenderFns: []\r\n})\r\n```\r\nAnd it works fine in Weex.\r\n\r\n* Handling user input is working in progress.\r\n* In Weex `v-html=\"rawHtml\"` is not allowed.\r\n* Btw the native components Weex supports are not same to W3C HTML Tags. See more about this here.\r\n* In Weex text node is only allowed as a child of `<text>` and it equals to its `value` attribute. So `<text>Hello</text>` equals to `<text value=\"Hello\"></text>` and `<div>Hello</div>` will not work.\r\n* `<style>` is scoped by force.\r\n* `id` in `<template>` is not supported.\r\n* Only single-class selector in `<style>` is allowed. Maybe we can find some ways to support more kind of selectors.\r\n* The cost of a tag is more expensive than in web. Because each tag means a piece of full-featured native view in the deep level. So please have a tension to avoid unnecessary nested `<div>`s.\r\n* All the events in Weex are not propagated. So the parent will not get event when a same type event got in its child. And also we don't define any default behavior of an event. So there is not concept of `.prevent`, `.capture`, `.stop`, `.self` modifiers.\r\n* You don't worry about vendor prefixes in Weex. We don't make them happened.\r\n* You don't worry about \"DOM template parsing caveats\". We don't make them happened.\r\n* In Weex `v-show` is not supported. It may be supported in the future.\r\n* We don't support \"inline templates\" and \"x-templates\".\r\n* We don't support `<transition>` and `<transition-group>`. Maybe we will support them in the future.\r\n* `weex-vue-loader` don't support `lang` attribute.\r\n* `vue-router` adaption work is not finished.\r\n* `vuex` adaption work is not finished.\r\n* `devtools` adaption work is not finished.\r\n* server-side rendering is not supported.\r\n* `Vue.compile` is not supported.\r\n* `vm.$mount` is not supported.\r\n\r\nSomething need to check in depth:\r\n\r\n* The list of components Weex supports.\r\n* The list of JavaScript APIs Weex supports.\r\n* The list of styles Weex supports.\r\n* The list of events Weex supports.\r\n* Polyfills\r\n* Memory leaks\r\n* Global APIs: `directive`, `mixin`, `filter`, `component`, `use`\r\n* Deploy\r\n* test: `weex-vdom-test`, `macaca`?\r\n* community?\r\n* error handling?\r\n* `vm.$el`\r\n* `v-cloak`?\r\n* `keep-alive`?\r\n* Native DOM APIs references?\r\n"}}
{"actor":{"display_login":"Jinjiang"}}