2018-09-17

昨天看了vue基础：
{{msg}} v-text v-html
事件：@click
双向绑定 v-model
属性绑定title
计算属性：computed
侦听器：watch
v-if v-show v-for (key值)
局部样式（加scoped） 全局样式
组件间通信：
父组件-》子组件 父组件通过属性传给子组件，子组件通过props接受，
子组件-》 父组件 子组件通过this.$emit()发布订阅， 父组件采用监听的方式，
通过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>