vue的钩子函数是什么（vue11个钩子函数）

大家好，我是讯享网，很高兴认识大家。
&lt;!DOCTYPE html&gt; &lt;html lang=“en”&gt; &lt;head&gt; &lt;meta charset=“UTF-8”&gt; &lt;meta name=“viewport” content=“width=device-width, initial-scale=1.0”&gt; &lt;title&gt;v-text,v-html指令&lt;/title&gt; &lt;script src=“node_modules/vue/dist/vue.js”&gt;&lt;/script&gt; &lt;link href=“node_modules/layui-src/src/css/layui.css” rel=“stylesheet”&gt; &lt;script src=“node_modules/jquery/dist/jquery.js”&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=“app”&gt; 讯享网<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="name"</span><span style="color: rgba(255, 0, 0, 1)"> v-text</span><span style="color: rgba(0, 0, 255, 1)">="name"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>李四<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> 
 &lt;/div&gt; &lt;!–过滤器的使用 过滤器仅限使用{{}}渲染–&gt; &lt;script&gt;
讯享网 <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> vm </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">new</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Vue({ el: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">#app</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, data: { name:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">张三</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, },beforeCreate() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">实例被创建出来还没有methods和data等数据，会执行它</span> 
  alert(“预创建Vue函数此时页面的name为”+ $(“#name”).html() +“此时Vue的name值”+this.name); 讯享网 },created() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">Vue实例创建完成，methods，data，filter等已经挂载到Vue实例上，使用data最早只能在这里操作</span> 
  alert(“预创建Vue函数此时页面的name为”+ $(“#name”).html()+“此时Vue的name值”+this.name);  },beforeMount() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">Vue实例创建完毕尚未重新渲染</span> 
  alert(“预创建Vue函数此时页面的name”+ $(“#name”).html()+“此时Vue的name值”+this.name); 讯享网 },mounted() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">页面渲染完毕</span> 
  alert(“预创建Vue函数此时页面的name”+ $(“#name”).html()+“此时Vue的name值”+this.name);  },beforeDestroy() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">Vue实例被销毁前执行的钩子函数</span> 
  alert(“Vue要销毁了”); 讯享网 },destroyed() { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">Vue实例销毁后执行的钩子函数</span> 
  alert(“Vue销毁完成了”);  }, }) 
 &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
讯享网
vue的钩子函数是什么（vue11个钩子函数）

相关推荐
