Vue.js Getting Started. 10 instructions. 4 Common methods

Before we go into Vue, let's look at three ways to create object-oriented using Vue.

Classes and objects are two of the most important concepts for programming, so be sure to clarify

Class: is an abstract concept (not actually present), (attribute, behavior)

Object: is the actual existence, is the instantiation of the object, read a few examples you will understand.

Before ES6:1, built-in constructors, 2, custom constructors, 3, literal.

1. Built-in constructors;

2. Custom constructors;

3, the literal amount.

Create a Vue instance

The first thing to make sure that your project introduces Vue.js is that it needs to be referenced by his frame!

Creating a Vue instance is simple

Data is equivalent to a storage, storing our data and then rendering the results as {{}} in the form of a page, stored before we first bind you to the corresponding Html,el: ""

Let's take a look at the next example

The result is

{{}} is a simple expression that can be made.

{{}} can be used to bind properties, binding JS expression, that can bind tags, then let's try

<div id = "PP" >{{name}}<div>

The result is

Even the labels are rendered together, which is obviously not the result we want. So how can you get rid of these tags, so! Next:

Vue consists mainly of 2 chunks: instructions, components

1, v-html as the above example

We just need to add v-html in div or v-text just write {{name}} in this div and you can try it. V-html is used to bind tags with v-text, bound text

Results:

2, V-model generally used in the expression of input, it is easy to implement the form control and data of two-way binding.

Results:

3, V-show. Listen to the name and you can guess that he has a relationship with the display and concealment of the elements, the v-show instruction is true/false, corresponding to show/hide,

When the value of See is false, the contents of the P tag are not visible, the P tag in the console adds the style to Display:none by default. is hidden, and when we change false to true, we can see it.

4, V-if: See the example below

Here are three instructions, V-if,v-else,v-on:click and a methods method.

V-if: I will find that when I change the F2 to False, I can't see the content, then I see the console, the second p tag is commented out,

Recall the example of V-show, when the console displays display which is the difference between the two commands.

Remember one point: if you need to switch the display/hide frequently, use v-show, if it is not possible to switch after running with V-if.

V-IF directive

5.v-else directives, in the programming language, if and else are generally paired, Vue is no exception, V-else has no absolute value, but requires the previous sibling node must use the V-IF directive, remember, there is no if there is no else.

6.v-on:click can be abbreviated to bind an event to @click,@. If the event is triggered, you can specify the handler function for the event.

7.v-once, because the P tag has the initial value, the first time the rendering of input and p have content, we add to P v-once, we update the value of MG, the P label will not change

A v-once was added to the chestnut above. Result: Content in P does not change based on input box input

Once as the name implies, once, also can add to click event, default can only click once

8.v-bind: It can be shortened directly to: Such a way then bind dynamic properties to compare common with the href,img tag of the A tag src.

9.v-for Sometimes the data we store is not just a simple number or a string, but an array type or object, and we're going to show the value of the array to the view and see chestnuts

(1) array notation: is not think and for the loop quite like, yes, the original JS also a for loop need a lot of code, this is not particularly simple and clear, originally an Li now become three

(2) Object writing: I write this to show that v-for can get not only the value but also the subscript, the property,

Objects are written in JSON color. V-for has a higher priority when v-if and v-for are used together

Finish. (Thanks to the summary of our predecessors!) ）

Vue.js Getting Started. 10 instructions. 4 Common methods