使用Vue建立一个...等待...待办事项!

作者 : IT 大叔 本文共4524个字,预计阅读时间需要12分钟 发布时间: 2020-09-7

在我们通过Operation Spark课程进行工作时,我们被迫学习一些可用于实现模型-视图-控制器模式(或类似模式)的框架,例如Backbone,Angular和React。在研究MVC框架时,我不断听到我们不涉及的另一个Vue。我决定对该框架进行一些独立的研究,并撰写此博客文章,其中我将逐步尝试使用Vue构建待办事项清单。

什么是Vue?

如前所述,Vue只是一个可用于构建用户界面的框架。它专门尝试处理应用程序视图,并通过绑定并控制特定的HTML元素来实现此目的。此绑定意味着,当更改绑定的对象时,HTML元素也会更改。为了了解它的外观,让我们看一些HTML:

<div id="todoList">
  <h1>To Do List</h1>
</div>

以及我们的Vue对象:

const newTodoList = new Vue({
  el: '#todoList',
})

请注意,我们创建了一个新的Vue,然后为其分配值为#todoList的el键。这告诉我们的视图对象,它希望将自己附加到ID为“ todoList”的HTML文件中的元素上。显然,没有更多信息,此绑定就没有任何意义。我们可以为Vue分配数据属性,以传递一些信息。现在,我们的HTML文件和JS文件可能看起来像这样:

<div id="todoList">
  <h1>{{title}}</h1>
</div>
const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
  },
})

我们已经声明了数据对象并创建了“ title”属性。注意,我们已经更新了HTML文件中的h1标签。与Angular相似,Vue使用双括号从我们的Vue对象访问属性。在这种情况下,我们要从数据对象访问title属性。这很酷,但这并不能使它成为工作清单!为此,让我们在数据属性中添加一些内容,以容纳我们需要完成的所有工作。当我们使用它时,让我们继续并创建一个id属性,以便我们可以跟踪列表中的内容。

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
  },
})

因此,我们有一些东西可以完成我们的任务,但是如何添加一些东西呢?让我们回到我们的html文件,并构建一些功能以允许这种情况发生。也许是将任务添加到数组的输入元素和按钮?让我们看一下外观:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input>
    <button>Add Task</button>
  </ul>
</div>

在这里,我们添加了一个ul元素,该元素将保存我们的列表,一个输入表单和一个按钮。但是我们还不在那里,对吗?我们需要将该表单和该按钮链接到Vue对象上的某些东西。我们还需要将列表显示在某个地方,但稍后我们将进行介绍。现在,让我们对HTML和代码进行一些更改:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>
const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
    newTask: '',
  },
  methods: {
    addTask() {
      const newTaskItem = {
        id: this.id,
        text: this.newTask,
      };
      this.taskList.push(newTaskItem);
      this.id++;
      this.newTask = '';
    }
  }
})

