Preliminary understanding of vue

Preliminary understanding of vue

Front-end development history

html

• html [ 1990 ] ----> html5 [ 2008.1.12 ]

css

• css 1.0 1996
• css 2.0 1998
• css 3.0 2001

EcmaScript

• Born in 1997
• 2015 EcmaScript 2015
• 2016 EcmaScript 2016 dart language vs javascript

With the front-end logic projects increasingly complex and difficult to maintain, so the introduction of the front side of the back-end architecture of thought (MV *)

M Model data layer
V View View layer
VM view the ViewModel Model (VM is renamed by the business logic come P)
P Presenter proponent (Controller come renamed)
C controller the Controller (business logic)

Frame name	Architecture	Birth Date
Backbone.js	MVP	2010.10
Angular.js( 1.0 )	MVC	2010.10
Angular.ts( 2.0 )	MVC->MVVM	2016
1.0 Overview	MVVM	2014.07
View 2.0	MVVM	2016.09
React 1.0	MVVM	2012

React 2012 is not recognized front-end MVC framework for thinking this, you can be seen as simply React V in MVC

github statistics (international usage) does not mean that the mainland units are: K

angular.js	angular.ts	view	react
59.6	49.1	142	131

Learning curve: Vue <React <Angular (2.0)

Popular front-end

Mobile web && hybird app (mixing app)

app

1. native app (Android ios java ME)
2. webapp (Application app in the browser)
3. Hybird app (mixing app)
4. webapp embed third-party native application library (access to native device (mobile phone) interface privileges, such as: a camera)

MV * illustration

MVC
| C changed its name to P
MVP
| P is more like a matchmaker (a bridge connecting the MV)
MVVM
| p VM is renamed come and V VM relationship more intimate
| "MVVM": two-way data binding, View of changes, mapping ViewModel, on the contrary, like
Note:
we are more than these frameworks are: a one-way data flow (data flow from the parent child)

Initial Vue.js

1. Vue.js is a personal project, especially rain the river
2. Vue.js is a MVVM framework
3. Vue.js javascript is a progressive frame (the harder Science)
4. The front there is a relatively well-known personal projects MVVM: Stuart Masami avonlon.js

vue.js installation

1. script tag introduced (cdn | Download)
2. The modular installation npm / cnpm / yarn

Documents learning

1. First find the tutorial / 5min quick start / quick start
2. Download and install
3. Basic demo
4. Learn api and configuration

Vue other frameworks and Comparative

Vue and React

React and Vue have many similarities, they have:

• Use Virtual DOM
• Providing the response of formula (Reactive) and component (Composables that) view component.
• We will focus on keeping the core library, while the other functions such as routing and management to the global state associated libraries.

Links
https://cn.vuejs.org/v2/guide/comparison.html

About Vue

Use the script tag is introduced, it will expose a Vue global variable
Vue is a constructor function
we want to write js syntax in the template, we use the syntactic sugar called mustache of (double braces)
we will js grammar written in inside {} {}

<div id="app">
<p> {{ msg }} </p>
</div>

Examples of the new Vue, here we call root instance
is also a component instance
components: a polymer component having a html css js like
data changes, the view will change accordingly, we call this form : view data driver
M -> VM

1. Why script tag after the introduction, there will be a global variable it?

( function ( global ) {
console.log( global ) //window对象
global.Vue = function(){}
})( this )

2. Why is the introduction of modular (npm / cnpm / yarn) can do?

vue使用了 Module.exports / amd
( typeof exports ==='object' ) && ( typeof module !== 'undefined' ) ?
module.exports = factory() // Vue :
typeof define === 'function' && define.amd ? define(factory) :
( global = global || self, global.Vue = factory());

Look Vue.js source code

1. Anonymous function is to package
   (function () {}) ( )
   first () function is defined in the anonymous
   second () function call is an anonymous
   anonymous function benefits:
2. Safety
3. Resolve naming conflicts
   (function (Global, Factory) {
   // Global global object refers
   // factory factory function
   }) (this, function () {})
4. That is how you can use the Vue Vue global variables, you can also install modular
5. It is the use of encapsulated prototypes
6. Using prototype
   function the Fn (Options) {
   // this result to Example fn fn = new new instance of the Fn var ()
   }
   Fn.protype.name = "Gabriel Yan"
   Fn.protype.init = function () {
   Console. log ( 'functions')
   }