Detailed Vue.js

vuejs Introduction

Vue.js the moment it is very fire a JavaScript MVVM library, which is based on data-driven ideas and component-based construction. Compared to Angular.js, Vue.js provide a more concise, easier to understand the API, so that we can quickly get started and use Vue.js.
If you have before you get used to manipulate the DOM with jQuery, please put aside manually manipulate the DOM mind when learning Vue.js, because Vue.js is data-driven, you do not need to manually DOM. It is through some special HTML syntax, the DOM and data bind. Once you have created a bind, DOM and data will be synchronized whenever the data changes, DOM will be updated accordingly.
Of course, when using Vue.js, you can also be used in conjunction with other libraries, such as jQuery.

What is Vue.js

VUE (pronunciation / vjuː /, similar to the view) is a progressive frame for constructing user interfaces. The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project. On the other hand, when the modern tool chain and various support libraries when used in combination, Vue also fully capable of providing drive for complex one-page application.

If you want to study in depth before Vue know more about it, we produced a video that takes you understand the core concepts and a sample project.

If you are already an experienced front-end developer who wants to know Vue with other libraries / frameworks What are the differences, please see compared to other frameworks .

Starting with the installation

Try Vue.js The easiest way is to use the  Hello World example on JSFiddle . You can open it in a new browser tab, follow the example of learning some basic usage. Or you can create a  .html file , and then introduced Vue by:

1 <-! Development environment version includes a helpful warning command line ->
 2 <Script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ Script >

or:

1 <! - production version, to optimize the size and speed ->
 2 <Script the src = "https://cdn.jsdelivr.net/npm/vue"> </ Script>

Installation tutorial gives more ways of installation Vue. Please note that we do not recommend novice directly  vue-cli, especially if you are not familiar with Node.js is based build tool.

If you like interactive stuff, you can also check tutorial series on Scrimba this , it combines experimental field recording screen and code, and allows you to pause and play.

Declarative rendering

Try this lesson on Scrimba

The core Vue.js that allows the use of a simple declarative syntax template to render data into the DOM system:

1 <div id="app">
2   {{ message }}
3 </div>

1 var app = new Vue({
2   el: '#app',
3   data: {
4     message: 'Hello Vue!'
5   }
6 })

We have successfully created the first application Vue! It seemed that this rendered with a string template is very similar, but a lot of work behind the Vue. Now data and DOM association has been established, all the things that are responsive. How we want to confirm it? Open your browser's JavaScript console (opens in this page), and modify the  app.message value, you will see the example updated accordingly.

In addition to text interpolation, we can also bind properties of elements like this:

1  < div the above mentioned id = "App-2" > 
2    < span v-the bind: title = "the Message" > 
3      hover for a few seconds to view the message dynamic binding of here!
. 4    </ span > 
. 5  </ div >

. 1  var App2 = new new Vue ({
 2    EL: '# App2' ,
 . 3    Data: {
 . 4      Message: 'page loaded' + new new . A Date () toLocaleString ()
 . 5    }
 . 6 })

Here we have a little something new. You can see  v-bind properties called instructions. With the prefix instruction  v-, to indicate that they are provided special characteristics Vue. As you may have guessed, they will use special responsive behavior on the rendered DOM. Here, the instruction means: "this node element  title characteristics and Vue instance  message attributes consistent."

If you open your browser's JavaScript console again, input  app2.message = '新消息', will once again see this bound  title characteristics of HTML has been updated.

Conditions circulation

Try this lesson on Scrimba

A display control of the switching element is quite simple:

1  < div the above mentioned id = "App-3" > 
2    < the p- v-IF = "Seen" > Now you see me </ the p- > 
3  </ div >

1 var app3 = new Vue({
2   el: '#app-3',
3   data: {
4     seen: true
5   }
6 })

Continues console input  app3.seen = false, you will find the message that is displayed before disappeared.

This example demonstrates that we not only can bind data to text or DOM feature can also bind to the DOM structure. In addition, Vue also offers a powerful system of transition effects, you can insert / update / remove automatically applied when elements in Vue transition effects .

There are many other commands, each with a special function. For example, the v-for instructions can bind an array of data to render a list of items:

1 <div id="app-4">
2   <ol>
3     <li v-for="todo in todos">
4       {{ todo.text }}
5     </li>
6   </ol>
7 </div>

. 1  var APP4 = new new Vue ({
 2    EL: '# APP4' ,
 . 3    Data: {
 . 4      Todos: [
 . 5        {text: 'Learning the JavaScript' },
 . 6        {text: 'Learning Vue' },
 . 7        {text: 'bovine whole item' }
 8      ]
 9    }
 10 })

In the console, enter  app4.todos.push({ text: '新项目' }), you will find a list of the last added a new project.

Process user input

Try this lesson on Scrimba

To allow users to interact with your application, we can  v-on add an event listener instruction methods defined in Vue instance by calling it:

