Vue.js 학습 2: 데이터 중심 개발-View.js-php.cn

<p>Vue.js Tutorial이 칼럼에서는 Vue.js 학습 2부에서 데이터 기반 개발을 소개합니다.

<p>

<p>Vue.js 프레임워크에서 HTML 페이지 요소와 상호 작용하는 방법은 기본 JavaScript 인터페이스만큼 직접적이지 않습니다. 먼저 HTML의 일반 태그 속성과 유사한 일련의 Vue 지시어 속성을 포함해야 합니다. 요소 태그 데이터를 정의한 다음 JavaScript 코드에서 바인딩된 데이터를 수정하여 페이지 요소의 표시 모드와 콘텐츠를 수정합니다. 프로그래밍 방법 측면에서 우리는 일반적으로 데이터 콘텐츠의 변경 사항을 사용하여 전체 프로그램의 비즈니스 운영을 추진하는 이러한 방식을 "데이터 중심 개발"이라고 부릅니다. 노트의 이 부분에서는 데이터 기반 개발 방법을 사용하여 페이지 요소 및 CSS 스타일 제어와 같은 기본 기능을 달성하기 위해 데이터 바인딩 및 이벤트 응답을 완료하는 방법을 기록합니다.

데이터 바인딩

<p>이전 01_sayHello 프로그램에서는 이제 <h1> 태그의 템플릿 구문을 사용하여 sayHello 데이터에서 이 템플릿 구문은 실제로 <code>v-text 지시어의 구문 설탕입니다. 즉, <h1> 태그의 보다 표준화된 구문은 다음과 같아야 합니다. 01_sayHello程序中，我们现在<h1>标签中使用模版语法绑定了一个名称为sayHello的数据，该模版语法实际上是v-text指令的语法糖。换句话说，该<h1>标签更规范的语法应该是：

<h1 v-text="sayHello"></h1>

로그인 후 복사

<p>考虑到我们传统上编写 HTML 标签的习惯，使用{{ data_name }}这样的模版标记会是更让人舒服的做法。当然了，v-text指令设置的是当前元素标签下面的文本内容，如果要为标签本身的属性绑定数据，就得要使用v-bind指令，具体语法是在要设置的标签属性名前面加上v-bind:前缀。例如，如果想为<img>标签的src属性绑定数据，就可以这样做：

<img v-bind:src="vueLogo" style="width:200px">

로그인 후 복사

<p>另外，v-bind指令还有一个简写形式，只需要在要绑定数据的标签属性名之前加一个:前缀即可。在之前的01_sayHello程序中，我采用的就是这种形式。在页面元素上绑定了数据之后，接下来就可以在相对应的 JavaScript 脚本中创建 Vue 实例了，这就是我之前在01_sayHello程序的main.js文件中编写的内容。这个 Vue 实例对象中至少要定义以下两个成员：

el成员：该成员用于设置当前 Vue 实例所对应的元素容器，这通常是一个<p>元素，某些情况也可以是 HTML5 提供的<header>、<footer>等容器类标签。该成员的值可以是任何一个符合 CSS 选择器语法的字符串，例如#ID、.CLASSNAME等。
data成员：该成员用于设置页面元素中绑定的数据，它的值本身也是一个 JSON 格式的对象，该对象的每个成员都对应一个页面元素中绑定的对象，例如在之前的01_sayHello程序中，我绑定了sayHello和vueLogo这两个数据，就必须要在 Vue 对象的data成员中为为它们设置相应的值。

事件处理

<p>当然，01_sayHello程序目前只是一个单向显示数据的业务。如果想要让其具备交互能力，还需要为页面元素绑定事件。在 Vue.js 框架中，绑定事件首先要通过v-on指令来为目标元素标签注册事件处理函数，例如如果我们想在01_sayHello程序用一个按钮来控制<img>元素的显示与否，可以将该程序的index.htm代码修改如下：




    
    
    
    
    
    你好，Vue.js


    
        <h1> {{ sayHello }}

로그인 후 복사

<p>在这里，我主要做了如下修改：

首先，在<img>标签中增加了一个v-show指令，该指令可用于绑定一个布尔类型的数据（即这里的isShow），以此来决定是否显示其所在的标签。
然后，在页面中新增了一个按钮标签，并用v-bind指令设置了该标签的value属性，该属性的值是一个条件表达式，它将根据isShow的值显示不同的文本。
最后，用v-on指令（@是该指令v-on:前缀的简写形式）为新增的按钮标签注册了一个名为toggleShow的单击事件处理函数。

<p>下面继续来对main.js

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

로그인 후 복사

HTML 태그를 작성하는 전통적인 습관을 고려하여

{{ data_name }}</code >를 사용하세요. 이러한 템플릿 마크업이 더 편할 것입니다. 물론, <code>v-text

지시문은 현재 요소 레이블 아래에 텍스트 내용을 설정합니다. 데이터를 레이블 자체의 속성에 바인딩하려면

