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.jsimport 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    }  ]})