每个东西其实都是有生命的，一次生命，一次周期

enter description here

生命周期是由你想创建一个实例开始的，生命周期很简单，都是在你做某件事前，会先执行一件（系列）事，然后再执行真正的操作。最后会再执行一件（系列）的事，最后会走上消亡。获取做事情之前还会被先劫持一会，做一些特殊操作，如判断，最后还是会回到正轨上来。

所以Vue的生命周期也很简单，它由一系列的函数函数构成，它会在他们的周期，也就适当的时候被调用。

new Vue({         el: '#app',         data: { message: "Hello Word!" },         beforeCreate: function () {             console.info(`在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。` + new Date().toLocaleString())             console.log(this)         },         created: function () {             console.info(`在实例创建完成后被立即调用。在这一步，实例已完成以下的配置： 数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。` + new Date().toLocaleString())             console.log(this)         },         beforeMount: function () {             console.info(`在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。` + new Date().toLocaleString())             console.log(this)         },         ...         }) 

下面是生命周期钩子函数的表格：

enter description here

组件

或许你玩过其他框架，或许你玩过微信小程序，或许你玩过支付宝小程序，再或者你玩过钉钉小程序，好吧，你都玩过-_-，他们都是有组件化的概念的。那Vue也有。
Vue组件，就是可以复用的Vue实例。
组件的Data必须是函数

例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/Code/Vue/sample/5组件化应用构建.html

• 创建组件

  // 定义一个名为 button-counter 的新组件     Vue.component('button-counter', {       data: function () {         return {           count: 0         }       },       template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'     }) 

  <div id="components-demo">      <button-counter></button-counter> </div> 

  new Vue({ el: '#components-demo' }) 

  这样就创建了一个组件，并且使用了。组件有分全局注册与局部注册。顾名思义就是，全局都可以用，局部只有在器实例底下可以使用。

  1. 全局

     Vue.component('component-a', { /* ... */ }) Vue.component('component-b', { /* ... */ }) Vue.component('component-c', { /* ... */ })  new Vue({ el: '#app' }) 

  2. 局部

     new Vue({        el: '#app',       components: {         'component-a': ComponentA,         'component-b': ComponentB       }     }) 

那大家都知道，有组件的概念，肯定就是子父组件的传值，Vue是靠Prop给子组件传值，而子组件是靠event给父组件传值的

• Prop

值得注意HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/Code/Vue/sample/7子父组件的数据传递.html

1. 简单例子

   Vue.component('blog-post', {   props: ['popTitle'],   template: '<h3>{{ title }}</h3>' }) 

   <blog-post pop-title="My journey with Vue"></blog-post> <blog-post pop-title="Blogging with Vue"></blog-post> <blog-post pop-title="Why Vue is so fun"></blog-post&
                       

   关键字：