1 <div id="app-5">
2   <p>{{ message }}</p>
3   <button v-on:click="reverseMessage">反转消息</button>
4 </div>

 1 var app5 = new Vue({
 2   el: '#app-5',
 3   data: {
 4     message: 'Hello Vue.js!'
 5   },
 6   methods: {
 7     reverseMessage: function () {
 8       this.message = this.message.split('').reverse().join('')
 9     }
10   }
11 })

Note that in the  reverseMessage method, we updated the status of the application, but did not touch DOM-- all DOM operations handled by the Vue, the code you write just need to focus on the logical level.

Vue also provides  v-model instruction, it can easily form a two-way binding between input and application state.

1 <div id="app-6">
2   <p>{{ message }}</p>
3   <input v-model="message">
4 </div>

1 var app6 = new Vue({
2   el: '#app-6',
3   data: {
4     message: 'Hello Vue!'
5   }
6 })

Component-based application builder

Try this lesson on Scrimba

Components of the system is another important concept Vue, because it is an abstraction, it allows us to use small, independent and reusable components typically build large applications. Think about it, almost any type of application interface can be abstracted as a component tree:

In the Vue, the Vue is an instance has a predefined options on a component of nature. Vue registered in the assembly is very simple:

1  // definition named todo-item new component 
2 Vue.component ( 'todo-item' , {
 . 3    Template: '<Li> This is a to-do item </ Li>'
 . 4 })

Now you can use it to build another component templates:

. 1  < OL > 
2    <-! Create an instance of the component todo-item -> 
. 3    < todo-item > </ todo-item > 
. 4  </ OL >

But this will be for the same text rendering each to-do item, it does not look cool. We should scope the data transmitted from parent subassembly son. Let's amend the definition of the components, so that it can accept a  prop :

. 1 Vue.component ( 'TODO-Item' , {
 2    // TODO-assembly now accepts an Item 
. 3    // "prop", similar to a custom attribute. 
4    // This prop named TODO. 
. 5    The props: [ ' TODO ' ],
 . 6    Template:' <Li> todo.text {{}} </ Li> '
 . 7 })

Now, we can use the  v-bind command to be run each component output reached the cycle of items:

. 1  < div ID = "App-. 7" > 
2    < OL > 
. 3      <-! 
. 4        we now provide todo object for each Item-todo
 . 5        todo object is a variable, i.e., the contents of which may be dynamic.
6        We also need to provide a "key" for each component, and then later
 7        for a detailed explanation.
. 8      -> 
. 9      < TODO Item-
 10        V-for = "Item in groceryList" 
. 11        V the bind-: TODO = "Item" 
12 is        V the bind-: Key = "item.id" 
13 is      > </ TODO-Item > 
14    </ OL >
 >

. 1 Vue.component ( 'TODO-Item' , {
 2    The props: [ 'TODO' ],
 . 3    Template: '<Li> todo.text {{}} </ Li>'
 . 4  })
 . 5  
. 6  var app7 = new new Vue ({
 . 7    EL: '# App-. 7' ,
 . 8    Data: {
 . 9      groceryList: [
 10        {ID: 0, text: 'vegetables' },
 . 11        {ID:. 1, text: 'cheese' },
 12 is        {ID: 2, text: 'whatever else eat' }
 13      ]
 14    }
 15 })

Although this is only an example of a deliberate design, but we have managed to split the application into two smaller units. Subunit had good prop interface by decoupling the parent cell. We can now further improve the  <todo-item> components, providing more sophisticated templates and logic, without affecting the parent unit.

In a large application, it is necessary to entire application into components to allow developers to more manageable. In the follow-up tutorial , we will detail the components, but there is a (hypothetical) example, to demonstrate the use of the components of the application templates What:

1 <div id="app">
2   <app-nav></app-nav>
3   <app-view>
4     <app-sidebar></app-sidebar>
5     <app-content></app-content>
6   </app-view>
7 </div>

Relationship with the custom elements

You may have noticed Vue component is very similar to the custom elements - it is a  Web component specification part, this is because the components of the grammar part Vue reference to the specification. Vue assembly realized e.g.  Slot API  and  is properties. However, there are a few key differences:

1. Web Components specification has been completed and passed, but not all browsers native implementation. Currently Safari 10.1 +, Chrome 54+ Firefox 63+ and native support for Web Components. In contrast, Vue component does not require any polyfill, and consistent performance under all supported browsers (IE9 and higher). If necessary, Vue components may be packaged in a custom in the native element.

2. Vue component provides a number of important features pure custom elements are not available, the most prominent is the cross-component data streams, and build custom events communication tool integration.

Although the internal Vue does not use custom elements, but in applications using custom elements, or when the custom elements in the form of release, still has good interoperability . Vue Vue CLI also supports components are built to be a native of the custom elements.

Ready?

We have just a brief introduction to the most basic functions Vue core - the rest of this tutorial will cover these and other advanced features in more detail, so be sure to read the entire tutorial!