Vue：基础语法、创建组件、组件间传值、实例生命周期

Vue实例

Vue实例（new Vue()）叫做根实例，Vue中的每一个组件也是一个Vue实例。

一个Vue的项目实际上是由很多小的组件组成的，也可以理解为它是由很多Vue的实例拼装组成的。

$开头的东西指的都是Vue的实例属性或实例方法。

vm.$destroy() 销毁实例，也会随之销毁一些双向绑定的功能，但销毁之前的实例方法还会存在

---

首先引入vue.js文件，实例化一个vue，这个实例接受一些参数

【el是实例负责管理的区域，也就是要操作的DOM元素；data是数据，里面的内容可以在被控制的元素中进行调用（使用{ { } }的方式）

---

                                      ==== 基础语法 ====

当我们看到vue指令后面跟着一个值得时候，这里的值就不再是一个字符串了，它指的是一定是一个JS的表达式

1、v-for：可以理解为for in，遍历数组返回给item，数组有多少内容就有多少个item，并自动生成html标签

2、v-on：绑定事件，语法=>v-on：事件类型 = "函数(调用)"，调用的函数定义在methods中，vue会自动到里面寻找对应的函数去执行

3、v-model：数据的双向绑定，指定的数据需要在data里进行定义。当data里的该数据改变时，绑该数据的地方显示在页面的内容也会变化；当绑定的地方数据改变，data里的数据也会改变。其中一个改变另一个也会跟着改变。【在methods里定义的函数中，使用 this.数据 就可以访问到页面中该数据的内容】

4、v-bind：把数据传到子组件：v-bind：变量名=“接收值”  然后在子组件里的props中接收变量值

5、v-text=“name”；表示让这个标签的innerText变成data数据里name的内容，不会复制HTML结构，单纯转成文字，效果和插值表达式一样

6、v-html=“name”；让这个标签的innerHTML变成data数据里name的内容，会把HTML结构也复制上

---

                          ==== 组件化思想改造 ====

---- 全局组件 ----

创建全局组件的方法 Vue.component（“todo-item”， ｛｝） =》 "todo-item"为标签名

---- 局部组件 ----

var 组件名（=标签名） = ｛｝  并且需要在实例中的components中注册组件才能使用

---

                                ==== 组件间传值 ====

父组件给子组件传值，使用v-bind绑定数据。子组件给父组件传值，通过$emit（）的方式，通过事件触发向上一层触发事件。

v-bind:index="index" 可以简写 :index="index"

v-on:click="hdd" 可以简写 @click="hdd"

给子组件绑定多个数据时：

子组件里的props使用数组的形式接收数据，子组件事件处理this.$emit("delete",this.index)，之后在向外触发父组件的事件并传入index参数，再使用splice方法实现点击列表的某一项时该项被删除。

---

                           ==== 实例生命周期 ====

生命周期函数就是vue实例在某一个时间点会自动执行的函数。

生命周期函数不放在methods里面，而是直接放在Vue实例里面