初识Vue-cli

先说下下面代码中用到几个知识点

1.props 

     　　　父组件通过props讲数据传递给子组件。

<template>
  <div>
    <ul>
      <todo-item v-for="(item,index) in list" :content="item" :index="index" >todo-item>
    ul>

  div>

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

2.$emit()

　　　　子组件通过$emit触发父组件自定义事件

<template>
<li @click="Delete">{{content}}li>
template>
<script>
export default 
  methods:{
    Delete(){
   this.$emit('delete1',this.index)
    }
  }
}
script>

<template>
  <div>
    <ul>
      <todo-item @delete1="handledete">todo-item>
    ul>

  div>
template>

All code:

<template>
  <div>
  <div>
    <input v-model="inputVuale"/>
    <button v-on:click="handleSubmit">提交button>
  div>
    <ul>
      <todo-item v-for="(item,index) in list" :content="item" :index="index" @delete1="handledete">todo-item>
    ul>

  div>
template>

<script>
import TodoItem from './components/TodoItem'
export default {
  components:{
    'todo-item':TodoItem
  },
  data(){
    return{
      inputVuale:'',
      list:[]
    }
  },
  methods:{
    handleSubmit(){
      this.list.push(this.inputVuale)
      this.inputVuale=''
    },
    handledete(index){
      this.list.splice(index,1)
    }
  }
}
script>

<style>

style>

<template>
<li @click="Delete">{{content}}li>
template>

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


<style scoped>

style>

//main.js
import Vue from 'vue'
import Todolist from './Todolist'

Vue.config.productionTip = false
new Vue({
  el: '#app',
  components: { Todolist },
  template: ''
})