v-bind<를 사용해야 합니다. /code> 명령의 경우 구체적인 구문은 설정할 레이블 속성 이름 앞에 <code>v-bind:

접두사를 추가하는 것입니다. 예를 들어 <img> 태그의 src 속성에 데이터를 바인딩하려는 경우 다음과 같이 할 수 있습니다. <p>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>待办事项</title>
</head>
<body>
    <p id="app">
        <h1>待办事项</h1>
        <p id="todo">
            <ul>
                <li v-for="( task,index ) in taskList">
                    <input type="checkbox" v-model="doneList" :value="task">
                    <label :for="task">{{ task }}</label>
                    <input type="button" value="删除" @click="remove(index)">
                </li>
            </ul>
        </p>
        <p id="done" v-if="doneList.length > 0">
            <h2>已完成事项</h2>
            <ul>
                <li v-for="task in doneList">
                    <label :for="task">{{ task }}</label>
                </li>
            </ul>
        </p>
        <input type="text" v-model="newTask" @keyup.enter="addNew">
        <input type="button" value="添加新任务" @click="addNew">
    </p>
</body>
</html>

로그인 후 복사

Also, v- 바인딩지시문에는 축약된 형식도 있습니다. 데이터가 바인딩되는 레이블 속성 이름 앞에 : 접두사만 추가하면 됩니다. 이전 01_sayHello 프로그램에서는 이 형식을 사용했습니다. 페이지 요소에 데이터를 바인딩한 후 해당 JavaScript 스크립트에서 Vue 인스턴스를 생성할 수 있습니다. 이것은 이전 01_sayHello 프로그램의 main.js입니다. 파일에서. 이 Vue 인스턴스 객체에는 최소한 다음 두 멤버가 정의되어야 합니다. 🎜

🎜el 멤버 🎜: 이 멤버는 현재 Vue 인스턴스에 해당하는 요소 컨테이너를 설정하는 데 사용됩니다. 이는 일반적으로 <p> 요소이며 경우에 따라 <header> 및 <footer>는 HTML5에서 제공됩니다. 이 멤버의 값은 #ID, .CLASSNAME 등과 같은 CSS 선택기 구문을 준수하는 문자열일 수 있습니다.
🎜data member🎜: 이 멤버는 페이지 요소에 바인딩된 데이터를 설정하는 데 사용됩니다. 해당 값 자체도 JSON 형식의 개체입니다. 예를 들어 이전 01_sayHello 프로그램에서는 sayHello 및 vueLogo 두 데이터를 바인딩했습니다. Vue 객체의 data 멤버에 해당 값을 설정하세요.

이벤트 처리 🎜🎜물론 01_sayHello 프로그램은 현재 단방향 데이터 표시 사업일 뿐입니다. 대화형으로 만들려면 이벤트를 페이지 요소에 바인딩해야 합니다. Vue.js 프레임워크에서 이벤트를 바인딩하려면 먼저 v-on 지시어를 통해 대상 요소 태그에 대한 이벤트 핸들러를 등록해야 합니다. 01_sayHello 프로그램 버튼을 사용하여 <img  alt="Vue.js 학습 2: 데이터 중심 개발" > 요소 표시 여부를 제어합니다. 프로그램의 index.htm 코드를 다음과 같이 수정할 수 있습니다. : 🎜// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

