【前端】Vue.js 基础篇（中）
2020-02-03 本文已影响0人
irenb
Vue 实例的生命周期
-
概念：从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。
生命周期的四个阶段：create（初始）、mount（加载）、update（更新）、destroy（销毁）
Vue 实例的生命周期
常用方法：
-
created：Vue 实例创建完成后调用，处理数据。 -
mounted：挂载完成（完成渲染页面），el 挂载到实例上后调用，监听页面显示。 -
beforeDestroy：即将销毁，实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
var app = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('执行了show方法')
}
},
/**
* 生命周期函数--创建完成：Vue 实例创建完成后调用
*/
created: function() {
// data 和 methods 都已经被初始化好了！处理数据...
console.log(this.msg) // ok
},
/**
* 生命周期函数--挂载完成/完成渲染页面，el 挂载到实例上后调用
*/
mouted: function() {
console.log(this.$el) // <div id="app"></div>
},
/**
* 生命周期函数--重新渲染页面（data发生改变时执行）
*/
update: function() {
// data数据改变，页面重新渲染的原理：
// data中的数据发生改变时，会先根据data中的最新的数据，在内存中重新渲染出一份最新的虚拟DOM（即内存中的DOM树），当最新的内存DOM树被更新之后，会把最新的内存DOM树重新渲染到真实的页面中去。这样就完成了数据从 data（Model层）到 view（视图层）的更新。
},
/**
* 生命周期函数--即将销毁
*/
beforeDestroy: function() {
}
})
网络请求
除了 vue-resource 之外，还可以使用 axios 的第三方包实现数据的请求
常用请求：get、post、jsonp
JSONP：JSON with Padding，JSONP 和 < script> 标签有关，最大的优势就是实现异步跨域的作用。JSONP 就是利用 <script> 的 src 属性，实现跨域的功能。
JSONP的实现原理：
- 由于浏览器的安全性限制，不允许AJAX访问跨域请求（协议不同/域名不同/端口号不同的接口，浏览器认为这种访问不安全）。
- 可以通过动态创建script标签的形式（<script>标签跨域），把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）
具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
1.模拟前端发送 JSONP 请求：
<script>
// 2.返回请求数据
function complete (data) {
// 接收返回的 json 对象
console.log(data);
};
</script>
<!-- 1.发送 JSONP 请求（支持跨域请求） -->
<!-- 指定请求地址、回调函数名称 和 回调函数的参数 -->
<script src='http://www.girls.hustonline.net?callback=complete&name=jimmy&age=18'></script>
- 下面模拟一下实在的JSONP请求。上面是直接将script写死在html内部，这样造成的结果可能会阻塞页面的加载
var sendJSONP = function(url, callbackName) {
var script = docuemnt.createELement('script');
script.src = `${url}&callback=${callbackName}`;
document.head.appendChild(script);
}
// 2.请求完成的回调函数
var complete = function(data){
// 接收返回的 json 对象
console.log(data);
}
// 1.发送 JSONP 请求
sendJSONP('http://girls.hustonline.net?name=jimmy&age=18', 'complete');
- 使用 jquery 发送 JSONP 请求
$.getJSON("http://girls.hustonline.net?callback=?", function(result){
console.log(result);
});
// 这里，我们需要关注一下url里面中callback=?里的?的内涵。jquery使用自动生成数的方式，省去了我们给回调命名的困扰。 其实，最后?会被一串字符代替，比如：json23153123。这个就代表你的回到函数名。不过，还是推荐使用$.ajax，因为你一不小心就有可能忘掉最后的?。
- 使用 $.ajax 发送 JSONP 请求
$.ajax({
url: 'http://girls.hustonline.net?name=jimmy',
dataType: 'jsonp',
success: function(result) {
console.log(result);
}
});
2.模拟服务器端执行一个JSONP的函数：
const util = require('util'),
http = require('http'),
url = require('url');
let data = JSON.stringify({
message:"I've already received"
});
http.createServer(function(req, res) {
req = url.parse(req.url, true);
if (!req.query.callback) res.end();
console.log(`name is ${req.query.name} and his age is ${req.query.age}`);
res.writeHead(200, { 'Content-Type': 'application/javascript' })
res.end(req.query.callback + "('" + data + "')")
}).listen(80)
Vue 组件
- 什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
