day03-04

钩子函数

在特定阶段内被自定执行的函数 就叫做钩子函数

生命周期的钩子函数

被自动执行的函数

就可以让程序在特定阶段自动执行某些操作

钩子函数就是几个vue预先定义好的自动执行的函数，所以我们如果要写 写在data el methods等统计的位置

实例创建

实例创建之前 -- beforeCreate 在这个钩子中数据观测与事件还没有开始

实例创建完毕 -- created 数据的观测 实例的其他属性以及事件等 都已经准备好了

模板渲染

模板渲染之前 -- beforeMount 已经准备开始挂载页面了  此时页面还没有开始渲染

模板渲染之后 -- mounted  el属性已经挂载完成 dom也已经渲染加载完毕

数据更新

数据更新之前 -- beforeUpdate 准备开始更新 猜这个时候还没有开始进行数据的状态修改

数据更新之后 -- updated 数据与页面DOM都已经修改完毕了

实例销毁

实例销毁之前 -- beforeDestory 销毁之前 但是此时实例还可以使用

实例销毁之后 -- destoryed 实例已经不存在了 和vue相关的所有内容都不能使用

第一次执行的之后执行那几个钩子

实例创建前后   模板渲染前后

生命周期的钩子函数有什么作用？

vue预先定义好的自动执行的函数    是在vue实例从创建到销毁的过程中自动执行某些特定的业务的函数

DOM渲染在哪个钩子中完成？

munted

vue-cil脚手架

1.电脑上必须有node

2.全局下载vue-cil（除非你重新装电脑了，或者重装node了，否则只需要下载一次就好了） npm install -g @vue/cil

3.测试下载是否成功  vue --version

4.把cmd cd到指定下载项目的文件夹下

5.新建项目   vue creat 项目名（不要中文，空格，特殊符号）

        会出现选择  那么第一项 我们选择第三个自定义 剩下的全部回车到底

6.把cmd cd到你下载的项目之下

7.启动 npm run serve

.vue文件

.vue文件---》单文件组成

组成：

1.template ---》把你的html写进去

2.script      ----》把你的js写进去

3.style        ----》把你的css写进去

拿到空项目怎么办

1.删除scr下的components下的Helloword.vue

2.在新建一个属于我们自己的.vue文件并写入如下内容

<template>
  <div>
      <h1>你好么么哒</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3.来到app.vue（app.vue是全部组件的老大）中修改原来里面helloword相关的内容成我们自己的

<template>
  <div id="app">
    <!-- 4图片删除引用 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- 3.使用 -->
    <Home/>
  </div>
</template>

<script>
// 1.引用
import Home from './components/home.vue'

export default {
  name: 'App',
  components: {
    // 2.调用
    Home
  }
}
</script>

<style>
/* 5删除原有样式 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

之前学的vue属性怎么用？

data

语法

 data(){
        return {
            
        }
    }

为什么data是一个函数而不是对象

因为对象是引用数据类型  如果data是对象的方式创建的  那么这个组件被多次调用的时候  data都指向的是一个统一内存空间

函数的话  每一次调用都返回一个新的对象

以下的和之前本地模式没有任何区别

methods

watch

computed

filters

8个生命周期的钩子函数

组件

组件把一个页面拆成多个小模块分别来创建

就乐意让这一个个的小模块方便的进行调用  减少了代码量  降低了后期维护的难度

组建分类

全局组件--component

局部组件--components

创建组件其实就是新建一个.vue文件  并且写如下内容

<template>
  <div>
      我是一个组件么么哒
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用组件

在你想使用的地方

引用

// 1.引用
import Demo from "./components/demo.vue"

调用

components用来下属局部组件 写在与data methods watch等同级的位置

语法：

components:{
    给你引用的组件起个名字: 你引用的组件
}

  components:{
    Demo
  }

使用

组件的本质就是自定义标签

标签有单标签和双标签  单标签 <关键字/>   双标签 <关键字></关键字>

<你的组件名/>