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

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进行操作