What is Vue.js?

Vue.js is one of the main front of the frame, with Angular.js, React.js, and called the front three major framework
Vue.js is a framework for building user interfaces, only concerned with the view layer, it is not only approachable but also facilitates integration with third-party libraries or existing project. At the same time, Vue.js also is supported by third-party libraries, it can be integrated together to do large-scale projects
The main work of Vue.js? V in MVC is responsible for this layer: The main job is to deal with and interface to make the front page effect

Why learn Vue.js?

In order to improve the efficiency of enterprise development
In Vue.js, the core concept is to let the program do not manipulate the DOM element ape, ape can make the program more time to focus on business logic to optimize the user experience
Enhance the employability and competitiveness. Today, most companies are required to use Vue.js

The difference between the frame and libraries

Frame: is a complete solution for the project, a large project on invasive when a project framework needs to be replaced, you need to re-structure the entire project
Example: Node in Express;
Library: Provides a small function, the project less invasive when a library can not be achieved when certain requirements to do the project, you can use other libraries to achieve certain demands
For example: jquery, Zepto, art-template

The difference between MVC and MVVM front end of the backend

MVC: hierarchical concept behind the development. M is a Model (model layer), V is a View (view level), C is the Controller (treated layer). Layer model: only a single, only responsible for operation of the database, the CRUD (CRUD); view layer: each time the user operates the interface need to be processed if the service, will request through the network, a request to the backend server. Treatment layer: We treated layer is generally divided into three modules: module inlet, the routing processing module, a service logic processing module.
MVVM: the concept is a front end view layer: Share internal focus on the view layer. The same, MVVM also divided into three parts: Model ,, View, VM ViewMoel. Where, it is the VM MVVM core ideas, since VM scheduler is data between M and V. The overall relationship see below:

The code base Vue.js

<! DOCTYPE HTML> 
<HTML lang = "zh-CN"> 
<head> 
    <Meta charset = "UTF-8" /> 
    <title> show alone does not love the show </ title> 
    
</ head> 
<body> 
    <div = ID "App"> 
        <P> {{MSG}} </ P> 
    </ div> 
    
    <-! vue package 1. import -> 
    <Script the src = "./ vue / vue-2.4.0. JS "> </ Script> 

    <Script type =" text / JavaScript "> // 2. Create a vue instance of 
        the let VM = new Vue ({ 
            EL: '#app', // indicates: this our new current Vue example, to control which area on the page 
            data:     { // the Data property, is stored in el use of data 
                msg: 'Welcome to the Vue' //
        Instructions provided by vue, very convenient to be able to render the page data, the program is not manually ape the DOM element 
            } 
        });
     </ Script> 
</ body> 
</ HTML>

　　In the above example, div # data app the element area is MVVM in V (HTML structure), our new out vm is MVVM the VM (scheduler), Data is MVVM in M (provided the page required ).

Basic instructions

v-cloak: interpolation problem can be solved expression ({}), and will replace the placeholder their usage:
```
<p v-cloak>{{ msg }}</p>
```
At the same time added to the css file:
```
[v-cloak] {
      display: none;
}
```
v-text: the default parsing strings, it will cover the elements of the original content, usage:
```
<h1 v-text="msg">==========</h1>
```
In this case, the content of the msg Vue instances will replace ===========
v-html: parsing the HTML code to also cover element original content, use:
```
<div v-html="msg2">123456</div>
```
msg2: '<h2> Haha, I h1 element </ h2>', parses the HTML code so that when run in a browser

v-bind: for binding properties (abbreviated :) usage:

<input type="button" value="按钮" v-bind:title="mytitle + '123'">

Shorthand:

<input type="button" value="按钮" :title="mytitle + '123'">

v-on: the mechanism for binding events (abbreviated @), use:

<button type="button" v-on:click="show">点击</button>

Shorthand:

<button type="button" @mouseover="show">鼠标进入</button>

Event Modifier

.stop: stop the event bubbling usage:

<div class="inner" @click="divHandle">
            <button @click.stop="btnHandle">戳他</button>
        </div>

.prevent: prevent the default behavior, use:

        < A href = "http://www.baidu.com" @ click.prevent = "goBaidu" > have a problem, ask your mother degrees </ A >

.capture: Capture trigger event, usage:

<div class="inner" @click.capture="divHandle">
            <button @click="btnHandle">戳他</button>
        </div>

.self: Only when the user manipulates the current element to trigger this event, use:

<div class="inner" @click.self="divHandle">
            <button @click="btnHandle">戳他</button>
        </div>

.once: one-shot event, usage:

        < A href = "http://www.baidu.com" @ click.prevent.once = "goBaidu" > have a problem, ask your mother degrees </ A >

Vue on the first day