const app = new Vue({
    el: &#39;#app&#39;,
    data:{
        newTask: &#39;&#39;,
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== &#39;&#39;) {
                      this.taskList.push(this.newTask);
                      this.newTask = &#39;&#39;;
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});
로그인 후 복사
로그인 후 복사
🎜여기서는 주로 다음과 같은 수정을 했습니다. 🎜우선 <img>v-show 지시어를 추가합니다. > 태그는 부울 유형 데이터(예: 여기서 isShow)를 바인딩하여 해당 위치에 라벨을 표시할지 여부를 결정하는 데 사용할 수 있습니다. 
그런 다음 새 버튼 레이블이 페이지에 추가되고 v-bind 지시문을 사용하여 레이블의 value 속성을 설정합니다. 이 속성의 값은 isShow 값에 따라 다른 텍스트를 표시하는 조건식입니다. 
마지막으로 v-on 명령을 사용합니다. (@는 v-on: 접두어의 약어입니다. 명령) as 새 버튼 레이블은 toggleShow라는 클릭 이벤트 핸들러를 등록합니다. 
🎜계속해서 main.js의 코드를 다음과 같이 수정해 보겠습니다.🎜rrreee🎜여기서는 주로 다음과 같이 수정했습니다.🎜首先，在 Vue 对象的data成员中定义了之前绑定的布尔类型数据isShow，并将其默认值设置为 true。
然后，为 Vue 对象新增了一个名为methods的成员。该成员用于设置页面元素中注册的事件处理函数，它的值也是一个 JSON 格式的对象。该对象的每个成员都对应一个已在页面元素中用v-on指令注册的事件处理函数。在这里就是toggleShow，该函数每次调用都会将isShow的值取反。
<p>这样一来，当我们在 Web 浏览器中打开该应用程序就会看到之前的 Vue 图标旁边多了个文本内容为隐藏的按钮。当按钮被单击之后，图标就会消失，按钮上的文本也变成显示。之后，如果该按钮再次被单击，一切又会恢复原状。
用户输入
<p>对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 Vue.js 框架实现能处理用户输入数据的应用程序界面。为此，我需要在code目录下创建一个名为02_toDoList的目录，并在该目录中创建一个名为index.htm的文件，其代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>待办事项</title>
</head>
<body>
    <p id="app">
        <h1>待办事项</h1>
        <p id="todo">
            <ul>
                <li v-for="( task,index ) in taskList">
                    <input type="checkbox" v-model="doneList" :value="task">
                    <label :for="task">{{ task }}</label>
                    <input type="button" value="删除" @click="remove(index)">
                </li>
            </ul>
        </p>
        <p id="done" v-if="doneList.length > 0">
            <h2>已完成事项</h2>
            <ul>
                <li v-for="task in doneList">
                    <label :for="task">{{ task }}</label>
                </li>
            </ul>
        </p>
        <input type="text" v-model="newTask" @keyup.enter="addNew">
        <input type="button" value="添加新任务" @click="addNew">
    </p>
</body>
</html>
로그인 후 복사
로그인 후 복사
<p>接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：
// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

const app = new Vue({
    el: &#39;#app&#39;,
    data:{
        newTask: &#39;&#39;,
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== &#39;&#39;) {
                      this.taskList.push(this.newTask);
                      this.newTask = &#39;&#39;;
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});
로그인 후 복사
로그인 후 복사
<p>下面来具体分析一下这个程序。在通常情况下，Web 应用程序在前端接受用户输入信息的方式主要有两种：第一种方式是用文本框元素来获取用户从键盘输入的信息。在 Vue.js 框架中，我们可以用v-model指令将<input type="text">标签绑定到newTask数据中，该指令与v-bind指令不同的在于，它是一种双向绑定。也就是说，v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中，也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后，我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中，然后将该事件处理函数注册给输入回车和鼠标单击事件。
<p>第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中，我在<p id="todo">元素中用v-for指令创建了一系列<input type="checkbox">，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。
<p>为了证明被选中的复选框被加入到了doneList数据列表中，我还在页面中添加了一个<p id="done">元素，并对doneList数据列表进行了遍历显示。需要说明的是，用于遍历数据列表的v-for指令主要有两种形式：


목록의 값만 순회해야 하는 경우 다음과 같이 작성할 수 있습니다. v-for="item in dataList", 그런 다음 데이터 목록( dataList) 데이터의 각 항목은 순회 프로세스 동안 반복 변수(item)에 의해 하나씩 읽혀집니다. 
v-for="item in dataList"，这时候数据列表（dataList）中的每一项数据就会在遍历过程中逐一被迭代变量（item）说读取。
当我们需要同时获取列表值及其在列表中的索引时，可以这样写：v-for="( item,index ) in dataList"，这时候数据列表（dataList）在遍历过程中，每一项数据的值会被item变量读取，而每一项数据的索引会被index变量读取。

<p>最后需要说明的是，对于<p id="done">元素本身，我使用了v-if指令，它的效果与之前的v-show指令基本相同，唯一的区别是：v-if指令会直接在 DOM 树上增加或删除其所在的元素节点，而v-show指令则是单纯通过其所在元素的style属性隐藏或显示该元素而已。在执行效率上，v-show指令要更高效一些。在这里，我们设置了当doneList列表中没有数据时，程序就直接将<p id="done">元素从页面中移除，反之则在页面中添加该元素。下面来看一下02_toDoList
목록 값과 목록의 인덱스를 동시에 가져와야 하는 경우<p> 다음과 같이 작성할 수 있습니다. v-for="(item,index) in dataList" code>, 이때 데이터 목록(<code>dataList)의 순회 과정에서 데이터의 각 항목의 값을 item 변수로 읽고 인덱스를 index 변수 읽기를 통해 각 데이터 항목을 읽습니다. 마지막으로 주목해야 할 점은 <p id="done"> 요소 자체에 대해 v-if를 사용했다는 것입니다. > 지시어의 효과는 기본적으로 이전 v-show 명령어와 동일합니다. 유일한 차이점은 v-if 명령어가 해당 위치에 요소를 직접 추가하거나 삭제한다는 것입니다. DOM 트리에 위치하며 v-show 명령은 해당 요소가 위치한 요소의 style 속성을 통해 요소를 숨기거나 표시합니다. 실행 효율성 측면에서는 v-show 명령이 더 효율적입니다. 여기서는 doneList 목록에 데이터가 없으면 프로그램이 페이지에서 <p id="done"> 요소를 직접 제거하도록 설정했습니다. 그런 다음 페이지에 요소를 추가합니다. 02_toDoList 프로그램 실행의 효과를 살펴보겠습니다.