昨天看了vue基礎(chǔ)：
{{msg}} v-text v-html
事件：@click
雙向綁定 v-model
屬性綁定title
計算屬性：computed
偵聽器：watch
v-if v-show v-for (key值)
局部樣式（加scoped） 全局樣式
組件間通信：
父組件-》子組件 父組件通過屬性傳給子組件，子組件通過props接受，
子組件-》 父組件 子組件通過this.$emit()發(fā)布訂閱， 父組件采用監(jiān)聽的方式，
通過vue-cli寫個todolist（只有增刪功能）

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item 
        v-for="(item,index) of lists"
        :content="item"
        :index="index"
        :key="index"
        @delete="handleDelete"
      >
      </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from "./components/TodoItem.vue";

export default {
  name: "app",
  components: {
    "todo-item": TodoItem
  },
  data() {
    return {
      inputValue: "",
      lists: []
    };
  },
  methods: {
    handleSubmit() {
      this.lists.push(this.inputValue);
      this.inputValue = "";
    },
    handleDelete(index) {
      this.lists = this.lists.filter(item => {
        return item !== this.lists[index];
      });
    }
  }
};
</script>

<template>
  <li @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ['content', 'index'],
  methods: {
    handleDelete: function(){
      this.$emit('delete',this.index)
    }
  }
}
</script>
<style scoped>

</style>