VueJS2 todoList Demo

VueJS2 todoList Demo

最近在学习VueJS,先看2.0的API,目前看完了基础部分,搭建Demo练习一下

工具:
sublime, vue-cli
环境:
按教程,通过cnpm安装;
app.vue代码如下:

<template>
  <div id="app">
    <h1 v-text="title">h1>
    <input type="text" v-model="input"
    @keyup.enter="addNewItem(input)">
    <ul>
      <li v-for="item in items" 
      class="need2do"
      @click="toggleDone(item)" 
      :class="[{done: item.isDone}]">{{item.label}}li>
    ul>
  div>
template>
<script>
export default {
  data: function () {
    return {
      title: 'This is a todoList Demo',
      input: '',
      items: []
    }
  },
  methods: {
    toggleDone: function (item) {
      item.isDone = !item.isDone
    },
    addNewItem: function (input) {
      this.items.push(
        {
          label: input,
          isDone: false
        }
      )
      this.input = ''
    }
  }
}
script>

<style>
.need2do {
  color: blue;
}
.done {
  color: black;
  text-decoration:line-through;
}
#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>

需要注意的地方:
1.空格严格缩进;
2.不能有注释啊,好坑;
3.不能打分号;
4.CSS ttext-decoration: blink 样式 在Mac chrome 失效 ,原因尚不明确;