前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目
流式布局思想
"""
页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放
2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放
3) 将子集字体设置成 继承值，就可以通过父集统一控制子集 """
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<style>
/*body { margin: 0 }*/
.box {
width: 800px;
height: 200px;
background-color: orange;
/*页面宽度缩放，盒子始终居中*/
margin-left: auto;
margin-right: auto;
width: 80%;
/*vw: view width | vh: view height*/
width: 80vw;
width: 80vh;
}
/*em、rem*/
.sup {
font-size: 40px;
}
.sub {
/*font-size: inherit;*/
/*font-size: 1.5em;*/
/*width: 5em;*/
font-size: 2rem;
}
html {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="sup">
<div class="sub">字</div>
</div>
</body>
</html>
JavaScript函数
简单的举例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js函数</title>
</head>
<body>
<h1>js函数</h1>
</body>
<script>
// 参数：你传你的，我收我的
function fn1(a, b, c, d) {
console.log(a, b, c, d);
console.log('fn1 run');
}
fn1(1, 2, 3); let fn2 = function (...args) {
console.log(args);
console.log(args[0]);
console.log('fn2 run');
};
fn2(1, 2, 3, 4); (function () {
console.log('fn3 run');
})(); let fn4 = () => {
console.log('fn4 run');
};
fn4(); // 有参有反
let fn5 = (a, b) => {
console.log(a, b);
return a + b;
};
let res = fn5(1, 2);
console.log(res); // 箭头函数函数体如果只有返回值，可以简写
let fn6 = (a, b) => a + b;
res = fn6(10, 20);
console.log(res); // 当形参只有一个，可以省略()
let fn7 = a => a * ;
res = fn7(10);
console.log(res); // 当形参为空的简写方式
let fn8 = () => 200;
res = fn8();
console.log(res); </script>
</html>
面向对象JavaScript
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>面向对象js</title>
</head>
<body>
<h1>面向对象js</h1>
</body>
<script>
// ES6
class Student {
constructor(name) {
console.log('构造器调用了');
this.name = name;
} study() {
console.log(`${this.name}在学习`)
}
}
let s1 = new Student('Bob');
console.log(s1.name);
s1.study();
//ES5
function Teacher(name) {
this.name = name;
this.teach = function () {
console.log(`${this.name}在教学`)
};
this.test = () => {
console.log(`${this.name}-test`)
}
}
let t1 = new Teacher('Tom');
console.log(t1.name);
t1.teach();
t1.test(); // 可以理解为类属性，所有对象共有
Teacher.prototype.age = 10;
Teacher.prototype.sleep = function () {
console.log(`${this.name}在睡觉`)
};
console.log(t1.age);
t1.sleep();
let t2 = new Teacher('Jerry');
console.log(t2.age);
t2.sleep(); /* 根组件、局部组件、全局组件都是Vue的对象，所以给Vue原型设置的变量，所有组件的this都可以访问该变量
Vue.prototype.abc = 123;
let localTag = {};
Vue.component('',{});
new Vue({
components: {
localTag
}
});
*/
// function 与 箭头函数 是有本质区别的
let h1 = document.querySelector('h1');
// h1.onclick = function () {
// // alert(this.innerText);
// console.log(this);
// };
// h1.onclick = () => {
// // alert(this.innerText);
// console.log(this);
// }
</script>
</html>
前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目的更多相关文章
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- 前端 JS/TS 调用 ASP.NET Core gRPC-Web
前言 在上两篇文章中,介绍了ASP.NET Core 中的 gRPC-Web 实现 和 在 Blazor WebAssembly 中使用 gRPC-Web,实现了 Blazor WebAssembly ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- 搭建VUE项目
1.换源由于npm源服务器在国内访问速度较慢,所以一般需要更换源服务器地址npm config set registry https://registry.npm.taobao.org也可以安装cnp ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- 前端知识复习： JS选中变色
前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...
- Vue + Spring Boot从零开始搭建个人网站（一） 之 项目前端Vue.js环境搭建
前言: 最近在考虑搭建个人网站,想了想决定采用前后端分离模式 前端使用Vue,负责接收数据 后端使用Spring Boot,负责提供前端需要的API 就这样开启了我边学习边实践之旅 Vue环境搭建步骤 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
随机推荐
- Abstract抽象类 && Interface接口
# 抽象类 ## 将相同的但是不确定的动作提取出来,抽象化,抽象类的意义在于,在子类中进行实现. ## 抽象类可以被继承,子类继承抽象类时,需要对抽象方法进行完全实现. ## 抽象方法不能有方法体. ...
- 10 Json(unity3D)
//写入json文档注意事项: 1.在Asset下要有一个StreamingAssets文件夹 2.在文件夹内,有一个已创建好的json空文档 3.引入命名空间 using Litjson; usin ...
- 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring基于XML装配Bean
Bean 的装配可以理解为依赖关系注入,Bean 的装配方式也就是 Bean 的依赖注入方式.Spring 容器支持多种形式的 Bean 的装配方式,如基于 XML 的 Bean 装配.基于 Anno ...
- DRF源码-serializers
class BaseSerializer(Field) """ The BaseSerializer class provides a minimal class whi ...
- 第四章:Schema与数据类型优化
1. 选择优化的数据类型 选择数据类型的原则 更小的通常更好:选择可以正确存储数据的最小数据类型 小的数据类型消耗更少的内存.CPU;占用更少的磁盘 选用简单的数据类型:简单的数据类型通常需要更少的C ...
- nginx反向代理和负载均衡的实现
反向代理和负载均衡的关系可以理解为,一个ip的负载均衡就是反向代理. 反向代理使用的是:proxy_pass指令 负载均衡使用的是:proxy_pass指令+upstream指令 负载均衡的3中方 ...
- delphi 单例模式
unit Singleton; (* 单例模式适用于辅助类, 一般伴随于单元的生命周期 *) interface uses SysUtils; type TSingleton = class publ ...
- CodeForces 1000B Light It Up（贪心、思维）
https://codeforces.com/problemset/problem/1000/B 题意: 一个模拟思维题.就是有一盏灯,0时刻开着.n次操作,你可以在其中加入一次操作(或者不加),操作 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：函数定义
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- MySQL性能管理及架构设计：第1章 实例和故事
1-1 什么决定了电商双11大促的成败 数据库架构 1-2 在双11大促中的数据库服务器 通过监控信息从而确定:哪些因素影响了数据库性能? 1-3 在大促中什么影响了数据库性能 1-4 大表带来的问题 ...