Vue基础笔记

中文文档： https://vuejs.bootcss.com/guide/syntax.html

初步

在了解到

1. v-on指令（@）可以添加一个事件监听器，通过它调用在 Vue 实例中定义的方法，完成让用户和你的应用进行交互
   
   比如v-on中左边绑定的是我们定义的子组件里所定义的事件

2. v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。v-model负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

3. v-bind指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的property 保持一致”。如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新

4. 组件的概念：一个组件本质上是一个拥有预定义选项的一个 Vue 实例。把组件想象成一个函数，props为入参，template为要执行的方法，v-bind:xxxx=""就相当于参数赋值

组件对象里面有两个东西，props：可接收的参数。template：模板

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

此刻我们完成第一个小程序：

5. Axios，是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信。

注意格式

6. 计算属性（缓存）：计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存
总结：
调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

7. slot-插槽：在Vue.js中我们使用``元素作为承载分发内容的出口，可以称其为插槽，可以应用在组合组件的场景中
8. 在我们实现插槽后，我们还需要会自定义事件。
   比如这个问题：如果删除操作要在组件中完成，那么组件如何删除Vue实例中的数据？删除按钮是在组件中的，点击删除按钮删除对应的数据。

阅读Vue教程可知，此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 组件中使用this.$emit(‘自定义事件名’， 参数) ，而在视图层通过自定义事件绑定Vue中的删除操作的方法

无法这样的调用

this.$emit将事件分发回前端，前端v–on:remove再将事件给removeItems(处理)
bind:绑定前端与vue的数据。props:绑定前端与组件的数据。

没错，你完全可以在remove方法里不传参数。

至此，单页面实现完成

关于路由

网站上会有很多链接，你点一下，他的url变了。这便是这次要实现的内容