Vue 学习笔记（2）Vue 生命周期、组件

最新推荐文章于 2024-06-19 11:11:55 发布
最新推荐文章于 2024-06-19 11:11:55 发布
阅读量1.6k 收藏 6
点赞数 1
分类专栏： # Vue 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734095/article/details/106087863
版权

Vue

Vue 笔记目录

Vue 生命周期

生命周期钩子 ====> 生命周期函数
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>vue生命周期函数</title>
</head>

<body>
  <div id="app">
    <span id="sp"> {{ msg }} </span>
    <input type="button" value="改变data的值" @click="changeData">
  </div>
  <!-- 引入Vue  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        msg: "hello Vue.js!",
      },
      methods: {
        changeData() {
          // this.msg = "Vue.js niubility!";
          this.msg = Math.random();
        }
      },
      // ====================初始化阶段====================
      // 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
      beforeCreate() {
        console.log("beforeCreate: " + this.msg);
      },
      // 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
      created() {
        console.log("created:" + this.msg);
      },
      // 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
      beforeMount() {
        console.log("beforeMount: " + document.getElementById("sp").innerText);
      },
      // 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
      mounted() {
        console.log("Mounted: " + document.getElementById("sp").innerText);
      },
      // ====================运行阶段====================
      // 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
      beforeUpdate() {
        console.log("beforeUpdate-vue: " + this.msg);
        console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
      },
      // 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
      updated() {
        console.log("updated-vue: " + this.msg);
        console.log("updated-dom: " + document.getElementById("sp").innerText);
      },
      // ====================销毁阶段====================
      // 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
      beforeDestory() { },
      // 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      destoryed() { }
    });
  </script>
</body>

</html>

在这里插入图片描述

Vue 中组件（Component）

组件作用：用来减少 Vue 实例对象中代码量，日后在使用 Vue 开发过程中，可以根据不同业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用 Vue 进行开发时页面管理，方便开发人员维护。

全局组件的开发

全局组件注册给 Vue 实例，可以在任意 Vue 实例的范围内使用该组件。

全局组件的开发：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>全局组件的开发</title>
</head>
<body>
  <div id="app">
    <!-- 使用全局组件 -->
    <login></login>
    <!-- 使用局部组件 -->
    <user-login></user-login>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 开发全局组件
    // 参数1: 组件名称
    // 参数2: 组件配置对象 template:用来书写组件的html代码(注意:在template中必须存在一个容器)
    Vue.component('login', {
      template : '<div><h1>用户登录</h1></div>'
    });
    // 驼峰命名法的组件会被特殊处理, userLogin 使用时必须写成 user-login
    Vue.component('userLogin', {
      template : '<div><input type="button" value="登录"></div>'
    });
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
    });
  </script>
</body>
</html>

在这里插入图片描述

局部组件的开发

通过将组件注册给对应 Vue 实例中一个 components 属性来完成组件注册，这种方式不会对 Vue 实例造成累加。

第一种开发方式：

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>局部组件的开发</title>
</head>

<body>
  <div id="app">
    <login></login>
    <login></login>
    <login></login>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 定义变量用来保存模板配置对象
    const login = {
      template: '<div><h2>用户登录</h2></div>'
    };
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: { // 局部组件
        login: login // 注册局部组件
      }
    });
  </script>
</body>

</html>

第二种开发方式：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>局部组件的开发2</title>
</head>

