笔记本静态页面

笔记本列表ApI封装

展示数据

知识点

我们可以用 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的**别名**。


<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>



var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：
Foo
Bar

通过添加@click方法来实现创建，删除，编辑笔记本

 @click="onCreate","onDelete","onEdit"
methods:{
onCreate(){},
onEdit(){},
onDelete(){}
}

vue- 事件处理

问题：a链接把@click编辑和@click删除包裹住了，点击@click编辑的时候也点击到了a链接，然后就跳转了。

解决方法：去vue里找到阻止事件

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>

unshift() 方法将新项添加到数组的开头，并返回新的长度。

prompt() 方法用于显示可提示用户进行输入的对话框。

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

splice()

splice() 方法用于添加或删除数组中的元素。

从notebooks数组里删除notebook

this.notebooks.indexOf(notebook) 
//查找notebook第一次出现的位置

用户交互