Vue ③-生命周期 || 脚手架

生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期： 一个Vue实例从 创建 到 销毁 的整个过程。

生命周期四个阶段： ① 创建 ② 挂载 ③ 更新 ④ 销毁

生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

生命周期函数列表：

• beforeCreate：实例创建之前，数据观测和事件配置之前。
• created：实例创建之后，数据观测和事件配置之后。
• beforeMount：实例挂载之前。
• mounted：实例挂载之后。
• beforeUpdate：数据更新之前。
• updated：数据更新之后。
• beforeDestroy：实例销毁之前。
• destroyed：实例销毁之后。
  

<div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</div><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},beforeCreate() {console.log("beforeCreated 响应式数据准备好之前", this.count)},created() {console.log("created 响应式数据准备好之后", this.count)},beforeMount() {console.log("beforeMount 模板渲染之前", document.querySelector('h3').innerHTML)},mounted() {console.log("mounted 模板渲染之后", document.querySelector('h3').innerHTML)// 可以开始操作 dom了},beforeUpdate() {console.log("beforeUpdate 数据修改了，视图还没更新", document.querySelector('span').innerHTML)},updated() {console.log("updated 数据修改了，视图已经更新", document.querySelector('span').innerHTML)},beforeDestroy() {console.log("beforeDestroy 卸载前")console.log("清除掉一些 Vue以外的资源占用，定时器，延时器")},destroyed() {console.log("destroy 卸载后")}})
</script>

created应用

<script>const app = new Vue({el: '#app',data: {list: [],},async created() {// 发送请求，获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 将数据更新给 data中的 listthis.list = res.data.data}})
</script>

mounted应用

<script>const app = new Vue({el: '#app',data: {words: ''},// 核心思路：// 1. 等输入框渲染出来 (mounted阶段)// 2. 让输入框获取焦点mounted() {console.log(document.querySelector('#inp'))document.querySelector('#inp').focus()}})
</script>

脚手架（Vue CLI）

Vue CLI 是 Vue 官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

特点：

• 开箱即用，零配置
• 内置 babel 等工具
• 标准化

使用步骤：

1. 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看 Vue 版本：vue --version
3. 创建项目架子：vue create project-name（项目名-不能用中文）
4. 启动项目： yarn serve 或 npm run serve（找package.json）

脚手架目录文件

组件化开发

• 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
  好处：便于维护，利于复用 → 提升开发效率。
  组件分类：普通组件、根组件。

• 根组件：整个应用最上层的组件，包裹所有普通小组件

App.vue 文件（单文件组件）的三个组成部分

安装语法高亮插件：Vetur

三部分：

• template：结构 （有且只能一个根元素）
• script: js逻辑
• style： 样式 (可支持less，需要装包)

让组件支持 less 语法：

• style标签，lang="less" 开启less功能
• 装包: yarn add less less-loader

<template><div class="box">{{msg}} <button @click="fn">点我</button></div>
</template><script>
export default {name: 'Box',data() {return {msg: '我是一个盒子'}},methods: {fn() {alert('Hello Vue!')}}
}
</script><style lang="less">
.box {color: red;.btn {background-color: blue;}
}
</style>

注册组件

局部注册

局部注册：只能在注册的组件内使用

① 创建 .vue 文件 (三个组成部分)
② 在使用的组件内导入并注册

在 components 目录下创建组件：HmHeader.vue，组件名命名需遵守大驼峰命名法。

在 App.vue 文件中导入并注册组件：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {// 局部注册components: {'组件名': 组件对象,HmHeader}
}

使用：当成 html 标签使用 <组件名></组件名>

全局注册

全局注册：所有组件内都能使用

① 创建 .vue 文件 (三个组成部分)
② main.js 中进行全局注册

在 components 目录下创建组件：HmHeader.vue，组件名命名需遵守大驼峰命名法。

在 main.js 文件中进行全局注册：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'// 全局注册
Vue.component('组件名', 组件对象)
Vue.component('HmHeader', HmHeader)

建组件：HmHeader.vue，组件名命名需遵守大驼峰命名法。

在 main.js 文件中进行全局注册：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'// 全局注册
Vue.component('组件名', 组件对象)
Vue.component('HmHeader', HmHeader)

使用：当成 html 标签使用 <组件名></组件名>