<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> <link href="node_modules/layui-src/src/css/layui.css" rel="stylesheet"> <script src="node_modules/jquery/dist/jquery.js"></script> </head> <body> <div id="app"> <span id="name" v-text="name">李四</span> </div> <!--过滤器的使用 过滤器仅限使用{{}}渲染--> <script> var vm = new Vue({ el: '#app', data: { name:"张三", },beforeCreate() { //实例被创建出来还没有methods和data等数据,会执行它 alert("预创建Vue函数此时页面的name为"+ $("#name").html() +"此时Vue的name值"+this.name); },created() { //Vue实例创建完成,methods,data,filter等已经挂载到Vue实例上,使用data最早只能在这里操作 alert("预创建Vue函数此时页面的name为"+ $("#name").html()+"此时Vue的name值"+this.name); },beforeMount() { //Vue实例创建完毕尚未重新渲染 alert("预创建Vue函数此时页面的name"+ $("#name").html()+"此时Vue的name值"+this.name); },mounted() { //页面渲染完毕 alert("预创建Vue函数此时页面的name"+ $("#name").html()+"此时Vue的name值"+this.name); },beforeDestroy() { //Vue实例被销毁前执行的钩子函数 alert("Vue要销毁了"); },destroyed() { //Vue实例销毁后执行的钩子函数 alert("Vue销毁完成了"); }, }) </script> </body> </html>到此这篇vue的钩子函数是什么(vue11个钩子函数)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdvuejs/34742.html