0
点赞
收藏
分享

微信扫一扫

hualinux 进阶 vue 2.2:使用vue cli实现todolist


目录

​​一、关于用vue cli实现todolist​​

​​1.1 使用vue cli实现todolist说明​​

​​1.2 目录说明​​

​​二、实现代码​​

​​2.1 TodoItem.vue代码​​

​​2.2 App.vue代码​​

​​2.3 运行效果​​

我在《​​hualinux 进阶 vue 1.14:todolist(四)删除数据​​》的例子中,用<script>标签导入vue.js文件,并以数组的方式实现了添加和删除功能。

现在我将使用​​上章vue cli方式创建的工程​​的基础上,编写一个todolist的添加和删除,具体分析过程我不多说了,因为已经说了。

一、关于用vue cli实现todolist

1.1 使用vue cli实现todolist说明

用vue cli创建工程实现todolist思路和代码是差不多的,只是写把法修改一下。

  1. data不使用对象,使用的是函数方式。
  2. 组件与父组件分离,并不在同一个文件中,有专用的组件目录

1.2 目录说明

我是在上章《​​vue cli默认项目结构及其vue编写规则​​》的基础上直接使用其项目进行修改的。我把HelloWorld.vue文件修改为TodoItem.vue,如下图所示:

hualinux 进阶 vue 2.2:使用vue cli实现todolist_hualinux vue

我只需要修改TodoItem.vue和App. vue根vue即可,其它的一律不需要修改。

二、实现代码

2.1 TodoItem.vue代码

src/components/TodoItem.vue代码如下:

<template>
<li @click="t1">{{content}}</li>
</template>

<script>
export default {
name: 'todoItem',
props: ['content','fatherIndex'],
methods:{
t1: function (){
this.$emit("delete",this.fatherIndex);
}
},

}

</script>

2.2 App.vue代码

src/App.vue代码如下:

<template>
<div id="app">

<div>
<input v-model="note"/>
<button v-on:click="myClick">提交</button>
</div>
<ul>
<!-- 定义一个名为 delete 的事件,并调用del函数 -->
<todo-item
v-for="(item,index) of list"
:key="index" :content="item"
:father-index="index"
@delete="del">
</todo-item>
</ul>
</div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'

export default {
name: 'App',
components: {
'todo-item':TodoItem
},
data(){
return{
note: '',
list: []
}
},
methods: {
myClick: function (){
this.list.push(this.note)
this.note=''
},
del: function (index){
this.list.splice(index,1);
}
}
}
</script>

<style>
/* 没有样式*/
</style>

2.3 运行效果

运行一下

hualinux 进阶 vue 2.2:使用vue cli实现todolist_linux_02

当正下方显示正常给人访问地址的时候,就可以访问了

hualinux 进阶 vue 2.2:使用vue cli实现todolist_cli实现todolist_03

访问效果如下:

hualinux 进阶 vue 2.2:使用vue cli实现todolist_vue.js_04

hualinux 进阶 vue 2.2:使用vue cli实现todolist_hualinux vue_05


 

举报

相关推荐

0 条评论