<div class="container" id="app">
        <div class="card">
            <h1>{{title}}</h1>
            <h3>Колличество записей: {{notes.length}}</h3>
            <div class="form-control">
                <input type="text" :placeholder="placeholderString" :value="inputValue" @input="inputChangeHandler" @keypress.enter="addNewNote" autofocus/>
            </div>
            <button class="btn" @click="addNewNote">добавить</button>
            <hr/>
            <ul class="list">
                <todo-item class="list-item" v-for="(item,index) in notes" :todo="item" :index="index" @del="delNote"></todo-item>
            </ul>
        </div>
    </div>

var dataURL = "docs.json"

const one = {
  el: "#app",
    data(){
        return{
            placeholderString:"Введите название заметки",
            title:"Список заметок",
            inputValue:"",
            postFontSize: 1,
            notes:[]      
        }
    },
    methods:{
        inputChangeHandler(event){
          this.inputValue = event.target.value
        },
        addNewNote(){
          this.notes.push(this.inputValue);
          this.inputValue = "";
          console.log("add");
        },
        delNote(index){
          this.notes.splice(index, 1);
          console.log(index);
        }

    }
}
const app = new Vue(one)

Vue.component('todo-item', {
  props: ['todo','index','del'],
  template: `
  <li> {{ todo }}
    <div class = "btn-list">
        <button class="btn" @click="">V</button>
        <button class="btn danger" @click="$emit('del', index)">X</button>
    </div>
  </li>`
})