Vue再学习3_生命周期和DOM操作

Vue生命周期

  • beforeCreate:组件刚被实力恶化创建,组件属性计算之前。

    此时,无法获取 data中的数据、methods中的方法。

  • created:组件实例化创建完成,属性已经绑定,但是DOM还未生成,$el属性还不存在

    可以调用methods中的方法、改变data中的数据

  • beforeMount:模板编译之前

  • mounted:模板编译

    vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作

  • beforeUpdate:组件更新之后

    此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

  • updated:组件更新

    组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作

  • beforeDestroy:组件销毁之前

    实例销毁之前,执行清理任务,比如:清除定时器等

  • destroyed:组件销毁之后

    Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

 

过滤器的使用

组件内过滤器的使用

<template>
    <div>
        输入显示内容<input type="text" name="" v-model="text">
        显示:{{text|myFilter}}
    </div>
</template>
<script>
    export default{
        filters:{
            myFilter:function(value){
                return value.split(' ').reverse().join('');
            }
        },
        data(){
            return{
                text:'',
            }
        }
    }
</script>

全局过滤器的使用

// 在main.js中 创建全局过滤器
Vue.filter("myFilter",function(value){
    return '全局过滤器';
})

获取DOM元素

获取普通标签

// 1、在dom标签上申明ref
<div ref="myDiv">
  {{text}}  // text=0000
</div>
// 2、通过ref获取对象,并进行操作
 mounted(){
  this.$refs.myDiv.innerHTML ='11111'
  this.text="999999"
},
// 最后显示11111

注意:

1、一定是在mounted之后进行的

2、对ref标签的操作innerHtml优先级高于text

获取子组件进行操作

// 1、为子组件添加ref
<body-vue ref="sub"></body-vue>
<div ref="myDiv">
	{{text}}
</div>

// 2、操作子组件
mounted(){
	this.$refs.sub.$el.innerHTML='1111'
},

如果ref放在了组件对象上,获取的就是组件对象

  • 1:获取到DOM对象,通过this.$refs.sub.​$el进行操作

 

 

 

 

Logo

前往低代码交流专区

更多推荐