Vue.js 学习之二：数据驱动开发-Vue.js-PHP中文网

首页

web前端

Vue.js

Vue.js 学习之二：数据驱动开发

coldplay.xixi

Oct 13, 2020 am 10:51 AM

vue.js

Vue.js教程栏目介绍Vue.js学习之二的数据驱动开发。

Vue.js 学习之二：数据驱动开发

在 Vue.js 框架中，与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接，它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据，然后再通过在 JavaScript 代码中修改这些被绑定的数据来修改页面元素的显示方式与内容。在编程方法上，我们通常将这种用数据内容的变化来驱动整个程序业务运作的方式称之为"数据驱动开发"。这部分笔记将记录如何利用数据驱动的开发方式来完成数据绑定、事件响应，以实现控制页面元素与 CSS 样式等各项基本功能。

数据绑定

在之前的01_sayHello程序中，我们现在4a249f0d628e2318394fd9b75b4636b1标签中使用模版语法绑定了一个名称为sayHello的数据，该模版语法实际上是v-text指令的语法糖。换句话说，该4a249f0d628e2318394fd9b75b4636b1标签更规范的语法应该是：

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

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

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

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

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

事件处理

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




    
    
    
    
    
    你好，Vue.js


    
        
 {{ sayHello }}

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

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

下面继续来对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;
        }
    }
});

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

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

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

用户输入

对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 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>

接下来，我会在同一目录下再创建一个名为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);
                  }
                }
    }
});

下面来具体分析一下这个程序。在通常情况下，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指令主要有两种形式：

当我们只要遍历列表中的值时，可以这样写：v-for="item in dataList"，这时候数据列表（dataList）中的每一项数据就会在遍历过程中逐一被迭代变量（item）说读取。
当我们需要同时获取列表值及其在列表中的索引时，可以这样写：v-for="( item,index ) in dataList"，这时候数据列表（dataList）在遍历过程中，每一项数据的值会被item变量读取，而每一项数据的索引会被index变量读取。

最后需要说明的是，对于e65cf9c0646c5567cdbd377fa7d191fd元素本身，我使用了v-if指令，它的效果与之前的v-show指令基本相同，唯一的区别是：v-if指令会直接在 DOM 树上增加或删除其所在的元素节点，而v-show指令则是单纯通过其所在元素的style属性隐藏或显示该元素而已。在执行效率上，v-show指令要更高效一些。在这里，我们设置了当doneList列表中没有数据时，程序就直接将e65cf9c0646c5567cdbd377fa7d191fd元素从页面中移除，反之则在页面中添加该元素。下面来看一下02_toDoList程序运行的效果：

更多相关免费学习：javascript（视频）

以上是Vue.js 学习之二：数据驱动开发的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：cnblogs。如有侵权，请联系admin@php.cn删除

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。

vue.js在前端的力量：关键特征和好处Apr 21, 2025 am 12:07 AM

Vue.js是一个渐进式的JavaScript框架，适用于构建高效、可维护的前端应用。其关键特性包括：1.响应式数据绑定，2.组件化开发，3.虚拟DOM。通过这些特性，Vue.js简化了开发过程，提高了应用性能和可维护性，使其在现代Web开发中备受欢迎。

vue.js比反应好吗？Apr 20, 2025 am 12:05 AM

Vue.js和React各有优劣，选择取决于项目需求和团队情况。1)Vue.js适合小型项目和初学者，因其简洁和易上手；2)React适用于大型项目和复杂UI，因其丰富的生态系统和组件化设计。

vue.js的功能：增强前端的用户体验Apr 19, 2025 am 12:13 AM

Vue.js通过多种功能提升用户体验：1.响应式系统实现数据即时反馈；2.组件化开发提高代码复用性；3.VueRouter提供平滑导航；4.动态数据绑定和过渡动画增强交互效果；5.错误处理机制确保用户反馈；6.性能优化和最佳实践提升应用性能。

vue.js：定义其在网络开发中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web开发中的角色是作为一个渐进式JavaScript框架，简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发，使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM，优化性能。3)实际项目中，使用Vuex管理全局状态和优化数据响应性是常见实践。

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。

Netflix的前端：React（或VUE）的示例和应用Apr 16, 2025 am 12:08 AM

Netflix使用React作为其前端框架。1)React的组件化开发模式和强大生态系统是Netflix选择它的主要原因。2)通过组件化，Netflix将复杂界面拆分成可管理的小块，如视频播放器、推荐列表和用户评论。3)React的虚拟DOM和组件生命周期优化了渲染效率和用户交互管理。

前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

See all articles