Vue之todoList

   目前公司做H5项目主要使用vue框架，便在这一周开始学习vue，之前用node做毕设，因此在接触vue的时候挺有熟悉感，基本上是路由-视图-模板框架模式。本文主要是讲解一下todolist这个例子，相对来说比较简单。

TodoList.vue：视图组件，进行增删操作
index.js：路由，在这个demo中较为简单，只有一个主页默认路由
App.vue：主组件，有点像是iframe，所有页面都是在App.vue下进行切换的；可理解为所有的路由也是App.vue的子组件；在页面上使用标签，用于渲染匹配的组件
main.js：入口文件，主要作用是初始化vue实例并使用需要的插件。

/* main.js */
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false//关闭生产模式下给出的提示 

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<!-- App.vue -->
<template>
  <div id="app">
    <!--渲染匹配的组件  -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<!-- TodoList.vue -->
<template>
    <div id="todoList">
        <h1>VUE Todo List</h1>
        <input type="text"
              class="inputs"
              placeholder="add one item"
              @keyup.enter="addItem()"
              v-model="content" />
        <button type="button"
                class="button"
                @click="addItem">add</button>
        <ul>
          <!--使用items数组来保存所有的todolist  -->
            <li v-for="(item, index) in items" class="todo">
              <input type="checkbox" 
                     :checked="item.isCompleted"
                     @click="completed(index)">
                <span :class="item.isCompleted?'completed':''"
                      @click="completed(index)">{{index+1}}.{{item.text}}</span>
                <button type="button" 
                        class="button"
                        @click="deleteItem(index)">Delete</button>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
  name: 'todolist',
  // vue实例的数据对象，对象必须是纯粹的对象（含有0个或多个的key/value对）
  data () {
    return {
      content: '',
      items: []
    }
  },
  methods: {
    addItem: function () {
      if (this.content.length > 0) {
        this.items.push({ text: this.content,
          isCompleted: false})
        this.content = ''
      } else {
        alert('内容不能为空')
      }
    },
    // splice()：对数组删除index开始的1个元素
    deleteItem: function (index) {
      this.items.splice(index, 1)
    },
    completed: function (index) {
      this.items[index].isCompleted = !this.items[index].isCompleted
    }
  }
}
</script>
<style >
#todoList{
  margin: 0 auto;
  padding: 40px }
#todoList ul{
  list-style: none;
}
.todo ul li{
  list-style: none;
  height: 24px;
  line-height: 24px;
}
.todo{
  /* text-align: left; */
  cursor: pointer;
  height: 40px;
}
.completed{
  text-decoration: line-through;
}
.button{
  display: inline-block;
  min-width: 56px;
  height: 30px;
  margin: 0 3px;
  color: #fff;
  cursor: pointer;
  padding: 0 10px;
  line-height: 30px;
  background-color: #6faed9;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
  border: none;
}
.inputs{
  min-width: 200px;
  height: 24px;
  line-height: 24px;
}
</style>

//index.js
import Vue from 'vue'
import Router from 'vue-router'
import TodoList from '@/components/TodoList'

Vue.use(Router)

// 传一个路由属性给 Vue 实例
export default new Router({
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList
    }
  ]
})