vue从零开始到ToDoList

2018-10-01

Vue从零开始到toDoList

本教程使用从VueCli进行开发,需安装NodeJs,NPM JS包管理器。直接安装NodeJs 即可。 NodeJs安装就不多说了，直接下一步下一步,默认配置即可.

全局安装Vue

1	npm insatll -g vue

全局安装VueCli脚手架

1	npm insatll -g @vue/cli

初始化创建项目

1
2
3

vue create my-project
# OR
vue ui

*vue ui 通过网页图像话创建项目,一切可视化操作
*vue create to-do-list 命令构建 to-do-list 项目

上述命令运行之后就会在当前目录创建你的项目工程 to-do-list 。输入命令

1
2
3

cd to-do-list
npm install
npm run serve

*npm install 是安装项目依赖
*npm run serve 对项目进行调试运行

如果无意外就会出现下面情况
run serve

这时候我们就可以在连接下打开上面地址就行调试了
,将项目文件拖至Sublime Text中,我们就可以对项目进行开发了.

我们先来了解一下vue项目目录结构

Vue 目录结构

我们现在编写的简单应用不需要用到VueRouter(路由),所以就可以直接着手进行开发了.打开src/components/ 下的 HelloWorld.vue .
清除当前文件下的一下信息让他保持,方便我们进行快速开发

<template>
  <div class="hello">
  </div>
</template>

<script>
export default {
    data() {
      return {
      };
    },
    methods: {
    }
  };
</script>

<style scoped>
</style>

我们先来了解 .Vue 文件的基本结构吧

<template> 中包含的是我们Html的主体内容,下面只能包含一个div.
<script> 中包含页面中的js处理代码
<style> 中写我们的css样式
Add "scoped" attribute to limit CSS to this component only
(添加“scoped”属性以仅将CSS限制为此组件
)

正式开始代码编写

我们先在template下div中写一个input输入框,绑定v-model=”todo”,然后在script的 return {} 中添加 todo:’’,向vue中注册todo变量赋值为空.注册 todoList 为空数组.
然后我们在添加一个按钮,绑定 @click=”addToDo” 方法,然后在 script 下 methods 对象在添加函数 addToDo . addToDo 中将 this.todo 的数据添加到 this.todoList 中,再赋值 this.todo = ‘’,.

接下来我们就可以实现todolist的展示了 vue 中提供了 v-for 可以很方便快捷的对数据进行遍历输出.

1
2
3

<ol class="list">
    <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
</ol>

如上代码就可以对todoList数组的数据进行遍历输出了.
现在我们对输入框输入数据,点击提交按钮时就会在下面排序出数据了.我们再给input输入框添加一个回车按键绑定事件, @keyup.13=”addToDo” 这样我们再输入框输入完数据按下回车键就可以提交数据.我们再给循环li绑定一个 delete 方法,用于删除当前数据,传入数组的下标 index 然后在方法里面删除该下标对应的内容 this.todoList.splice(index,1)

数据储存

大致功能现在已经实现了,但是我们考虑下当用户关闭浏览器数据就会丢失,所以我们可以将数据存储在用户电脑上,我们这里通过 JavaScript 中的 localStorage 永久本地储存对数据进行储存,然后再vue定义变量是读取出来,对了 localStorage 中只能储存字符串内容,所以我们数组需要先进行 josnp 处理后才能进行储存操作.

所有代码

<template>
  <div class="todolist">
    <input type="text" 
      v-model="todo" 
      placeholder="edit me" 
      @keyup.13="addToDo">
    <input type="button" value="提交" @click="addToDo">
    <!-- <el-button type="success" icon="el-icon-check" circle @click="addToDo"></el-button> -->
    <ol class="list">
        <li 
          v-for="(item, index) in todoList" 
          :key="index"
          @click="deleteTo(index)">{{ item }}</li>
    </ol>
  </div>
</template>

<script>
export default {
    data() {
      return {
        todo:'',
        todoList: (localStorage.getItem("todolis") !==null)?eval(localStorage.getItem("todolis")):[]
      };
    },
    methods: {
      addToDo(){
        this.todoList.push(this.todo)
        this.todo = ''
        localStorage.setItem("todolis",JSON.stringify(this.todoList))
      },
      deleteTo(index){
        this.todoList.splice(index,1)
        localStorage.setItem("todolis",JSON.stringify(this.todoList))
      }
    }
  };
</script>

<style scoped>
</style>

后期就可以编辑style区域对样式进行一下美化,这方面我就不多说了.

样式化后代码

<template>
  <div class="todolist">
    <div style="margin-top: 15px;">
      <el-input type="text" 
        v-model="todo" 
        placeholder="edit me" 
        @keyup.13="addToDo">
        <template slot="append">
          <el-button type="success" icon="el-icon-check" circle @click="addToDo"></el-button>
        </template>
      </el-input>
    </div>
    <ol class="list">
      <transition-group name="list" tag="p">
        <li 
          v-for="(item, index) in todoList" 
          :key="index"
          @click="deleteTo(index)">{{ item }}</li>
      </transition-group>
    </ol>
  </div>
</template>

<script>
export default {
    data() {
      return {
        todo:'',
        todoList: (localStorage.getItem("todolis") !==null)?eval(localStorage.getItem("todolis")):[]
      };
    },
    methods: {
      addToDo(){
        if(this.todo === ''){
          this.$message({
            message: '警告哦,不能提交空数据！',
            type: 'warning'
          });
          return 0
        }
        this.todoList.push(this.todo)
        this.todo = ''
        localStorage.setItem("todolis",JSON.stringify(this.todoList))
      },
      deleteTo(index){
        this.todoList.splice(index,1)
        localStorage.setItem("todolis",JSON.stringify(this.todoList))
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
li{
  text-align: left;line-height: 28px; font-size: 20px; color: #34495e;padding-left: 8px;
}
</style>

样式化后预览