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生命周期与自定义组件相关推荐
- Vue生命周期及各组件间的执行情况
文章目录 前言 一.Vue的生命周期是什么? 二.Vue生命周期中具体过程 1.Vue生命周期中的函数 创建Vue实例期阶段: 运行阶段: 销毁阶段: 2.加入keep-alive后 1)keep-a ...
- 【微信小程序】组件的生命周期及自定义组件
文章目录 组件的生命周期 自定义组件的生命周期函数 执行顺序 组件常用的生命周期函数 lifetimes节点 组件所在页面的生命周期函数 pageLifetimes节点 自定义组件 创建自定义组件 创 ...
- Vue 生命周期钩子解读
文章目录 vue 生命周期钩子 声明周期图示解析 生命周期钩子函数 beforeCreate #created #beforeMount #mounted #beforeUpdate #updated ...
- Vue生命周期及组件
目录 Vue 生命周期钩子 钩子函数的由来 生命周期钩子函数 生命周期图示 钩子函数测试 添加组件展示: 组件数据更新: 没建任务, 没有任务销毁, 看不到实际的效果. 创建定时任务销毁定时任务 Vu ...
- 二、Vue(发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画))
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...
- Vue 学习笔记(2)Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发 局部组件的开发 组件中 props 的使用 在组件上声明静态数据传递给组件内部 在组件上声明动态数据传递给组件内部 pr ...
- vue生命周期,组件,slot替换,tab切换,简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
- vue 组件,props 属性 ,Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
- vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
最新文章
- arcgisserver修改服务器地址,ArcGIS for Server默认端口6080修改
- JAVA GUI关闭按钮不起作用(用SwingWorker解决)
- 【Libevent】Libevent学习笔记(三):事件循环
- ng-template 使用过程中默认参数不能按照期望工作的问题单步调试
- [蓝桥杯][算法提高VIP]凶手-思维
- 在Java 8中使用Rhino
- MFC开发IM-第十篇、MFC改变static text颜色
- 喜庆新年春节 祝贺语词 艺术字体PSD分层素材
- 本地通过Eclipse链接Hadoop操作Mysql数据库问题小结
- mysql bit类型 查询_数据库中的bit类型
- vi/vim命令使用
- JPA结合querydsl使用
- Flutter 画笔(Paint)、绘制直线(drawLine)
- 多国语言解决方案gnu.gettext + poedit
- rvm、Ruby、gem、CocoaPods 的安装使用与卸载
- PID微分器与滤波器的爱恨情仇
- 【图像修复】基于深度学习的图像修复算法的MATLAB仿真
- react 监听键盘事件及多按键事件
- 矩阵的LU分解初步:一个对角线上元素非零的方阵
- 网站SEO的技巧都有哪些?快速增加权重靠谱吗?
热门文章
- layout布局_安卓最常见的几种布局
- python算法详解豆瓣_豆瓣爬虫实践-python版
- python基础入门(4)之布尔值
- matlab 实验数据 传递函数,《传递函数MATLAB实验》.ppt
- mysql5.7配置用户名密码_MySQL57安装图解
- php带来互联网的影响,网络对我们的影响有哪些?
- mixin机制 vue_vue mixins组件复用的几种方式(小结)
- jmeter服务器性能资源监控部署
- 【Jmeter篇】如何利用Jmeter配置元件计数器、随机变量制造批量数据和变量参数化?
- 【Python实战】chinesecalendar模块处理中国股市交易日期