meta标签 | 易学教程

Vue 组件

阅读更多关于 Vue 组件

组件化开发思想：组件化规范： Web Components 规范草案 1.我们希望尽可能多的重用代码 2.自定义组件的方式不太容易（html、css、js） 3.多次使用组件可能导师冲突 Web Components 通过创建封装好的功能定制元素解决上述问题。（目前并没有广泛的被浏览器所支持。）官网： https://developer.mozilla.org/zh-CN/docs/Web/Web_Components 不同的功能封装到不同的组件当中，不同的组件通过组合完成特定的需求。 Vue实现了部分上述规范。组件注册：全局组件注册语法： Vue.component(组件名称, { 　　data: 组件数据，　　template: 组件模版内容 }) 用法： <div id='app'> <btn></btn> </div> 注意事项： 1.data 必须是一个函数。 2.组件模版，必须为单个根元素。 3.组件内容可以是模版字符串。（模版字符串需要浏览提供支持，ES6语法）。 4.组件的命名方式：如果使用驼峰命名，那么在使用组件的时候，只能在字符串模版中使用驼峰的方式使用组件，但是在普通的标签模版中，必须转换成带短横线的标签。案例： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF

非常全的跨域实现方案

阅读更多关于非常全的跨域实现方案

由于同源策略的限制，满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全，但另一方面也限制了资源的使用。那么如何实现跨域呢，以下是实现跨域的一些方法。一、jsonp跨域原理：script标签引入js文件不受跨域影响。不仅如此，带src属性的标签都不受同源策略的影响。正是基于这个特性，我们通过script标签的src属性加载资源，数据放在src属性指向的服务器上，使用json格式。由于我们无法判断script的src的加载状态，并不知道数据有没有获取完成，所以事先会定义好处理函数。服务端会在数据开头加上这个函数名，等全部加载完毕，便会调用我们事先定义好的函数，这时函数的实参传入的就是后端返回的数据了。示例代码： https://github.com/mfaying/lesson/tree/master/cross-origin/jsonp 演示网址： https://mfaying.github.io/lesson/cross-origin/jsonp/index.html index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> function callback(data) {

前端学习日记 (一)

阅读更多关于前端学习日记 (一)

前端介绍前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过 HTML、CSS、JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。 HTML用于展现网页的内容、CSS用于展现网页的外观、JavaScript用于实现一些网页动作。 WEB框架的本质浏览器输入网址回车后都发生了什么? 浏览器(客户端)给服务端发送了一个消息,服务端在拿到了消息之后,服务端返回消息,浏览器展示页面客户端和服务端的消息格式要一致,因此就有了 HTTP协议来约束两边的消息格式。我们可以写一个服务端来访问自定义的网页: import socket sk = socket.socket() sk.bind(('127.0.0.1',8000)) sk.listen(4) while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.send(b'HTTP/1.1 200 OK\r\n\r\n') conn.send(b'Hello World!') #发送消息 conn.close() 执行代码后再打开浏览器去访问127.0.0.1:8000这个网址,就可以看到下面的页面: 改变程式码: conn.send(b'<h1>Hello

[Next] 五.next自定义内容

阅读更多关于 [Next] 五.next自定义内容

