使用Vue.js实现TodoList(1)

今天写一些关于Vue.js基础的东西 在看完Vue的官方文档以后 决定使用Vue.js来实现一个TodoList的功能

Vue中的关键字部分

在一个新建的Vue实例中 经常可以看见例如el data methods watch等关键字 例如图示中的代码

Vue关键字

其中
el:表示挂载点 也就是说 Vue.js会自己找到HTML模板中 id为"app"的这个dom节点 然后进行一系列的操作 el:#xxx 等于HTML页面中 id为xxx的那个标签
data:表示这个vue实例中存放的数据
methods:表示方法 当你想要这个对象执行事件的时候 需要把方法写在这个关键字下
watch:侦听器 当你在watch里写入了代码以后 Vue会监听数据的变化 然后根据变化来执行你所写的代码 然后实现页面的更新

常见指令部分

1.v-for:用于循环展示列表项
2.v-on:click用于绑定事件 可以简写为 @click="xxxx"
3.v-blind:用于给对象绑定一个属性
4.v-model:实现双向绑定

开始快乐Coding！

首先 由于是Vue.js最基础的部分 所以不涉及到使用vue-cli脚手架工具来搭建项目 而是通过最基础的也是最简单的 先从官网https://cn.vuejs.org/v2/guide/下载Vue.js文件到本地 同时新建一个HTML模板并通过 <script>标签来引入vue.js文件
需要实现TodoList那么页面上需要一个input框以及一个提交按钮 和最后展示出来的列表项

HTML基本结构

当完成了HTML模板的基本构建以后 我们需要新建一个Vue的实例 然后通过指定挂载点为app的这个标签让Vue可以进行接管

新建一个Vue实例
同时由于在HTML标签里我们是把<li>标签里的内容写死了 但是实际应用过程是肯定不可以这样的 因此我们需要在Vue实例中的data里新建一个数组 来保存TodoItem 同时需要借助v-for这个指令 在 <li>标签里循环展示出来TodoItem 然后到浏览器里看下代码实际运行的情况 这样就可以通过改变list里的数据来实现一个<li>标签展示的东西都是动态的并不是写死的
写到这里这个小项目就实现了接近一半了 剩下的就是 当在input框里输入内容并点击提交按钮的时候 <li>标签展示的内容就是输入的内容 并清空input框 因此需要在按钮上绑定一个事件 同时对input框使用v-model进行双向绑定 绑定的目的在于 当用户输入内容以后 Vue实例可以拿到输入的内容 并且添加到data里的list数组中 image.png 到浏览器里来看下最终代码运行的结果
运行结果

这样 就通过使用Vue.js来完成了一个最基础的TodoList 在后续的文章中 会提到前端的组件化以及在vue中的父子组件传值！加油鸭

前端组件化

在实际项目开发中 我们可以把页面上的每一个部分拆开作为一个组件 每一个组件单独封装 然后再将这些组件一个个组装起来 成为最后用户看到的样子 这样极大程度上的提高了开发效率 以及后期维护的效率 因此 Vue也对组件提供了非常大的支持 我们可以拿TodoList来进行一个小小的练习

在Vue中可以通过两种方式创建组件 一种是全局组件 另一种是局部组件 最大的区别是 当你使用全局组件的时候不需要进行注册 当你使用的是局部组件的时候 需要在Vue实例中进行注册 否则页面就无法正常显示

以上一篇文章所提到的TodoList来说 我们可以自己创建一个组件来替代原有的<li>标签
可以通过图示代码的方式来创建一个全局组件来达到<li>标签的效果

创建全局组件
其中"TodoItem"表示这个组件的名称 template表示模板 也就是HTML标签 需要注意的是 如果在组件中没有指定的模板 也就是template内容为空的时候 Vue实例会以挂载点下的模板作为组件里的template

创建一个局部组建的方法 如下图:

创建局部组件

基本上用法是和全局组件一样的 区别就在于 需要在Vue实例中通过components来进行注册 注意 components使用对象来接收会比较好

以TodoList为例 会有一个问题就是 当用户无论在input框里输入了什么内容 由于是使用了自己创建的全局组件 页面上所显示的内容都是Item 也就是template里<li>标签里显示的内容 那么为了解决这个问题 就需要引入父子组件传值了

父组件向子组件传值

为了解决之前提到的问题 这里需要使用一个新的指令 也就是v-bind 和一个API:props来解决如下图所示

通过v-bind:来给todo-item这个组件添加一个新的属性 叫做content 同时 我们把v-for里 list循环出来的item赋值给这个content 那么现在todo-item已经拿到了父子件传递过来的item这个值 既然拿到了就要在子组件里接收这个值 也就是说 在子组简历 通过props来接收子组件传递过来的content 让这个content的内容显示在template里的<li>标签中
总结一下就是 当父子件想要给子组件传值的时候 首先需要一个v-bind添加属性 然后子组件要接受这个值 就需要在template中使用props来接收

这样 我们通过创建一个全局子组件 并且通过父组件向子组件传值的方式来达到了和之前一样的代码运行效果

那么既然父组件可以向子组件传值 那么能不能反过来让子组件给父组件传值呢 答案显而易见的是 可以 接下来来实现一个功能 也就是 当用户点击提交以后页面上显示出用户输入的内容 用户再次点击页面上显示的内容的时候 这个内容在页面上就消失了 这就要用到子组件向父组件传值

子组件向父组件传值

如果要实现上文提到的需求 那就是子组件首先需要添加一个点击事件 子组件添加点击事件
同时光有一个绑定事件是不够的 还需要告诉父组件用户点击的是哪一个事件 我们可以通过v-bind来给父组件添加一个属性 index 同时在子组件里接收这个index 最后把index传递给父组件 让父组件清楚的知道 用户点击的是哪一个事件 代码如下 父组件添加index属性 子组件接收index
好了 现在 子组件有了点击事件 同时也接收到了父组件传递过来的index 那么现在只要子组件把这些统统告诉父组件 让父组件在页面上进行更新就可以了 因此 我们要用到下面的方法 子组件通过$emit方法来向外传递事件以及下标

子组件通过

this.$emit()

这个方法来向外告诉父组件 好了用户触发了这个点击事件并且把index传递给了父组件 那么 父组件就需要监听这个事件 再给父组件通过v-on指令添加一个监听事件

添加监听事件 添加监听事件以后 需要实现这个事件要做的事 也就是删除掉用户点击的内容 在Vue实例中实现这个方法 也非常简单 就是删除掉list里的某一项内容 代码如下 根据index删除list数据

最终TodoList完整版效果如下

效果