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

2023-12-23 22:58:25

生命周期

关于VueComponent

  • 生命周期又叫生命周期钩子,生命周期函数

  • 生命周期是,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都以模块化编写时,这个应用为模块化应用。当应用中的功能都是多组件方式编写。这个应用就是组件化的应用

  • 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>

文章来源:https://blog.csdn.net/Yyds12300/article/details/135167196
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。