• 技术文章 >web前端 >Vue.js

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

    coldplay.xixicoldplay.xixi2020-10-13 10:51:28转载47
    Vue.js教程栏目介绍Vue.js学习之二的数据驱动开发 。

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

    数据绑定

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

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

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

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

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

    事件处理

    当然,01_sayHello程序目前只是一个单向显示数据的业务。如果想要让其具备交互能力,还需要为页面元素绑定事件。在 Vue.js 框架中,绑定事件首先要通过v-on指令来为目标元素标签注册事件处理函数,例如如果我们想在01_sayHello程序用一个按钮来控制<img>元素的显示与否,可以将该程序的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>你好,Vue.js</title>
    </head>
    <body>
        <p id="app">
            <h1> {{ sayHello }} </h1>
            <!-- 上述模版语法背后真正的 Vue 语法:
            <h1 v-text="sayHello"></h1>
            -->
            <img :src="vueLogo" v-show="isShow" style="width:200px">
            <!-- 上述简写指令的完整 Vue 语法:
            <img v-bind:src="vueLogo" style="width:200px">
            -->
            <input type="button" :value="isShow?'隐藏':'显示'" @click="toggleShow" />
            <!-- 上述简写指令的完整 Vue 语法:
            <input type="button" v-bind:value="isShow?'隐藏':'显示'" v-on:click="toggleShow" />
            -->
        </p>
    </body>
    </html>

    在这里,我主要做了如下修改:

    下面继续来对main.js中的代码进行修改,具体如下:

    const app = new Vue({
        el: '#app',
        data:{
            sayHello: '你好,Vue.js!',
            vueLogo: 'img/logo.png',
            isShow: true
        },
        methods:{
            toggleShow: function() {
                this.isShow = !this.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: '#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指令将<input type="text">标签绑定到newTask数据中,该指令与v-bind指令不同的在于,它是一种双向绑定。也就是说,v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中,也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后,我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中,然后将该事件处理函数注册给输入回车和鼠标单击事件。

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

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

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

    更多相关免费学习:javascript(视频)

    以上就是Vue.js 学习之二:数据驱动开发的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:cnblogs,如有侵犯,请联系a@php.cn删除
    专题推荐:Vue.js
    上一篇:深入理解vue响应式原理 下一篇:Vue中怎么对事件进行防抖和节流操作?
    第13期线上培训班

    相关文章推荐

    • node和laravel项目中预渲染vue.js应用程序• 10+个顶级Vue.js工具和库(分享)• Vue.js中使用无状态组件的方法介绍• Vue.js中使用道具将数据传递到的子组件• Vue.js 学习记录之一:学习规划和了解 Vue.js

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网