1. What Problem We Ran Into

If the features you implement are simple and both development and maintenance are easy, there would be no research into design patterns, frameworks, and related topics. It is precisely because Web systems are complex, requirements change quickly, there is a lot of reuse, there are many developers, and personnel handovers are frequent. We need a certain set of agreed rules to avoid the risks that arise in these areas.
Much of the research work goes into the system level: separating the UI layer, the logic layer, and the data layer; and the developer level: separating the frontend and the backend.

2. Several Solution Models

2.1 MVC

• M, encapsulates the system’s state, functionality, and algorithm logic. Externally it responds to state queries and notifies the view of changes.
• V, interacts with the user. Externally it obtains user input, sends it to the Controller, interprets the model, and sends model update requests.
• C, encapsulates behavior and interprets behavior. Externally it maps user actions into model updates.

In frontend MVC, the View updates the DOM, the Controller produces various events, and the Model requests data. The problem is that most of the Controller’s functionality comes with the browser, and the View maintaining a large number of DOM elements becomes very bloated.

2.2 MVP

• M, encapsulates the system’s state, functionality, and algorithm logic. Externally it accepts change requests from P and returns data.
• V, interacts with the user. Externally it obtains user input and sends it to P, and it does not need to maintain any data.
• P, encapsulates behavior and interprets behavior. P is the coordinator between M and V. P is responsible for actively capturing requests from V, pulling data from M, and then pushing it to V. You could say P is the center of the MVP pattern.

In frontend MVP, with this division of labor P carries a great deal: it has to update V and also update M. Some programmers therefore write part of the logic into V as well.

2.3 MVVM

• M, encapsulates the system’s state, functionality, and algorithm logic.
• V, interacts with the user. Externally it obtains user input.
• VM, binds M and V.

In frontend MVVM, MVVM is an improvement on MVP. In MVP, P has to manually synchronize V and M, whereas in MVVM this process is done automatically.

3. What Vue Is

Vue is one implementation of MVVM.

Vue.js is a frontend library for developing web interfaces. It also has a set of companion tools. If you count all of that together, then you could also call it a “frontend framework”. But personally I prefer to see it as a toolset you can choose from flexibly. If you still haven’t heard of Vue.js by now, you might be thinking: the frontend always has some new gimmick, why another framework? In fact Vue.js has already been in development for over two years. Its first public release was in February 2014. Over these two years it has kept evolving, and today many people are already using it in production. – Evan You

According to that description, Vuejs provides reactive programming, componentization, modularization, animation, routing, and other features.

A few concepts in Vue:

• Directives: tell Vue which property needs to be updated. The default prefix is v-. For example, v-text=“message” tells Vue to update the div’s textContent when the value of the message property changes.
• Filters: a filter follows directly after a directive’s path or expression and further processes the value before the DOM is updated.
• List rendering: use the v-repeat or v-for directive to render data content in a loop. The frontend handles the template.
• Event listening: use the v-on command to register listening events. For example, v-on:click:onClick registers a click handler for an element.
• Computed properties: define computed properties to cover scenarios that involve complex logic.
• Component system: enables custom tags. It means that once you register a component XXX, you can use <xxx></xxx> in html, and the tag’s content can be customized with a template.

4. How to Write a Vue-Based Application

For a complex project you usually need some management tool, such as Webpack, to manage the frontend project built with Vue. But for a getting-started exercise we won’t add Webpack here; we’ll just get familiar with Vue’s processing mechanism and how to use it.

A good online js programming environment I recommend: JSBIN

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div>
 <div id="show-input">
   <input v-model = "name"></input>
   <p>Your input: {{name}}</p>
   <p>double input: {{double}}</p>
  <child :cname='name'></child>
 </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var vm = new Vue({
  el: "#show-input",
  data: {
    name: "chen",
  },
  components: {
    child: Vue.extend({
      template: "<div>child:{{cname}}</div>",
      props: {
        cname: String,
      },
    }),
  },
  computed: {
    double: function () {
      return this.name + this.name;
    },
  },
});

Here new Vue is essentially binding to a DOM element. The el is equivalent to the $() selector in Jquery; variables are defined in the data property and referenced in html with {{ variable name }}; components defines new tags; computed is a computed property, and you can also define custom filters. But these properties are only valid for the currently bound object; they have no effect on other bindings outside its scope.