自定义指令与生命周期函数

自定义指令

directives:{}

如在directives中加入函数red(){ inserted(){ }  }

那么在标签上写入属性v-red就能对这个标签执行red函数中的操作 也就是可以使用DOM操作，一般vue是不建议使用DOM操作的,但在directives中可以

v-red="参数"

red的inserted函数接收了两个参数 第一个参数是标签本身方便DOM操作

第二个参数是各项属性其中就有标签value属性

 directives: { //自定义指令
                red: { //v-red指令
                    inserted(el, value) { //在这里可以使用dom操作
                        console.log(el, value.value, this.count, 222);
                        el.style.color = value.value
                    },
                },
}

生命周期函数

当前vm实例在创建到销毁的过程中 会去调用的函数

生命周期函数就像一个生命的开始到衰败一样所以称作生命周期函数

生命周期函数:

beforeCreate()----创建前 

Created()----创建后

beforeMount()----挂载前

Mounted()----挂载后

beforeUpdate()----重新渲染前

Updated()----重新渲染后

beforeDestroy()----摧毁前

Destroy()----摧毁后

钩子函数:生命周期函数 (c语言中有一类 系统回调的函数然后执行业务 叫做钩子)

在某一种条件成立的时候 系统会去调用Vue中设定的函数 这些函数叫做：生命周期函数

beforeCreated:

这个函数在运行时 vm在创建中：劫持data，methods  也就是this对象中还不能访问到数据

beforCreate函数--预加载:网页中同源加载的优化

只要不是用于页面渲染的网络请求都可以

能做网络请求但不能渲染可以先存到本地渲染时直接调用本地的

也不能保存到数据源因为这个钩子中的this还是创建

created:

运行时机: vm对象已经创建完毕了

但是 还没有挂载到DOM树中  

在这个函数中可以操作this对象了但是无法操作页面(DOM)

能做网络请求 可以设置到数据源中  因为这个钩子中this已经创建完毕了

beforeMount:

渲染前的操作

vm对象已经创建完毕了 在挂载之前触发的钩子

这个函数可以操作this对象 无法操作DOM

mounted:

vm已经挂载到页面了

请求首屏数据

网络请求放在这里 会先在家基本页面结构 在请求网络加载数据

网络请求放在beforecreate 会先花点时间请求网络数据 再加载页面

beforeUpdate:

更新前更新后这两个钩子中不能网络请求新数据 更新数据源 会死循环

页面重新渲染前 触发的钩子 (如数据更新 重新渲染前)

调用时(或者重新渲染前)数据源已经更新 可以访问

updated:

数据源已经重新渲染完触发

beforeDestroy:

vm对象销毁之前触发的钩子函数

关闭浏览器 或销毁组件

保存用户行为配置文件:播放进度 等等

destroyed:

后面在webpack环境下操作 无法操作this

往往把当前组件中计时器清除了Q