自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件，用于将元素追加到 <head> 标签的.我们可以通过这个自定义 head 新建 components/Head.js import { Fragment } from "react"; import Head from "next/head"; function MyHead() { return ( <Fragment> <Head> <meta charset="utf-8"></meta> <meta name="referrer" content="origin"></meta> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"></meta> <meta name="keywords" content="next.js,react.js"></meta> <meta content="next 简介 next.js作为一款轻量级的应用框架，主要用于构建静态网站和后端渲染网站。 next 特点默认情况下由服务器呈现自动代码拆分可加快页面加载速度简单的客户端路由（基于页面）基于"></meta> <title>蓝猫</title> </Head>

Vue绑定事件，双向数据绑定，只是循环没那么简单

阅读更多关于 Vue绑定事件，双向数据绑定，只是循环没那么简单

v-on 对象处理 <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p> <p v-on="{ mouseover: doTish, mouseout: doThat }"> 对象形式 </p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <p v-on="{ mouseover: doTish, mouseout: doThat }">对象形式</p> </div> <script> var vm = new Vue({ el:"#app", methods:{ doTish(){ event.target.style.color = "red"; }, doThat(){ event.target.style.color = "#0f0"; }, }, }) </script> </body> </html> v-on:keyup 监听按键触发

微信内置浏览器清理缓存方法

阅读更多关于微信内置浏览器清理缓存方法

目前感觉大部分所接触过的项目,目标用户几乎都是使用微信浏览器打开的,在一定程度来说,发布测试版还有本地测试的过程中,微信这种怎么也清不掉的缓存真的很烦人. 下面直入正题, 给出清除微信浏览器缓存的终极方法: 登出微信,再重新登录微信. ☆☆☆ 如果嫌麻烦的话, 可以试一下不一定成功的清除缓存方法: 1. 重新刷新几次,知道缓存被刷掉 ☆ 2. 在改变的资源后面加上版本号,也就是例如index.html?v=1234654 ☆☆ <script> if (! window . name ) { var str = Math . random (). toString ( 36 ). substr ( 2 ); // 随机字符串 window . location . href += ‘? S =‘ + str ; // 兼容微信浏览器刷新 window . name = ‘ isreload ‘; // name 属性可设置或返回存放窗口的名称的一个字符串。 } </script> 3. 安卓的可以打开这个网址进行缓存清理: http://debugx5.qq.com/ ☆☆ 4. 使用meta来禁用缓存 ☆  < meta HTTP-EQUIV = "pragma" CONTENT =

meta name="format-detection" content="telephone=no"

阅读更多关于 meta name="format-detection" content="telephone=no"

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。比如：在 iPhone 上默认值是： <meta name="format-detection" content="telephone=yes"/> 如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写： <meta name="format-detection" content="telephone=no"/> viewport 控制手机全屏 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文章来源: meta name="format-detection" content="telephone=no"

meta标签中兼容模式详解 http-equiv="X-UA-Compatible"

阅读更多关于 meta标签中兼容模式详解 http-equiv="X-UA-Compatible"

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。 < meta http-equiv = "X-UA-Compatible" content = "IE=7" /> 1.<meta http-equiv="X-UA-Compatible" content="IE=5" /> 像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。 2.<meta http-equiv="X-UA-Compatible" content="IE=7" /> 无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。 3.<meta http-equiv="X-UA-Compatible" content="IE=8" /> 开启 IE8 的标准渲染模式，但由于本身 X-UA

vue续集1

阅读更多关于 vue续集1

1.vue组件 1.1局部组件的使用 var App = { tempalte:` <div class='app'></div>` }; //2.挂子 <App />单闭合双闭合都可以 new Vue({ el:"#app", //用子 template:<App /> components:{ App } }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ color: #fff; } .main{ width: 100%; } .head{ width: 100%; height: 70px; background-color: purple; text-align: center; font-size: 20px; line-height: 70px; } .wrap{ width: 100%; height: 1200px; } .wrap .aside{ width: 30%; height: 1200px; background-color: green; float: left; } .wrap .content{ width: 70%;

Prometheus 监控K8S Node监控

阅读更多关于 Prometheus 监控K8S Node监控

Prometheus 监控K8S Node监控　　Prometheus社区提供的NodeExporter项目可以对主机的关键度量指标进行监控，通过Kubernetes的DeamonSet可以在各个主机节点上部署有且仅有一个NodeExporter实例，实现对主机性能指标数据的监控，但由于容器隔离原因，使用容器NodeExporter并不能正确获取到宿主机磁盘信息，故此本课程将NodeExporter部署到宿主机。 node_exporter：用于*NIX系统监控，使用Go语言编写的收集器使用文档：https://prometheus.io/docs/guides/node-exporter/ GitHub：https://github.com/prometheus/node_exporter exporter列表：https://prometheus.io/docs/instrumenting/exporters/ 官方文档：https://github.com/kubernetes/kube-state-metrics node-exporter所采集的指标主要有: node_cpu_* node_disk_* node_entropy_* node_filefd_* node_filesystem_* node_forks_* node_intr_total_* node

订阅 meta标签