4 - Vue 学习笔记 - options 选项、生命周期、WebStorm的vue模板、mustache语法简单补充

Vue 的 options 选项

• 我们会发现，在创建 Vue 实例时，传入了一个对象 options
• 我们可以从官网上看这个 options 中包含了哪些选项 — API—Vue.js
• 目前掌握这些选项：
  • el：
    类型：string | HTMLElement
    作用：决定之后 Vue 实例会管理哪一个 DOM
  • data:
    类型：Object | Function（组件当中 data 必须是一个函数）
    作用：Vue 实例对应的数据对象
  • methods:
    类型：{ [key : string] : Function }
    作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用

---

Vue 的生命周期

图片来源于官方网站 — 链接

在 new Vue() 时， Vue 里面做了很多的事情，我们把做的这些事情，看作 Vue 的生命周期（就比如人的出生到死去，中间所做的事情），Vue 在每个生命周期中，都定义了回调函数，我们可以在这些回调函数中定义我们想要让 Vue 做的事情，比如在 created 中，我们可以定义网络请求，请求一些数据等等 …

---

定义 Vue 的 template

在 WebStorm 定义 vue 的模板，可以帮助我们省去很多时间
步骤：

1. 写好模板代码

   <div id="app">
   	{
       {message}