<body>
  <div id="app">
    <login></login>
    <login></login>
    <login></login>
  </div>

  <!--声明局部组件模板  template标签 注意:在 Vue 实例作用范围外声明-->
  <template id="loginTemplate">
    <h2>用户登录</h2>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 定义变量用来保存模板配置对象
    const login = { // 具体局部组件名称
      template: '#loginTemplate' // 定义template标签选择器即可
    };
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: { // 局部组件
        login: login // 注册局部组件
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

组件中 props 的使用

props 用来给组件传递相应静态数据或者是动态数据；

在组件上声明静态数据传递给组件内部

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>在局部组件中使用props接收静态数据</title>
</head>

<body>
  <div id="app">
    <!--使用组件, 通过组件进行静态数据传递-->
    <login user-name="zhenyu" age="20"></login>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 声明一个组件模板配置对象
    let login = {
      template: '<div><h2>欢迎: {{ userName }} 年龄: {{ age }}</h2></div>',
      props: ['userName', 'age'] // props: 用来接收使用组件时通过组件标签传递的数据
    }
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: {
        login // 组件注册
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

在组件上声明动态数据传递给组件内部

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>在局部组件中使用prop接收动态数据</title>
</head>

<body>
  <div id="app">
    <!--使用组件接收 Vue 实例中的动态数据-->
    <!--使用 v-bind 形式将数据绑定到 Vue 实例中 data 属性, data 属性发生变化, 组件内部数据跟着变化-->
    <login v-bind:name="username" :age="userage"></login>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const login = {
      template: '<div><h2>欢迎: {{ name }} 年龄: {{ age }}</h2></div>',
      props: ['name', 'age']
    }
    const app = new Vue({
      el: "#app",
      data: {
        username: "zhenyu",
        userage: 25
      },
      methods: {},
      components: {
        login // 注册组件
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

props 的单向数据流

所有的 props 都使得其父子 props 之间形成了一个单向下行绑定：父级 props 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 props 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 props。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网

组件中定义数据和事件使用

组件中定义属于组件的数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>组件中定义自己的data数据</title>
</head>

<body>
  <div id="app">
    <!--组件的使用-->
    <login></login>
  </div>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const login = {
      template: '<div><h2>{{ msg }}</h2><ul><li v-for="item,index in lists"> {{index+1}} : {{ item }} </li></ul></div>',
      data() {
        return {
          msg: "hello Vue.js !",
          lists: ['java', 'C++', 'python'],
        }; // 组件内部的数据
      }
    };
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: {
        login // 注册组件
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

组件中定义属于组件的事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>组件中事件的定义</title>
</head>

<body>
  <div id="app">
    <!--使用组件-->
    <login></login>
  </div>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const login = {
      // 组件中定义了属于组件的事件 @click="change"
      template: '<div><h2>{{ hello }}</h2><input type="button" value="点我触发组件的事件" @click="change"></div>',
      data() {
        return {
          hello: 'Hello Vue.js!',
        };
      },
      // 组件中定义的 @click="change" 事件
      methods: {
        change() {
          alert(this.hello);
        }
      }
    }
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: {
        login // 注册组件
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

向子组件中传递 Vue实例 的事件并调用该事件

在子组件中调用传递过来的相关事件使用 this.$emit('函数名') 方式调用；

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>向组件中传递事件并调用</title>
</head>

<body>
  <div id="app">
    <!--v-bind:name="msg" 是绑定了Vue实例中的动态数据-->
    <!--@aaa="findAll" 是将Vue实例中的函数绑定给了aaa, 在组件中通过this.$emit('aaa')来调用-->
    <login :name="msg" @aaa="findAlll"></login>
  </div>

  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 组件
    const login = {
      template: '<div><h2>{{ show }}</h2><input type="button" value="点我触发事件" @click="change"></div>',
      data() {
        return {
          show: this.name,
        }
      },
      props: ['name'],
      methods: {
        change() { // 组件自身的函数
          // 调用vue实例中函数
          this.$emit('aaa')
        }
      }
    }
    // Vue实例
    const app = new Vue({
      el: "#app",
      data: {
        msg: 'Hello Vue.js!'
      },
      methods: {
        findAlll() {
          alert('Vue实例中的事件触发了！');
        }
      },
      components: {
        login // 注册组件
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

萌宅鹿同学
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue生命周期
zhoudu55的博客
11-24 147
vue生命周期&路由 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 不要在选项 property 或回调上使用箭头函数，因为箭头函数并没有 this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
Vue3总结
最新发布
D_A_I_H_A_O的博客
06-19 729
一、初识VUE3 二、再识VUE3-MVVM 三、VUE3数据代理 四、VUE3事件处理 五、VUE3计算属性 六、Vue3监视属性 七、VUE3过滤器 七、VUE3内置指令 九、VUE3组件 十、VUE3生命周期
Vue学习笔记进阶篇之函数化组件解析
12-09
这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue Markdonwn学习笔记
11-17
对于初学者，理解Vue的生命周期也是很重要的。每个Vue组件都有其从创建到销毁的过程，了解这些阶段可以帮助你更好地管理组件的状态和行为。同时，掌握Vue的错误处理和调试技巧，如使用Vue DevTools，能帮助你在开发...
vue2笔记和案例 vue2 笔记和案例
04-17
通过"vue_basic"和"vue_test"这两个文件，你可以学习到Vue 2的基础知识和实践应用，包括如何创建组件、处理数据绑定、实现动态渲染、使用路由和状态管理等。这些案例将帮助你更好地理解和掌握Vue 2的开发技巧，为你...
vue生命周期的详解
wstomc的博客
02-21 1158
vue生命周期： 1. 创建阶段：beforeCreate（）；created（） 2. 挂载阶段：beforeMount（）；mounted（） 3. 更新阶段：beforeUpdate（）；updated（） 4. 销毁阶段：beforeDestroy（）；destroyed（） 这是vue生命周期阶段，但我们可知道当中的过程是怎样的，其实官网的生命周期图示以及解释的非常清楚了（下图），如果您...
vue中的11个生命周期
zzDAYTOY的博客
09-16 2911
BeforeCreate（创建前） 该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。 在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。 Created（创建后） 在组件创建完成后立即调用 在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调 但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂载
Vue生命周期详解
bugBuilder
09-14 118
-Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 每个周期该干什么事情,什么内容可以读取到 beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创建后 ） 实
Vue入门指南：指令、组件与生命周期解析
在Vue的学习笔记中，我们涵盖了多个关键概念，包括MVVM模式、全局配置、实例配置、指令、生命周期、组件以及全局API和实例属性。 1. **MVVM**： MVVM模式是Vue的核心，它将Model、View和ViewModel紧密联系起来。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌宅鹿同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值