Vue学习笔记

一直很火的Vue，最近开始接触，先自学一段时间，后面投入生产中使用！

入门篇，todolist（ESLInt语法检测好严格，空格都给我算清楚了的。。。）

效果图：

<template >
  <div id="app">
    <h1 v-text="title"></h1>

    <input type="text" v-model="newItem" @keyup.enter="addNew">

    <ul>
      <li v-for="(list,index) in items" :class="{finished: list.isFinished}"  @click="toggleFinish(list)" :key="index" :id="index">
          {{list.label}}
      </li>
    </ul>

    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      title: 'this is todo list',
      items: [
        {
          label: '看书',
          isFinished: true
        },
        {
          label: '爬歌乐山',
          isFinished: false
        },
        {
          label: '跑步十分钟',
          isFinished: true
        }
      ],
      newItem: ''

    }
  },
  methods: {
    toggleFinish: function (item) {
      console.log(item)
    },
    addNew: function () {
      console.log(this.newItem)
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
    }
  }
}
</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;
}
.finished{
  color:#333;
  font-size: 22px;
  line-height: 28px;
  margin: 8px 3px;
  text-decoration: underline;
}
</style>