Vue入门 - 一个简单的todo list

主要代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a todo list</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<router-view></router-view>-->
    <p v-text="title"></p>
    <input type="text" v-model="todo" @keyup.enter="addNew">
    <ul>
      <li v-for="item in items" v-bind:class="{finished:item.isFinish}" v-on:click="clickk(item)">
        {{item.label}}
      </li>
    </ul>
    <br>
    <component-a msgfather="you die !"></component-a>
  </div>
</template>

<script>
  import Store from "./store"
  import ComponentA from "./components/ComponentA"

  export default {
//        name: 'app',
    data: function () {
      return {
        title: "this is a todo list",
        items: Store.fetch(),
        todo: ""
      }
    },
    components: { ComponentA },
    watch: {
      items: {
        handler: function (val, oldVal) {
          Store.save(val);
        },
        deep: true
      }
    },
    methods: {
      clickk: function (item) {
        item.isFinish = !item.isFinish;
        console.log(item.label);
      },
      addNew: function () {
        this.items.push({
          label: this.todo,
          isFinish: false
        });
        this.todo = '';
      }
    }
  }
</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: gray;
  }

  li {
    color: red;
  }
</style>

ComponentA.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msgfather }}</h1>
    <button v-on:click="onClick">Click !</button>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data: function () {
      return {
        msg: 'This is ComponentA content ! '
      }
    },
    props:['msgfather'],
    methods:{
      onClick:function(){
        console.log(this.msgfather);

  }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>

store.js

const STORAGE_KEY = 'todos-vuejs'
export default {
  fetch() {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save(items) {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
  }
}

今天闲来无事看看Vue，这个代码基本是按慕课网的一个基础教程来的，学会和理解了不少东西。

by jtahstu at 2017/07/18

---

本文章采用知识共享署名2.5中国大陆许可协议进行许可，转载必须注明作者和本文链接。

---