因此,这里我们建立了清单中的大多数功能。注意,我们已经向数据对象添加了newTask属性。然后,我们使用“ v-model =“ newTask”指令在输入表单中创建了与该对象的双向数据绑定。V-model是一些语法糖,只知道如何更新与用户事件有关的数据。情况下,当我们在表单中键入内容时,newTask属性将被重新分配给我们键入的字符串。我们还添加了一个占位符,当该字符串为空时将显示该内容。在我们的按钮元素中,我们使用了v -on:click =“ addTask”指令以侦听dom在我们的按钮上的单击,并在听到该单击时运行addTask方法。回到我们的Vue对象,我们已经声明了一个method对象,并开始定义我们里面的方法。我们拥有addTask方法也就不足为奇了。简而言之,此方法使用视图中的newTask和id属性创建一个对象,将该对象推入taskList数组,增加id并清空newTask字符串。因此,现在我们有了一种将任务添加到任务列表中的方法,但是我们还没有开始显示它们。从本质上讲,我们可以将每个任务作为更大的todoList元素内的一个单独元素,因此让我们使用Vue.component将这两个组件分开。这将使我们能够创建可重用的vue实例,以在使用新Vue(在本例中为newToDoList)创建的根Vue实例中使用。HTML和JS的以下两个实例将完成我们的任务清单:此方法使用视图中的newTask和id属性创建一个对象,将该对象推入taskList数组,递增id并清空newTask字符串。因此,现在我们有了一种将任务添加到任务列表中的方法,但是我们还没有开始显示它们。从本质上讲,我们可以将每个任务作为更大的todoList元素内的一个单独元素,因此让我们使用Vue.component将这两个组件分开。这将使我们能够创建可重用的vue实例,以在使用新Vue(在本例中为newToDoList)创建的根Vue实例中使用。HTML和JS的以下两个实例将完成我们的任务清单:此方法使用视图中的newTask和id属性创建一个对象,将该对象推入taskList数组,递增id并清空newTask字符串。因此,现在我们有了一种将任务添加到任务列表中的方法,但是我们还没有开始显示它们。从本质上讲,我们可以将每个任务作为更大的todoList元素内的一个单独元素,因此让我们使用Vue.component将这两个组件分开。这将使我们能够创建可重用的vue实例,以在使用新Vue(在本例中为newToDoList)创建的根Vue实例中使用。HTML和JS的以下两个实例将完成我们的任务清单:尚未开始显示它们。从本质上讲,我们可以将每个任务作为更大的todoList元素内的一个单独元素,因此让我们使用Vue.component将这两个组件分开。这将使我们能够创建可重用的vue实例,以在使用新Vue(在本例中为newToDoList)创建的根Vue实例中使用。HTML和JS的以下两个实例将完成我们的任务清单:尚未开始显示它们。从本质上讲,我们可以将每个任务作为更大的todoList元素内的一个单独元素,因此让我们使用Vue.component将这两个组件分开。这将使我们能够创建可重用的vue实例,以在使用新Vue(在本例中为newToDoList)创建的根Vue实例中使用。HTML和JS的以下两个实例将完成我们的任务清单:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <todo-item
      v-for="task in taskList"
      v-bind:task="task"
      ></todo-item>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>
Vue.component('todo-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

哇,好像发生了很多事!让我们通过它。在我们的HTML中,我们声明了一个todo-item元素。我们还创建了一个Vue.component并将其命名为“ todo-item”。这两个名称相同的事实使他们可以彼此“交谈”。实际上,我们需要插入完整的Vue组件实例,以完成我们的待办事项清单。我们在HTML文件中使用v-for命令来呈现多个组件。当我们遍历taskList数组时,它几乎可以像for..of循环(同样,请注意,我们在HTML和JS文件中使用了短语“ taskList”来建立此链接)并引用每个元素作为“任务”。我们将为“ taskList”中的每个“ task”呈现一个新组件。接下来,我们使用v-bind:task =“ task” 绑定绑定我们传递给组件的值。我们将此与props:['task']行结合使用,以允许我们在组件渲染中引用每个任务对象的属性。请注意,在v-bind:task中使用task是完全任意的。我们可以在HTML中使用v-bind:elephants =“ task”,只要设置道具:['elephants']并在JS中使用Elephants.text进行引用,我们将获得相同的结果。最后,在我们的组件中,我们有一个模板属性。这被解释为HTML,并针对taskList中的每个元素都呈现给我们的DOM。有了这个,我们应该有一个工作清单!]行,以允许我们在组件渲染中引用每个任务对象的属性。请注意,在v-bind:task中使用task是完全任意的。我们可以在HTML中使用v-bind:elephants =“ task”,只要设置道具:['elephants']并在JS中使用Elephants.text进行引用,我们将获得相同的结果。最后,在我们的组件中,我们有一个模板属性。这被解释为HTML,并针对taskList中的每个元素都呈现给我们的DOM。有了这个,我们应该有一个工作清单!]行,以允许我们在组件渲染中引用每个任务对象的属性。请注意,在v-bind:task中使用task是完全任意的。我们可以在HTML中使用v-bind:elephants =“ task”,只要设置道具:['elephants']并在JS中使用Elephants.text进行引用,我们将获得相同的结果。最后,在我们的组件中,我们有一个模板属性。这被解释为HTML,并针对taskList中的每个元素都呈现给我们的DOM。有了这个,我们应该有一个工作清单!我们有一个模板属性。这被解释为HTML,并针对taskList中的每个元素都呈现给我们的DOM。有了这个,我们应该有一个工作清单!我们有一个模板属性。这被解释为HTML,并针对taskList中的每个元素都呈现给我们的DOM。有了这个,我们应该有一个工作清单!

结论

Vue是一个可用于控制应用程序视图的框架。它与React有一些相似之处,与Angular有一些相似之处,但两者都不完全相同。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用Vue建立一个...等待...待办事项!

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论