前后台的搭建-结合Bootstrap和JQuery搭建vue项目

Z时代
2024-01-10
分类：综合

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 * 2;
    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>