用Vue.js实现简单记事本

一、设计思路

【思路一:列表渲染】

        步骤一:因为列表要显示多条，所以定义一个数组把多条数据存起来。

        步骤二:然后再对着li进行v-for,根据这个数组来渲染。

        步骤三:使用插值语法,更改需要渲染的标题、序号。

【思路二:数据新增】

        步骤四:需要拿到输入框的内容,在input输入框中使用v-model双向绑定,绑定的元素需要在data中定义。步骤五:因为按回车就添加,意为着输入框要加事件keyup,并且只能由enter键触发。

        步骤六:按回车不能直接添加到数组里,因为可能没有输入内容,所以要做一个非空判断。步骤七:不为空,则添加到数组中。

        步骤八:添加到数组后,就把输入框内容清除。

        (这时候可以把步骤一定义的数组死数据删掉,让列表数据展示我们输入的内容。步骤九:完善“空空如也”显示。

【思路三:数据删除】

         步骤十:给“删除按钮”添加点击事件。

        步骤十一:给“清空按钮”添加点击事件,设置点击时将数组全部重新赋值为空数组,则数据全部清空。

  【思路四:数据统计】

        步骤十二:统计合计,就是统计数组的长度。

二、需要的事件方法

【事件方法】
@click: 当单击元素时,发生click事件。
@dbclick:当双击元素时,发生dbclick事件。
@focus:当元素获得焦点时,发生focus事件。
@blur:当元素失去焦点时发生blur事件。
@submit:当提交表单时,发生submit事件。
@keydown:当键盘被按下时,发生keydown事件。
@keyup:当键盘被松开,发生keyups事件。
@mouseenter:当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。
@mousedown:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。
@mouseleave:当鼠标离开被选元素时,会发生mouseleave事件。
@mousemove:当鼠标指针在指定的元素中移动时，会发生 mousemove 事件。
@mouseout:在鼠标指针离开被选元素或任意子元素时都会被触发。
@mouseover:当鼠标指针位于元素上方时，会发生 mouseover 事件。
@mouseup:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

 三、代码展示

<div id="app">
    <h2>记事本</h2>
    <div class="main">

    <input type="text" v-model="title"  @keyup.enter="add"/>
    <ul>

        <li v-for="(item,index) in list" :key="item.id">
           <div class="content"><span>{{ index + 1 }}</span> {{item.title}} </div>
           <button  @click="list.splice(index,1)">❌</button>
        </li>
    </ul>
    <p class="empty"v-show="list.length == 0">空空如也...</p >
    </div>

    <div class="bottom">
         <span>合计:{{ list.length }}</span>
         <span @click="list = []">清空</span>
        </div>
    </div>
    <script src="./vue.js"></script>

    <script> 
      new Vue({
         el:'#app',
         data:{ 
        title:'',
        list:[
             { id:1,title:'吃饭'}，
             { id:2, title:'睡觉'},
            { id:3, title:'打豆豆'}
         ]
        }, 
        methods:{ 
            add(){。
               if(this.title == '') return alert('请输入一点内容')
                this.list.unshift({
                    id: Date.now(),
                    title: this.title,
                }) 
                this.title =''
            }
        }
     })
</script>