當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue生命周期与自定义组件

發布時間：2025/3/15 vue 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue生命周期与自定义组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

自定義組件：

Element 組件其實就是自定義的標簽。例如<el-button> 就是對<button>的封裝。
本質上，組件是帶有一個名字且可復用的 Vue 實例，完全可以自己定義。

定義格式：

Vue.component(組件名稱, {props:組件的屬性,data: 組件的數據函數,template: 組件解析的標簽模板 })

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義組件</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script></head> <body><div id="div"><my-button>自定義按鈕</my-button> </div> </body> <script>Vue.component("my-button", {// 屬性props: ["style"],// 數據函數data: function () {return {msg: "我的按鈕"}},// 解析標簽模板template: "<button style='color: #5fb1f3'>{{msg}}</button>"});new Vue({el: "#div"}); </script> </html>

Vue生命周期：

生命周期的八個階段：

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生命周期</title><script src="vue.js"></script> </head> <body> <div id="app">{{message}} </div> </body> <script>let vm = new Vue({el: '#app',data: {message: 'Vue的生命周期'},beforeCreate: function() {console.group('------beforeCreate創建前狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //undefinedconsole.log("%c%s", "color:red", "message: " + this.message);//undefined},created: function() {console.group('------created創建完畢狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeMount: function() {console.group('------beforeMount掛載前狀態------');console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},mounted: function() {console.group('------mounted 掛載結束狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeUpdate: function() {console.group('beforeUpdate 更新前狀態===============》');let dom = document.getElementById("app").innerHTML;console.log(dom);console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},updated: function() {console.group('updated 更新完成狀態===============》');let dom = document.getElementById("app").innerHTML;console.log(dom);console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},beforeDestroy: function() {console.group('beforeDestroy 銷毀前狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},destroyed: function() {console.group('destroyed 銷毀完成狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);}});// 銷毀Vue對象//vm.$destroy();//vm.message = "hehe"; // 銷毀后 Vue 實例會解綁所有內容// 設置data中message數據值vm.message = "good..."; </script> </html>

Vue異步：

在Vue中發送異步請求，本質上還是AJAX。可以使用axios這個插件來簡化操作！

使用步驟：

引入axios核心js文件。

調用axios對象的方法來發起異步請求。

調用axios對象的方法來處理響應的數據。

axios常用方法：

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>異步操作</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script></head> <body> <div id="div">{{name}}<button @click="send()">發起請求</button> </div> </body> <script>new Vue({el: "#div",data: {name: "張三"},methods: {send() {// GET方式請求// axios.get("testServlet?name=" + this.name)// .then(resp => {// alert(resp.data);// })// .catch(error => {// alert(error);// })// POST方式請求axios.post("testServlet", "name=" + this.name).then(resp => {alert(resp.data);}).catch(error => {alert(error);})}}}); </script> </html> package com.example.demo1;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /*** @author itzhuzhu*/ @WebServlet("/testServlet") public class TestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//設置請求和響應的編碼req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//獲取請求參數String name = req.getParameter("name");System.out.println(name);//響應客戶端resp.getWriter().write("請求成功");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req,resp);} }

總結

以上是生活随笔為你收集整理的Vue生命周期与自定义组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： cif是目的港交货吗_刚接手出口业务，搞
下一篇： vue的视图化创建项目_vue-cli3