Vuejs First introductory tutorials (one-way bindings, bidirectional bindings, list rendering, response functions) _javascript tips

What is a component?

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, the component is a custom element, and the Vue.js compiler adds special features to it. In some cases, a component can also be in the form of a native HTML element, which is extended in the IS attribute.

Next we introduce Vuejs one-way binding, bidirectional binding, list rendering, response function basics, details are as follows:

(i) One-way binding

<div id= "App" > 
{{message}} 
</div> 
<script> 
new Vue ({ 
el: ' #app ' 
) Data: {message 
: ' Hello vue.js! ' 
} 
}] 

①el should indicate the meaning of the binding, binding Id=app this label

You can also change to the following:

<div class= "App" > 
{{message}} 

El: '. App ',

As effective.

But if there are multiple words, only the first one is valid:

<div class= "App" > 
{{message}} 
</div> 
<div class= ' app ' > 
{message}} 
</ div> 
Hello vue.js!
{{Message}}

The message variable in ②data, representing the value of the {{message}

(ii) Two-way binding

<div id= "App" > 
{{message}} 
<br/> 
<input v-model= ' message '/> 
</div> 
<script> 
New Vue ({ 
el: ' #app ', 
data: {message 
: ' Hello vue.js! ' 
} 
}) 

The effect is:

The ①input input box has the initial value, the value is the value of the message attribute in data;

② Modifying the value of the input box can affect the value outside;

(iii) function return value

<div id= "App" > 
{{message ()}} 
<br/> 
<input v-model= ' message () '/> 
</div> 
<script> 
New Vue ({ 
el: ' #app ', 
data: { 
message:function () {return 
' Hello vue.js! '; 
} 
} 
}) 

Effect:

The ① output value is also the return value of the message;

② disadvantage: Loss of two-way binding!

(iv) Rendering list

<div id= "App" > 
<ul> 
<li v-for= "list in Todos" > 
{{list.text}} 
</li> 
</ul> 
</div> 
<script> 
new Vue ({ 
el: ' #app ', 
data: { 
todos: [ 
{ Text: "1st"}, 
{text: "2nd"}, 
{text: "3rd"} 
] 
} 
) 

The list in the v-for, like the I in the inside,

Personally believe that

① can see the list in Todos as a for list in Todos

② then the list.text of the next line is understood as Todos[list].text

The v-for tag is then copied over and over again in his unit.

(v) Processing user input

<div id= "App" > 
<input v-model= "message" > 
<input type= "button" value= "Value +1" v-on:click= "add"/ > 
<input type= "button" value= "Value -1" v-on:click= "minus"/> <input type= 
"button" value= "Reset to zero" v-on: click= "reset"/> 
</div> 
<script> 
new Vue ({ 
el: ' #app ', 
data: { 
message:1 
}, 
methods: { 
add:function () { 
this.message++;//This step is to add this to get the value 
} correctly, 
minus: function () { 
this.message--; 
}, 
reset:function () { 
this.message = 0 
} 
}}) 

Effect:

① the value of the input box, click the Add button once, the value is +1;

②, if not added, returns the result, such as Nan, if the normal expression is incorrectly added;

The value of the message in the ③data is the initial value;

④methods is a collection of functions, separated by commas;

When ⑤ gets the value, add this, for example, This.message gets the value of the message.

(vi) Multifunctional

<div id= "App" > 
<input v-model= "val" v-on:keypress.enter= "Addtolist" > 
<ul> 
<li V-for= "Val in Values" > 
{{val.val}} 
<input type= "button" value= "delete" v-on:click= "Removelist ($index)" > 
</li> 
</ul> 
</div> 
<script> 
new Vue ({ 
el: ' #app ', 
Data: { 
val: "1", 
values: [] 
}, 
methods: { 
addtolist:function () { 
var val = parseint ( This.val.trim ()); Note that the This.val if 
(val) { 
This.values.push ({val:val}) is 
used when the upper Val is a string type, and if it is a numeric type; 
This.val = String (val + 1); 
}, 
removelist:function (index) { 
This.values.splice (index, 1); 
} 
} 
}) 

Effect:

① Initial input box has a value of 1;

② presses ENTER in the input box, it converts the contents of the input box to a number and adds it to a list of the converted digits and a delete button, and the value in the input box becomes the value added to the number.

As shown in figure:

③ His addition, using a two-way binding, push the value of input into the array of values in data, and then use the effect of the render list to output a multiline value.

④ in the button tag, the parameter name of the function is given a parameter, which is the row index, and the parameter name is $index

In the ⑤ tag, the function name of the trigger function, which can be parenthesized or without parentheses, seems to have no effect.

(vii) Labeling and API summaries (1)

①{{variable Name}}

Represents a bound variable, which is required when called with this. Variable name

②v-model= "Variables"

Bidirectional binding use, if the input does not add any type is the text, if the addition type is type, for example:

<input v-model= "Date" type= "date"/> 

The value of the input box for the date type is bound together with the content displayed by the Li label.

③v-on:click= "function name"

Click to trigger the function, can be added () or not, $index as a parameter index, index value starting from 0.

④v-for

Two-way binding in the array content update, will be updated in real time, V-model is also;

Similar to in statement, which is used more than once

⑤v-on: Events

The event that triggers, there is click (click), KeyPress (press the key)

Events can be followed by more specific, such as Keypress.enter is a carriage return, keypress.space is a space, etc.

More needs to see

⑥new Vue

An instance of Vue is passed by new, and then an object is passed as an argument to the instance;

which

El represents a bound template (only matches to the first binding)

Data is used as a direct fetch, for example, in V-model or in {{variable name}}

Methods Representation method

⑦ function Internal Call variable

Pass this. Variable name, for example:

Data: { 
val: "1", 
values: [] 
}, 
methods: { 
addtolist:function () { 

Here the This.val is the above Data.val, is also the HTML {{val}}, is also v-model= "Val", but is not

<li v-for= "Val in Values" > 
{{val.val}} 
<input type= "button" value= "delete" v-on:click= "Removelist ($ Index) "/> 

Inside the Val.val, as for the reason, the individual thinks that the Val here is in the scope of the v-for, so Val in the Val in values has higher precedence in the scope chain

The above is a small series to introduce you to the introduction of the first Vuejs tutorial detailed (one-way binding, two-way binding, list rendering, response function), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!