vue中methods、mounted等的使用方法解析

目录
  • methods、mounted的使用方法
  • vue生命周期(methods、mounted)
    • 1.什么是生命周期
    • 2.钩子函数
    • 3.Vue生命周期之初始化阶段

methods、mounted的使用方法

  • created：html加载完成之前，执行。执行顺序:父组件-子组件
  • mounted：html加载完成后执行。执行顺序:子组件-父组件
  • methods：事件方法执行。
  • watch：去监听一个值的变化，然后执行相对应的函数。
  • computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值
export default {
     name: "draw",
     data(){      //定义变量source
       return {
         source:new ol.source.Vector({wrapX: false}),
       }
     },
    props:{ //接收父组件传递过来的参数
      map:{
        //type:String
      },
    },
	mounted(){   //页面初始化方法
		if (map==map){
		}
		var vector = new ol.layer.Vector({
		  source: this.source
		});
		this.map.addLayer(vector);
	},
	watch: {   //监听值变化:map值
		map:function () {
		  console.log('3333'+this.map);
		  //return this.map
		  console.log('444444'+this.map);
		  var vector = new ol.layer.Vector({
			source: this.source
		  });
		  this.map.addLayer(vector);
		}
	},
	methods:{   //监听方法click事件等，执行drawFeatures方法
       drawFeatures:function(drawType){}
	}
}

vue生命周期(methods、mounted)

1.什么是生命周期

首先，我们了解一下"生命周期"这个词。 通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。 在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

2.钩子函数

【解释】：

  • 钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行
  • 钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

【作用】：

  • 特定的时间，执行特定的操作
  • 特定的时间，执行特定的操作

【分类】：

  • 四大阶段，八大方法
阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed

3.Vue生命周期之初始化阶段

【图示】：

【代码演示1】：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
   <div id="root">
       <h2 :style="{opacity}">欢迎学习</h2>
       {{ change() }}
   </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods:{
            change(){
                console.log('开启了一个定时器')
                setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0)
                    {
                        this.opacity=1
                    }
                },16)
            }
        }
    })
</script>
</html>

【代码分析】：

【代码演示2】：

<template>
   <div>
       <h3>生命周期函数</h3>
       <button @click="message='测试'">修改数据</button>
       <p>{{ message }}</p>
   </div>
</template>
<script>
    export default {
        name: "life",
        data(){
            return {
                message:"hello"
            }
        },
        beforeCreate()
        {
            console.log("beforeCreate -->创建前");
            console.log(this.message);
        },
        created(){
            console.log("created -->创建后");
            console.log(this.message);
        },
        beforeMount(){
            console.log("beforeMount --> 渲染前");
            console.log(this.message);
        },
        mounted(){
            console.log("mounted --> 渲染后");
            console.log(this.message);
        },
        beforeUpdate(){
            console.log("beforeUpdate --> 修改前");
            console.log(this.message);
        },
        updated(){
            console.log("updated --> 修改后");
            console.log(this.message);
        },
        beforeDestroy(){
            console.log("beforeDestroy --> 销毁前");
            console.log(this.message);
        },
        destroyed(){
            console.log("destroyed --> 销毁后");
            console.log(this.message);
        }
    }
</script>
 
<style scoped>
 
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 在methods中调用mounted的实现操作

    首先可以在data中先声明一个变量 比如 sureDelBox : ' ' mounted 中 ---> methods 中 ---> this.sureDelBox(item) 直接this调用 这时候要传的参数别忘记带上 如果你要问在mounted中调用methods中的方法 那么如果是我 我会直接把这个方法直接写在mounted中 补充知识:vue中methods一个方法调用另外一个方法 vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时

  • vue mounted组件的使用

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e

  • 在vue中created、mounted等方法使用小结

    created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值 export default { name: "draw", data(){ // 定义变量source return { source:new ol.source.Ve

  • 对vue中methods互相调用的方法详解

    如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • vue中typescript装饰器的使用方法超实用教程

    VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧 1,data 值的声明 在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线 蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下 上面是 普通写法 ,下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件使用

  • vue中使用极验验证码的方法（附demo）

    前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1

  • 在vue中封装可复用的组件方法

    本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • vue中锚点的三种方法

    第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"

  • Vue中保存数据到磁盘文件的方法

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定. 以app.vue为例 <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button> 下面在方法中定义函数 <code class="la

随机推荐