Vuejs one-way binding, two-way binding, list rendering, response function

What is a component?

Component is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also take the form of native HTML elements, extended with the is attribute.

Next, I will introduce you to the basic knowledge of vuejs one-way binding, two-way binding, list rendering, and response functions. The specific details are as follows:

(1) One-way binding

<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

①el should mean binding. The label binding id=app

can also be changed to the following:

<div class="app">
{{ message }}
</div>

el: '.app',

is equally valid.

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

<div class="app">
{{ message }}
</div>
<div class="app">
{{ message }}
</div>
Hello Vue.js!
{{ message }}

②The message variable in data represents the value of {{message}

(2) Two-way binding

<div id="app">
{{ message }}
<br/>
<input v-model="message"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

The effect is:

①There is an initial value in the input input box, and the value is the value of the message attribute in data;

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

(3) Function return value

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

Effect:

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

②Disadvantage: Loss of two-way binding!

(4) Rendering list

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

The list in v-for is similar to the i in for in,

In my opinion,

① You can understand list in todos as for list in todos

② Then understand the list.text of the next line as todos[list].text

Then where is the v-for tag, it is copied multiple times in units of it.

(5) Processing user input

<div id="app">
<input v-model="message">
<input type="button" value="值+1" v-on:click="add"/>
<input type="button" value="值-1" v-on:click="minus"/>
<input type="button" value="重置归零" v-on:click="reset"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: 1
},
methods: {
add: function () {
this.message++; //这步要加this才能正确获取到值
},
minus: function () {
this.message--;
},
reset: function () {
this.message = 0;
}
}
})
</script>

Effect:

①For the value of the input box, click the add button once, the value will be +1;

②If it cannot be added, the result will be returned as if the normal expression is added incorrectly, such as NaN;

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

④Methods is the function Collections, separated by commas;

⑤When getting the value, add this. For example, this.message gets the value of message.

(6) 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="删除" v-on:click="removeList($index)"/>
</li>
</ul>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
val: "1",
values: []
},
methods: {
addToList: function () {
var val = parseInt(this.val.trim()); //注意，因为当上面的val是字符串类型的时候，才能用trim()，如果是数字类型，则用this.val
if (val) {
this.values.push({val: val});
}
this.val = String(val + 1);
},
removeList: function (index) {
this.values.splice(index, 1);
}
}
})
</script>

Effect:

①The value in the initial input box is 1;

② Press the Enter key in the input box, and the contents of the input box will be converted into numbers and added to a list. The converted numbers and a delete button will be in the list, and the value in the input box will be entered. Becomes the value converted to a number plus one.

As shown in the figure:

③ His addition uses two-way binding to push the input value to the values ​​in the data Array seed, and then use the effect of rendering the list to output multi-line values.

④In the button tag, the parameter name of the function is given as a parameter, which is the index of the row. The parameter name is $index

⑤In the button tag, the triggered function The function name can be added with or without parentheses. Actual testing seems to have no effect.

(7) Label and API summary (1)

① {{ variable name}}

represents the bound variable, and this needs to be used when calling. Variable name

② v-model=”Variable”

is used for two-way binding. If no type is added to the input, it is text. If type is added, it is type. For example:

<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>

will bind the value of the date type input box to the content displayed in the li tag.

③ v-on:click="function name"

This function is triggered when clicked, you can add () or not, $index is used as a parameter to represent the index, and the index value Start from 0.

④ v-for

The two-way binding will be updated in real time after the array content is updated, as will v-model;

Similar to the for in statement, it is What is used many times is

⑤ v-on: event

is the triggered event, including click (click), keypress (key press)

event It can be followed by more specific ones, for example, keypress.enter is carriage return, keypress.space is space, etc.

More needs to be viewed

⑥ new vue

Pass a new instance of vue, and then pass an object as a parameter to this instance;

where:

el represents the bound template (only the first bound one will be matched)

data represents data and can be accessed directly, for example, used in v-model or {{variable name}}

methods represents methods

⑦ The variable

is called inside the function through this. variable name, for example:

data: {
val: "1",
values: []
},
methods: {
addToList: function () {
console.log(this.val);

This.val here is the data.val above, which is also in the html {{val}} is also v-model="val", but it is not the val.val in

<li v-for="val in values">
{{val.val}}
<input type="button" value="删除" v-on:click="removeList($index)"/>
</li>

. As for the reason, I personally think that the val here is in v -within the scope of for, so the val in val in values ​​has a higher priority in the scope chain

I hope it helps everyone. If you have any questions, please leave me a message and the editor will Reply to everyone promptly. I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to Vuejs one-way binding, two-way binding, list rendering, and response functions, please pay attention to the PHP Chinese website!