vue (a)

Js is a progressive frame 1.vue

vue (core) + vuex + elementUi + axios + vuerouter family bucket

react frame is gradual;

1) introduction of file

Similar to that of a bunch of files jquery

The company is to use server mode, instead of references;

2) vue syntax

mvc: model view controller

In vue data and views are separated,

dom performance consuming operation, require extensive prior dom operation;

vue and react in the pursuit of minimizing dom operation;

"Data to promote the View"
after only concerned with how to change the data;
MVVM pattern: model view viewmodel;

msg

(msg variable)
so use vue syntax, you can write directly variable in html;

** vue logic is to: change data, do not look interface;

vue of basic grammar:

1) Create a vue instance

{{message}}

---- {{}} vue grammar, provided js environment, you can write js syntax, you can provide an expression, not a statement (variable declarations, function declaration, if else etc;); this can render directly to the page js in;

** two points:
1) must hang up in the el
2) with the html {} operation, and is an expression, not the statement;

And ** is the innerText innnerHtml problems in the native, where there;
** curly brackets will parse the data to plain text;

How to insert html page?

Instruction: refers to the special prefix attributes with v-; (instruction executed later are by js)
V-HTML: Lane element inserted into html;

For example:

Jump

3) how the operating element's attributes (style, value, etc.)?

New instructions: v-bind, the binding element for the dynamic property (id class style href src, etc.), can be abbreviated as: (colon)

Example: v-bind: class = " name"; ( this is added to the tag div)
Example 2: the bind-V: the href = "URL"
** V-class and the uses of the bind specific style of;
** class bind directly to an object, the object attribute value is a Boolean value; used to indicate the presence or absence of the class;

E.g:

, There isActive is a variable name, true and false with the following data to represent, true word is the name of this class exist;

*** bound data objects do not have defined inline in a template:

data: { classObject: { active: true, 'text-danger': false } }

** direct binding of an array; array variables are stored inside the real name of the class, you have to look for specific data from inside

- array variables exist only

data{
activeClass：“box”
errorClass；“error”
}

(Ii) style: Inline style;

v-bind：style

v-bind: style object syntax is very intuitive - looked very much like CSS, but in fact is a JavaScript object. CSS property name can be separated by a camel (camelCase) or dashes (kebab-case, remember quotes) is named:

data: {activeColor: 'red', fontSize: 30} is directly bound to an object is usually better style, it makes more clear the template:

data: { styleObject: { color: 'red', fontSize: '13px' } }

Array:

data: {
baseStyles: {
color: ‘red’,
fontSize: ‘13px’
width:‘10px’
height:‘100px’
}
overridingStyles: {

width:'12px'
height:'120px'

}
}

*** two styles overlap:

---

Show and hide:

v-show: Binding Boolean value, displaying and hiding; elements are present, switching style
v-if: Binding Boolean value, displaying and hiding; element is rendered; else-if, else-if , else can follow, for multiple conditional, among them must be mutually exclusive;

For example:

=========================

v-text: futile, equivalent to {{}} is the entered Inserts;

v-model: two-way binding,

View the original data driver (interface), but v-model can be two-way binding;

** here only for form elements, because data can be modified to interface;

For example:

** single Boolean check boxes are bound;
a plurality of check boxes are bind array;
checkbox bound directly to the value;
select box can be bound to a value;

========================================

v-on: bind events

For example:

I point

** data stored all the data, methods are all methods;