Detailed explanation of how Vue.js implements lists-JS Tutorial-php.cn

This article mainly shares with you the operation method of Vue.js to implement a list. Vue.js adopts the MVVM mode in design. When the View layer changes, it will automatically update to the ViewModel. Friends in need can refer to it, I hope it can help everyone.

1. Brief description of Vue.js

Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Like the front-end framework Angular, Vue.js adopts the MVVM mode in design. When the View layer changes, it will automatically update to the ViewModel. Vice versa, the View and ViewModel are established through two-way data binding (data-binding). Contact, as shown in the figure below

Vue.js divides the view and data into two parts through the MVVM pattern (or decoupling the view code and business logic), so we only We need to care about data operations, DOM view updates and a series of other things, Vue will automatically handle it for us.

If two-way binding of data is implemented through the v-model instruction, the user enters any value in the input box, and the value of the message entered by the user is displayed in real time (corresponding to the above MVVM mode The relationship diagram is not difficult to understand)

   Vue.js数据的双向绑定     
    
Message is: {{ message }}

Copy after login

The following poster directly bypasses the basic syntax of Vue.js. If you don’t understand the basic syntax, you can consult relevant information. Starting from the case of elegant implementation of task list operations through Vue.js, we will The fragmented knowledge modules of Vue.js are integrated together.

Next, let’s experience the fresh/concise writing style of Vue.js (pronounced /vjuː/, similar to view).

2. Vue.js elegant implementation task list Operation

Vue.js To preview the elegant implementation of task list renderings, please click

## 3. HTML skeleton CSS style code

Use BootStrap The front-end responsive development framework, HTML skeleton and CSS style Demo are as follows

Vue.js

任务列表

Vue.js - 是一套构建用户界面的渐进式框架

已完成的Task

JavaScript高级程序设计

Copy after login

4. Instantiate Vue and apply Vue instructions Directives to add projects

 
任务列表 ({{remainTask.length}})
   
   任务描述  
   
 
 已完成的Task({{filterTask.length}})

Copy after login

v-cloak mainly solves the problem of slow page initialization and garbled characters Problems (such as displaying Vue value expressions on the display page);

v-show command simple switching of CSS properties, suitable for frequent switching of CSS properties from display)

The v-if command determines whether the page is inserted, which is relatively expensive to switch compared to v-show

v-on:dblclick, v-on:click page event binding

(such as v-on:dblclick(task) method name dblclick() parameter task is an object in the currently clicked tasks array

v-for iteration instruction loop traversal Array filter is mainly used to filter qualified data/date formatting, etc.

computed is used to calculate attributes. The calculation of attributes is based on its dependent cache (such as tasks in the vue instance). Only when tasks The value will only be reset when the data changes

PS: Let’s take a look at the effect of using Vue.js to achieve list selection

html

 
 {{gameName}}

Copy after login

new Vue({ el: "#app", data: { gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄', '守望先锋' ], activeName: '' }, methods: { selected: function(gameName) { this.activeName = gameName } } })

Copy after login

After studying this article, have you mastered the method of implementing list in Vue.js? Let’s try it quickly.

Related recommendations:

Layout tags and list tags in html. Detailed graphic and text explanation

Usage summary of custom list item list-style

Introduction to how JavaScript implements automatic scrolling of Select list content

The above is the detailed content of Detailed explanation of how Vue.js implements lists. For more information, please follow other related articles on the PHP Chinese website!