一、mounted介绍
在Vue中,mounted是一个生命周期函数,当Vue实例被挂载到DOM元素上后执行。在这个阶段,Vue实例的数据与DOM元素已经建立联系,我们可以访问到this.$el获取Vue实例挂载的DOM元素,并操作DOM。
mounted函数的执行时机是在模板编译成HTML之后,将它插入到页面之前。数据已经处理完成,可在mounted函数中操作DOM元素,通过$refs引用等方式获取DOM元素。
mounted() { console.log(this.$el) // 获取挂载的DOM元素 }
二、使用mounted获取DOM元素
在Vue中,我们可以尝试使用mounted获取DOM元素,并使用DOM API进行操作。例如,我们可以在mounted中获取到某个具体的div元素,然后为其添加一个点击事件。
<template> <div ref="my-div">点击此处</div> </template> <script> export default { mounted() { this.$refs['my-div'].addEventListener('click', () => { console.log('div被点击了') }) } } </script>
上述代码就是在组件加载完成后,在DOM元素上绑定了一个点击事件
三、使用第三方库和插件
在使用Vue时,我们可能会引入一些第三方库或插件,在这种情况下,我们还可以在mounted中使用这些库。
以使用ElementUI的message为例,我们可以在mounted中使用message进行消息提示:
<template> <button @click="showMessage">点击我试试</button> </template> <script> import { Message } from 'element-ui'; export default { mounted() { this.showMessage() }, methods: { showMessage() { Message.success('Hello World') } } } </script>
四、使用异步请求获取数据
在Vue中,我们常常需要通过异步请求从后端服务器获取数据,然后动态渲染页面。我们可以在mounted函数中调用异步请求函数,将获取到的数据渲染进模板中。
下面是一个简单的获取数据的例子:
<template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { list: [] } }, mounted() { this.fetchData() }, methods: { fetchData() { axios.get('/api/list').then(res => { this.list = res.data }) } } } </script>
五、使用第三方图表库
在Vue中,我们也可以使用第三方图表库,例如Echarts、Highcharts或D3等库。我们可以在mounted函数中使用这些库,来生成丰富的数据可视化图表。
以Echarts为例,我们可以在组件中引入Echarts库,然后将数据进行整理后,使用Echarts API进行渲染。
<template> <div class="chart"></div> </template> <script> import echarts from 'echarts' export default { mounted() { const myChart = echarts.init(document.querySelector('.chart')) myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) } }
六、小结
在Vue中,mounted是组件被挂载到DOM后触发的生命周期函数,实例已经生成,支持DOM操作和异步数据请求,并且可以使用第三方库和插件来增强组件的功能。