生命周期函数
<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); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);//undefined
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.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 实例会解绑所有内容,
// 因为vue对象已经销毁，所以赋值没有作用
// 设置data中message数据值
// vm.message = "good...";
</script>
1.beforeCreate:function(){}
<div id="app">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "hello",
},
// 第一个生命周期函数
// 第一个阶段：指的是vue对象还没有创建
beforeCreate: function() {
console.group("-----beforeCreate的状态------");
console.log("vue对象:" + this.$el);
console.log("数据:" + this.$data);
},
});
</script>
特点：Vue对象没有创建，也不能获取数据
2.Create:function(){}
<div id="app">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "hello",
},
// 第一个生命周期函数
// 第一个阶段：指的是vue对象还没有创建
beforeCreate: function() {
console.group("-----beforeCreate的状态------");
console.log("vue对象:" + this.$el);
console.log("数据:" + this.$data);
},
// 第二个生命周期函数
// 如果json的key是自定义规范的，不用加$
// 如果json的key是vue规范的，加$
created:function(){
console.group("-----Create的状态------");
console.log("vue对象:" + this.$el);
console.log("数据:" + this.$data);
console.log("msg:"+this.msg);
}
});
</script>
特点：Vue对象已经创建，可以获取数据，但是Vue对象没有挂载(Vue对象还没有加载到浏览器)
3.beforeMount:function(){}
// 挂载前状态
beforeMount: function() {
console.group("-----beforeMount的状态------");
console.log("vue对象:" + this.$el);
console.log("数据:" + this.$data);
console.log("msg:" + this.msg);
},
特点：vue对象已经创建，并且再浏览器中存在**
4.mount:function(){}
// 挂载后状态
mounted: function() {
console.group("-----Mounted的状态------");
console.log("vue对象:" + this.$el);
console.log("数据:" + this.$data);
console.log("msg:" + this.msg);
},
特点：vue对象已经创建，并且再浏览器中存在**
5.beforeUpdate:function(){}
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);
},
特点：vue对象已经创建，并且再浏览器中存在， 并且数据已经挂载了，再浏览器的内存中显示的未修改
6.update:function(){}
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);
},
特点：vue对象已经创建，并且再浏览器中存在，并且数据已经挂载了，再浏览器的内存中显示的已修改
7. beforeDestroy
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);
},
特点：vue对象再浏览器中存在，数据依然显示
8. destroy()
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对象再浏览器不存在，数据依然显示与vue对象绑定的一切解绑
总结：
- vue生命周期相关的函数一共分为8个阶段，执行顺序从1-8
- beforeCreate() Create() beforeMount() mount()这几个自动执行
- beforeUpdate() update() 当data发生改变时才会执行
- beforeDestroy() destroy() 当vue对象销毁时，才会执行
- 生命周期函数会自动执行，如果我们想要让我们的方法自动执行，就放到生命周期中去
异步操作
同步操作
- 指的是向后台提交数据时，提交整个网页。
- client客户端(浏览器)-----》server后台(Java程序)
- 前台提交数据到后台
- client-------提交数据-------》server
- 后台响应数据到前台
- client《-------响应数据------server
同步缺点：
- 当后台响应慢，用户看到的”留白“
异步操作
- 在后台提交数据时，提交网页一部分
- client客户端(浏览器)-------》server后台(Java程序)
异步优点
- 后台响应慢时，用户依然可以看到网页，不会留白
异步缺点
- 向后台提交数据的次数（异步提交的是网页一部分，不需要等后台响应）
- 后台访问压力大
Ajax异步请求（axios.js和vue.js）
四个步骤：
- 创建异步请求对象：xmlhttp
- 发送http请求（向后台提交数据）：open(提交方式，后台地址，是否支持异步)，提交方式：get/post，是否支持 ：true/false
- 调用send()方法：请求以及数据全部发送到后台
- 获取后台服务器响应的数据：response对象 ： xmlHttp.responseTextt：接收后台响应的字符串数据
xmlHttp.responseXML：接收后台响应的XML格式数据
异步请求缺点
- 代码量太大，重复代码
解决方案：上面四个步骤封装成前端的js框架
1.jquery.js：很早之前的，封装了异步请求，还有很多丰富的api
2.axios.js
axios.js
- 在html引入axios.js，也需要引入vue.js
- 在html网页里面指定vue的作用范围
- 在script标签里面创建vue对象
- 在methods选项里面，定义异步请求方法
注意：axios异步请求框架中，使用response（resp）来接收后台响应的数据
前台（response来接收后天响应的数据)<---------后台
1.get请求的请求数据都在地址栏，请求的数据大小是有限制的
比如：IE8浏览器，get请求提交数据，最大提交200kb
2.post请求的请求数据都不在地址栏，请求的数据大小没有限制
实际开发中：提交的数据比较大，使用post,比如：提交一个视频到后台。
自定义组件
组件概述
组件是vue框架非常重要的功能之一，它主要对html元素进行封装，可以复用。简单来说就是使用vue组件对html元素进行定义。
组件使用(导入vue.js)
方式一：基本语法
1.定义模板：
var tem=Vue.extends({
"template":"定义标签，设置样式等等"
});
2.模板注册到组件中（全局组件）
Vue.component(组件名称，{
pros：组件的属性，
data：组件的数据函数，
template：组件解析的标签模板
});
1.通过pros给自定义组件设置属性，从而改变template标签里面的文本
pros:["","",…]
<div id="app">
<el-button title="11111"></el-button>
</div>
<script src="../js/vue.js"></script>
<script>
//
var tem = Vue.extend({
props: ["title"],
template: "<button style='border-radius: 20px;'>{{title}}</button>",
});
//
Vue.component("el-button", tem);
new Vue({
el: "#app",
});
</script>
2.通过template给自定义组件设置模板，定义html标签，自定义标签的样式等等
template：""
3.自定义的组件绑定事,设置data函数，改变template里面标签的文本值
data：function(){
方法体；
}
4.methods 作用给模板里面标签绑定事件，提供函数
<div id="app">
<el-button></el-button>
</div>
<script src="../js/vue.js"></script>
<script>
// 1创建组件模板
var tem = Vue.extend({
data: function() {
return {
count: 1
}
},
template: "<button style='border-radius: 20px;'>{{count}}</button>",
});
//2注册组件
Vue.component("el-button", tem);
/**
* 1,2合成一步
*/
// Vue.component("el-button", {
// props: ["title"],
// data: function() {
// return {
// number: 1,
// };
// },
// // @click='number++' 可以是函数，也可以是js代码
// template: "<button style='border-radius: 20px;' @click='number++'>{{number}},{{title}}</button>",
// methods: {
// test1() {
// this.number++;
// }
// }
// });
// 3创建vue对象
new Vue({
el: "#app",
});
</script>
注意：点击事件@click="",""里面可以是js代码也可以是函数。
颜色取值
一般采用第三种#00FF00，浏览器比较兼容
<font color="red">字体</font>
<font color="rgb(12,45,56)">字体</font>
<font color="#00FF00">字体</font>
ElementUI
ElementUI概述：
- 网站快速成型工具,饿了么前端开发团队提供的一套基于vue的网站组件库
- 非常丰富的组件,它的组件基于vue,所以要引入vue.js核心文件
- ElementUI的官方网站：https://element.eleme.cn/#/zh-CN
ElementUI入门
开发步骤：
- 下载 Element 核心库。
- 引入 Element 样式文件。
- 引入 Vue 核心 js 文件。
- 引入 Element 核心 js 文件。
- 编写按钮标签。
- 通过 Vue 核心对象加载元素。
<!--引入ElementUI的外部样式文件-->
<link ref="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css"/>
<!-- 引入vue核心文件 -->
<script src="../js/vue.js"></script>
<!-- 引入ElementUI的核心文件-->
<script src="../js/element-ui/lib/index.js"></script>
扫一扫
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
