Home Web Front-end JS Tutorial Vuejs one-way binding, two-way binding, list rendering, response function

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

Jan 20, 2017 am 10:21 AM

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>
Copy after login

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

can also be changed to the following:

<div class="app">
{{ message }}
</div>
Copy after login

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 }}
Copy after login

②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>
Copy after login

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>
Copy after login

Effect:

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

①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>
Copy after login

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>
Copy after login

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>
Copy after login


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>
Copy after login


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);
Copy after login


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>
Copy after login


. 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1676
14
PHP Tutorial
1278
29
C# Tutorial
1257
24
Python vs. JavaScript: The Learning Curve and Ease of Use Python vs. JavaScript: The Learning Curve and Ease of Use Apr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

JavaScript and the Web: Core Functionality and Use Cases JavaScript and the Web: Core Functionality and Use Cases Apr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

JavaScript in Action: Real-World Examples and Projects JavaScript in Action: Real-World Examples and Projects Apr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

Understanding the JavaScript Engine: Implementation Details Understanding the JavaScript Engine: Implementation Details Apr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: Community, Libraries, and Resources Python vs. JavaScript: Community, Libraries, and Resources Apr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

Python vs. JavaScript: Development Environments and Tools Python vs. JavaScript: Development Environments and Tools Apr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

The Role of C/C   in JavaScript Interpreters and Compilers The Role of C/C in JavaScript Interpreters and Compilers Apr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

Python vs. JavaScript: Use Cases and Applications Compared Python vs. JavaScript: Use Cases and Applications Compared Apr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

See all articles