Data Binding Diagram

Introducing Vue and Weex for Native Mobile Apps

Vue is a popular JavaScript framework for web apps with easy binding between data in memory and the user interface. Now Weex allows us to code native mobile apps using the Vue framework!

Why do we use Vue and other data binding frameworks like Angular and React? What’s so special about them?  We use them to ensure that application data which is stored in memory stays in sync with the user interface and vice versa. 

We also use these frameworks to enable us to build applications very quickly, and in a way that is optimized for performance.

In this tutorial I’ll show you how to use the Vue framework, in particular how to understand its concepts of data binding and templates. Then, I’ll go on to introduce the Weex platform, for coding native mobile apps using Vue!

Data Binding

Let’s look at a simple example to understand how these frameworks can actually save us time. What we want is a simple input field that stays in sync with our application data. Our app itself can change the data programmatically, and the user can change it via user input, so we need to be watching both the UI and application data.

Two way data binding

Writing code that would support this data binding would be verbose. We would need to create event listeners and proxy objects and observables to capture any changes in the application data. And these complexities just grow and grow as more types of data and inputs are added. Vue and other data binding frameworks prevent us having to write all of that binding code. 

With Vue, if our user changes some input data, it will sync back to the application data like so:

Changes flowing from the UI to the model

Or if the application changes the data, it will update the user interface like this:

Changes flowing from the model to the UI

When we keep the user interface and the app data together in sync, it means our app does exactly what we expect it to do. Vue will manage all of this and allow other powerful data binding processes to occur.

Getting Set Up

Now that we know why we use these frameworks, let’s set up a simple Vue application to run some examples. Create a new HTML file anywhere on your computer and paste the following code into it:

This is a simple HTML file that links to the Vue JS library. It contains a div element with the ID of app. Inside the script tags we have a variable called app that we use to point to our view—I’ll explain this part later.

Then we create a new Vue instance, or “view”. This constructor tells the framework which element will contain our application UI and keep it in sync with the application data. 

Now double click on the HTML file to open it in the browser, and open the browser console window.

The browser console in Chrome

Text Interpolation

Text interpolation lets us embed expressions in our HTML code that will be interpreted when the page is rendered. The expressions are live, so if the data they depend on is changed, the page will be updated in real time. This is known as declarative rendering, which allows us to place expressions anywhere within an element’s content. Let’s review with a simple example.


Our JavaScript code now contains a data object that will store all of our application data for this view. Within it, I’ve created the message property with the string "Hello world"

Next, let’s display this property in the HTML.