生命周期+工程化开发入门(组件入门）

原创已于 2024-08-29 21:55:52 修改 · 940 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-07-17 16:34:21 首次发布

文章目录

生命周期
工程化开发入门
组件入门
- 普通组件

生命周期

Vue生命周期：一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
钩子函数：Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

代码展示：

<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      //1. 创建阶段（准备数据）
      beforeCreate() {
        console.log("响应式数据准备后之前", this.count);
        //准备之前，无法获得数据
      },
      created() {
        console.log("响应式数据准备后之后", this.count);
        //this.数据名 = 请求回来的数据
        //可以开始发送初始化渲染请求
      },
      //2. 挂载阶段（渲染模板）
      beforeMount() {
        console.log("模板渲染之前", document.querySelector('h3').innerHTML);
      },
      mounted() {
        console.log("模板渲染之后", document.querySelector('h3').innerHTML);
        //可以开始操作dom了
      },
      // 3. 更新阶段
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("updated");
      },
      // 4. 卸载阶段
      beforeDestroy() {
        console.log("beforeDestroy");
      },
      destroyed() {
        console.log("destroyed");
      },
    })
  </script>
</body>

结果展示：
在创建完成后才能获取到；在渲染完成后才可以开始操作dom

数据更新时：

卸载时：

工程化开发入门

安装vue-cli：

**基本介绍： **
Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。

通过Win + R ，输入 cmd 打开终端

输入安装vue cli

输入 vue --version ，检验是否先前已经安装了 vue cli
若未安装，输入 npm install -g @vue/cli 进行安装

检验是否安装成功

再次输入 vue --version ，若显示版本号，则安装成功

通过命令创建项目

打开所要项目创建位置（想在哪里创建，就在哪里打开），搜索栏输入 cmd 打开终端，输入 vue create one-project（项目名），回车显示下面样式

通过键盘上下箭头选择要创建的版本，回车

完成项目的创建

运行项目

项目创建完成后，根据提示输入 cd vue-dome （这里的vue-dome是你自己的项目名)，进入项目文件夹，然后输入 npm run serve 运行终端，回车等待运行
运行结束显示，为我们创建了一个名为 localhost:8080 的端口号

接下来我们可以打开浏览器输入 localhost:8080 回车，打开我们的项目

当显示大V说明我们已经成功打开，若像关闭，可在终端输入 Ctrl + C

组件入门

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

普通组件

组件的创建

在componens文件下以驼峰命名创建以.vue结尾的文件，已完成创建

<template>
  <div class="MyHeader">
     我是Header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.MyHeader{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #8064a2;
    color: white;
}
</style>

<template>
  <div class="MyMain">
    我是主体Main
  </div>
</template>

<script>
  export default {

  }
</script>

<style>
  .MyMain{
    height: 400px;
    line-height: 400px;
    text-align: center;
    font-size: 30px;
    background-color: #f79646;
    color: white;
    margin: 20px 0;
  }
</style>

<template>
  <div class="MyFooter">
    我是底部Footer
  </div>
</template>

<script>
  export default {

  }
</script>

<style>
  .MyFooter{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #4f81bd;
    color: white;
    margin: 20px 0;
  }
</style>

<template>
  <button class="mybutton">通用按钮</button>
</template>

<script>
  export default {

  }
</script>

<style>
  .mybutton {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: aquamarine;
    border-radius: 5px;
  }
</style>