发表于： 2019-12-22 23:00:43

今天完成的事情

今天完成的事情主要是试着在昨天安装的脚手架中尝试着写我们的一个todolist的内容，在之前不用脚手架纯在html页面中写内容有些许不同，一方面是我们，写的内容都是成组件式的存放在我们cli中的src文件夹中。在我们的src文件夹中，有一个根js文件它的作用是初始化vue实例并使用需要的插件。所以我们通常会把许多别的组件的信息写入这个js文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

而文件夹中还有一个App.vue是一个根vue文件，通常我们把我们所有的组件都会汇总在这个文件中。今天学习的todolist内容中主要是把input中的value传入到一个下面的显示列表中而后通过一个里标签可以循环显示我们数组中的内容，并且能把列表中的内容项点击删除。首先是在根vue文件中写出我们主要的项，

<input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ul>
    <to-do v-for="(item,index) of list"
    :content='item'
    :index='index'
    @delete='handleDelete'></to-do>
    </ul>

这里的to-do是我们通过子组件的形式形成的一个自定义的块，它同样是一个li标签，不过通过了组件化的思想从另一个vue文件中传递过来了。

import  Todoitem  from "./components/Todoitem";
export default {
  components:{
    'to-do':Todoitem
  } ,

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

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