當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue生命周期与自定义组件

發(fā)布時(shí)間：2025/3/15 vue 37 豆豆

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

自定義組件：

Element 組件其實(shí)就是自定義的標(biāo)簽。例如<el-button> 就是對(duì)<button>的封裝。
本質(zhì)上，組件是帶有一個(gè)名字且可復(fù)用的 Vue 實(shí)例，完全可以自己定義。

定義格式：

Vue.component(組件名稱, {props:組件的屬性,data: 組件的數(shù)據(jù)函數(shù),template: 組件解析的標(biāo)簽?zāi)０?})

演示：

<!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"],// 數(shù)據(jù)函數(shù)data: function () {return {msg: "我的按鈕"}},// 解析標(biāo)簽?zāi)０?/span>template: "<button style='color: #5fb1f3'>{{msg}}</button>"});new Vue({el: "#div"}); </script> </html>

Vue生命周期：

生命周期的八個(gè)階段：

演示：

<!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創(chuàng)建前狀態(tài)------');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創(chuàng)建完畢狀態(tài)------');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掛載前狀態(tài)------');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 掛載結(jié)束狀態(tài)------');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 更新前狀態(tài)===============》');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 更新完成狀態(tài)===============》');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 銷毀前狀態(tài)===============》');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 銷毀完成狀態(tài)===============》');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對(duì)象//vm.$destroy();//vm.message = "hehe"; // 銷毀后 Vue 實(shí)例會(huì)解綁所有內(nèi)容// 設(shè)置data中message數(shù)據(jù)值vm.message = "good..."; </script> </html>

Vue異步：

在Vue中發(fā)送異步請(qǐng)求，本質(zhì)上還是AJAX?？梢允褂胊xios這個(gè)插件來(lái)簡(jiǎn)化操作！

使用步驟：

引入axios核心js文件。

調(diào)用axios對(duì)象的方法來(lái)發(fā)起異步請(qǐng)求。

調(diào)用axios對(duì)象的方法來(lái)處理響應(yīng)的數(shù)據(jù)。

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()">發(fā)起請(qǐng)求</button> </div> </body> <script>new Vue({el: "#div",data: {name: "張三"},methods: {send() {// GET方式請(qǐng)求// axios.get("testServlet?name=" + this.name)// .then(resp => {// alert(resp.data);// })// .catch(error => {// alert(error);// })// POST方式請(qǐng)求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 {//設(shè)置請(qǐng)求和響應(yīng)的編碼req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//獲取請(qǐng)求參數(shù)String name = req.getParameter("name");System.out.println(name);//響應(yīng)客戶端resp.getWriter().write("請(qǐng)求成功");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req,resp);} }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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