title: Using Vue type: guide group: Develop order: 5.2 version: 2.1
Using Vue
Vue in Weex
Vue.js is an excellent progressive JavaScript framework written by Evan You which is very easy and flexible to use. Developers can write *.vue files with friendly <template>, <style>, <script> tags to build componentized web apps.
In Oct 2016 Vue.js launched 2.0, which includes the virtual-DOM and pre-compiler for HTML templates. This means Vue.js can run in a JS-only environment without HTML / CSS parsers. The virtual-DOM layer also makes Vue 2.x able to render native UIs through JavaScript.
Weex and Vue now support each other officially. Now that Weex includes Vue 2.x as its built-in JS Framework, Vue can be used to develop native mobile apps.
Links
New Features of Vue 2.x in Weex
Stream Rendering
In Weex, developers can use <foo append="tree|node"> to customize the rendering granularity to balance different UI complexity and business logic in order to get the best first-paint performance. append=tree means that the entire node, including all its child nodes, will be one-time rendered to native UI after all of the nodes generated completely. And append=node means just render the current node itself first and its child nodes will be futher rendered later.
Two-way Data Binding in Form Controls
In Weex, we provide the same v-model directive as web dev exprience for both <input> and <textarea> components. Developers can write <input v-model="message"> or <textarea v-model="message"> to bind data message and show it on the text box automatically. When user modifies the text box, the value of data message will be automatically updated.
Isolate Each Page Contexts
As described in how Weex works, all Weex's JS bundles share a JavaScript instance. So how can we make Vue 2.x used in multiple JS bundles completely isolated, and that one page which extends or rewrites Vue does not affect other pages becomes a problem. Through the collaboration between Weex and Vue. The problem has been solved.
<transition>
Weex supports the awesome <transition> syntax in Vue 2.x. Developers can easily define the transition of an interface in both states with <transition> tag.
Notice
Web development and native development, after all, there are some differences in functionality and development experience, which are essentially the differences between the native development platform and the Web platform, and Weex is trying to narrow the scope of this difference. See differences of Vue 2.x between Weex and web
Using Vue-related Libs
Vue.js also has more cool related libs. For example Vuex and vue-router. They all work well in Weex. For using Vuex and vue-router, see Using Vuex and vue-router in Weex。
We developed a complete project based on Weex and Vue 2.x which named weex-hackernews. It includes WeexSDK with Vue 2.x in iOS, Android and web. Also we use Vuex and vue-router. The whole project uses the same source code for three different platforms.