vue中的生命周期和VueComponent实例对象

BoyBoy!

已于 2023-12-24 02:16:52 修改

阅读量186

点赞数 1

文章标签：前端 vue.js 前端框架

于 2023-12-23 12:44:24 首次发布

本文链接：https://blog.csdn.net/yyds12300/article/details/135167196

版权

生命周期

生命周期又叫生命周期钩子，生命周期函数
生命周期是，Vue在关键的时刻帮我们调用的一些特殊名字的函数
生命周期的this指向vm或者组件实例对象
mounted会将初始化的Dom挂载到页面上

<template>
  <div class="hello">
    <!-- 第一个是css样式,第二个变量名 opacity为指定一个元素的不透明度-->
    <h3 :style="{opacity:opacity}">会变化的字体</h3>
    <!-- 缩写形式 -->
    <!-- <h3 :style="{opacity}"></h3> -->
  </div>
</template>

<script>
export default {
  name: 'Select',
  data () {
    return {
      opacity: 1
    }
  },
  // mounted是生命周期函数。用于把初始化的DOM元素放到页面后(也叫做挂载完毕后),就调用mounted
  mounted(){
    // 设置定时器
    setInterval(()=>{
      this.opacity -= 0.01
      if(this.opacity <= 0)this.opacity = 1
    },16)
  }
}
</script>

组件

组件是用来实现局部功能效果的代码集合（html/css/js/image...)
组件的作用为：复用编码,简化项目编码，提高运行效率
模块化和组件化的区别：当应用中的js都以模块化编写时，这个应用为模块化应用。当应用中的功能都是多组件方式编写。这个应用就是组件化的应用
关于VueComponent
School组件本质上是一个名为Component的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写< school/>(这个只有脚手架有效)或者< school>< /school>。Vue解析时会帮我们创建school组件的实列对象。
注意：每次调用Vue.extend。返回的都是一个全新的VueCompon
关于this指向：
1、组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
2、new.Vue()配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- root为容器,注册成功即可使用School组件 -->
        <div id="root">
            <School></School>
        </div>

</body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        // 定义school组件,extends为继承的意思。但这里少了s。用于定义VueComponent
      const School = Vue.extend({
        name: 'School',
        // 用``而不是''这样的好处是可以换行书写，''只能单行书写代码。换行则报错
        template: `
        // 错误写法，
        // <h2>{{name}}<h2>
        // <h3>{{address}}<h3>
        // 正确的写法,需要加入div将所有模块包起来。符合模块化开发
            <div>
                <h2>{{name}}<h2>
                <h3>{{address}}<h3>
            </div>
        `,
        data(){
            return {
                name: 'school',
                address: '广东'
            }
        },
        })
        // vm是一个构造函数，{}为配置项
        new Vue({
            el:'#root',
            // vm管理所有的组件,故每个组件都要来vm这里注册才能使用。
            //为方便管理，为vm设置一个管理者(app)，vm直接管理app。而app管理所有的组件。以下代码可以认为School就是管理者
            components:{School}
        })
    </script>
</html>

BoyBoy!

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的生命周期和VueComponent实例对象

生命周期又叫生命周期钩子，生命周期函数生命周期是，Vue在关键的时刻帮我们调用的一些特殊名字的函数生命周期的this指向vm或者组件实例对象mounted会将初始化的Dom挂载到页面上。
复制链接

扫一扫