VUE-todolist

ToDoList

创建 VUE 项目

stepsoptions
打开终端
安装 VUEnpm install vue
为自己创建一个文件夹例如: D: /workspace/VUEproject
进入创建好的文件夹
按照 VUE 教程创建项目vue init webpack <projectname>
进入创建好的项目文件夹npm install
本地启动 VUEnpm run dev

写程式

ToDoList 作为一个大众练手项目,很多的框架都有人为它整一个的教程,因此可以想到:

ToDoList 很容易就可以写好.jpg

但 : ( 无论是视频还是文章 (对我来说) 都很难懂 QAQ

总结来说: 功能有三个: adddonedelete。分别由三个 button 完成:

add:

addtodo: function () {
var obj = {
  'id': this.todos.length + 1,
  'content': this.todo,
  'type': 'todo'
}
if (this.todo === '') {
  alert('error')
} else {
  this.todos.push(obj)
  this.todo = ''
}
}

done:

done: function (id) {
for (var i = 0; i < this.todos.length; i++) {
  if (this.todos[i].id === id) {
    this.todos[i].type = 'done'
  }
}
}

delete:

  del: function (id) {
for (var i = 0; i < this.todos.length; i++) {
  if (this.todos[i].id === id) {
    this.todos.splice(i, 1)
  }
}

样式: Element-ui

写程式期间,有尝试过自己写入样式,但得到的结果是: 实在是太丑惹 Q^Q ( CSS 太难了,我又懒得写)

然后得高人告知,VUE 是用的 Element-ui 作为样式表

stepsoptions
安装 Element-uinpm i element-ui -S
安装 vue-style-loadercnpm install vue-style-loader
引入 Element-ui在 main.js 中 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)

搞定以上几步之后就可以 随心所欲 认真看文档写样式了

得到的 localhost:8080 如下:

还是很不错哒(才怪)。

55555

Leave a comment

Your email address will not be published. Required fields are marked *