Vue.js Tutorialcolumn introduces the data-driven development of Vue.js learning part two.

In the Vue.js framework, the way to interact with HTML page elements is not as direct as the native JavaScript interface. It is first embedded in a series of similar HTML element tags. Bind data to the Vue directive attributes of ordinary tag attributes, and then modify the display mode and content of page elements by modifying these bound data in JavaScript code. In terms of programming methods, we usually call this way of using changes in data content to drive the business operations of the entire program "Data-driven development". This part of the notes will record how to use data-driven development methods to complete data binding and event response to achieve basic functions such as controlling page elements and CSS styles.

Data Binding

In the previous01_sayHelloprogram, we now bind a name using template syntax in the4a249f0d628e2318394fd9b75b4636b1tag For the data ofsayHello, this template syntax is actually the syntactic sugar of thev-textinstruction. In other words, the more standardized syntax of the4a249f0d628e2318394fd9b75b4636b1tag should be:

Considering our traditional habit of writing HTML tags, use{{ data_name }}Such template tags will be more comfortable. Of course, thev-textdirective sets the text content under the current element label. If you want to bind data to the attribute of the label itself, you have to use thev-binddirective. The specific syntax is to add thev-bind:prefix in front of the label attribute name to be set. For example, if you want to bind data to thesrcattribute of thea1f02c36ba31691bcfe87b2722de723btag, you can do this:

Also,v-bind# The ## directive also has an abbreviated form. You only need to add a:prefix before the label attribute name to which data is bound. In the previous01_sayHelloprogram, I used this form. After binding the data on the page element, you can create a Vue instance in the corresponding JavaScript script. This is themain.jsfile I used in the01_sayHelloprogram. content written in. At least the following two members must be defined in this Vue instance object:

• elMember: This member is used to set the element container corresponding to the current Vue instance. , which is usually ae388a4556c0f65e1904146cc1a846beeelement. In some cases, it can also be the1aa9e5d373740b65a0cc8f0a02150c53,c37f8231a37e88427e62669260f0074dand other container classes provided by HTML5. Label. The value of this member can be any string that conforms to CSS selector syntax, such as#ID,.CLASSNAME, etc.
• dataMember: This member is used to set the data bound in the page element. Its value itself is also an object in JSON format. Each of the objects Each member corresponds to an object bound in a page element. For example, in the previous01_sayHelloprogram, I bound the two datasayHelloandvueLogo, You must set corresponding values for them in thedatamember of the Vue object.

Event processing

Of course, the

01_sayHelloprogram is currently only a one-way data display business. If you want to make it interactive, you also need to bind events to page elements. In the Vue.js framework, to bind an event, you must first register an event handler for the target element tag through thev-ondirective. For example, if we want to use a button in the01_sayHelloprogram To control whether thea1f02c36ba31691bcfe87b2722de723belement is displayed or not, you can modify theindex.htmcode of the program as follows:

       
       
       
       

        

         
        
       
       

        

         
        
       
{{ sayHello }}
       
       
       

Here, I mainly did the following Modification:

First of all, a
• v-showdirective is added to thea1f02c36ba31691bcfe87b2722de723btag, which can be used to bind a Boolean type Data (that is,isShowhere) to determine whether to display the label where it is located.
Then, a new button label is added to the page, and the
• v-binddirective is used to set thevalueattribute of the label. The value of this attribute is a condition An expression that will display different text based on the value ofisShow.
Finally, use the
• v-oncommand (@is the abbreviation of thev-on:prefix of the command) for the new button The label registers a click event handler namedtoggleShow.

Let’s continue to modify the code in

main.js, as follows:

const app = new Vue({ el: '#app', data:{ sayHello: '你好，Vue.js！', vueLogo: 'img/logo.png', isShow: true }, methods:{ toggleShow: function() { this.isShow = !this.isShow; } } });

Here, I mainly made the following modifications:

• 首先，在 Vue 对象的data成员中定义了之前绑定的布尔类型数据isShow，并将其默认值设置为 true。
• 然后，为 Vue 对象新增了一个名为methods的成员。该成员用于设置页面元素中注册的事件处理函数，它的值也是一个 JSON 格式的对象。该对象的每个成员都对应一个已在页面元素中用v-on指令注册的事件处理函数。在这里就是toggleShow，该函数每次调用都会将isShow的值取反。

这样一来，当我们在 Web 浏览器中打开该应用程序就会看到之前的 Vue 图标旁边多了个文本内容为隐藏的按钮。当按钮被单击之后，图标就会消失，按钮上的文本也变成显示。之后，如果该按钮再次被单击，一切又会恢复原状。

用户输入

对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 Vue.js 框架实现能处理用户输入数据的应用程序界面。为此，我需要在code目录下创建一个名为02_toDoList的目录，并在该目录中创建一个名为index.htm的文件，其代码如下：

         
  
 
待办事项
 
 
 
  {{ task }}  
 
 
 
 
已完成事项
 
 
 {{ task }} 
 
 
   
  

接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：

// 程序名称： toDoList // 实现目标： // 1. 学习 v-model、v-for 等指令 // 2. 掌握如何处理用户输入 const app = new Vue({ el: '#app', data:{ newTask: '', taskList: [], doneList: [] }, methods:{ addNew: function() { if(this.newTask !== '') { this.taskList.push(this.newTask); this.newTask = ''; } }, remove: function(index) { if(index >= 0) { this.taskList.splice(index,1); } } } });

下面来具体分析一下这个程序。在通常情况下，Web 应用程序在前端接受用户输入信息的方式主要有两种：第一种方式是用文本框元素来获取用户从键盘输入的信息。在 Vue.js 框架中，我们可以用v-model指令将e67338802192d7bd5294b2aa965c9bc5标签绑定到newTask数据中，该指令与v-bind指令不同的在于，它是一种双向绑定。也就是说，v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中，也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后，我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中，然后将该事件处理函数注册给输入回车和鼠标单击事件。

第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中，我在5ab0e995a190de047e013a6966610e55元素中用v-for指令创建了一系列514d05be645eb7d51e331036aaf6fa36，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。

为了证明被选中的复选框被加入到了doneList数据列表中，我还在页面中添加了一个e65cf9c0646c5567cdbd377fa7d191fd元素，并对doneList数据列表进行了遍历显示。需要说明的是，用于遍历数据列表的v-for指令主要有两种形式：

• When we only need to traverse the values in the list, we can write like this:v-for="item in dataList", then the data list (Each item of data in dataList) will be read one by one by the iterative variable (item) during the traversal process.
• When we need to get the list value and its index in the list at the same time, we can write like this:v-for="(item,index) in dataList", at this time, during the traversal process of the data list (dataList), the value of each item of data will be read by theitemvariable, and the index of each item of data will beindexVariable reading.

The last thing to note is that for the9359e0ff49de62abac442c8fefd08430element itself, I used thev-ifdirective, which The effect is basically the same as the previousv-showinstruction. The only difference is: thev-ifinstruction will directly add or delete the element node where it is located on the DOM tree, while # The ##v-showcommand simply hides or displays the element through thestyleattribute of the element where it is located. In terms of execution efficiency, thev-showcommand is more efficient. Here, we set that when there is no data in thedoneListlist, the program will directly remove the9359e0ff49de62abac442c8fefd08430element from the page, and vice versa. Add this element to the page. Let’s take a look at the effect of02_toDoListprogram operation:

## More related free learning:

javascript(Video)

The above is the detailed content of Vue.js Learning 2: Data-Driven Development. For more information, please follow other related articles on the PHP Chinese website!