zoukankan html css js c++ java

Vue插值表达式, 文本指令, 事件指令, 属性指令, js面向对象

总结

http与https
- http是基于传输层作用于应用层的协议, 也有三次握手四次挥手, 而tcp是传输层的协议
- 基于请求响应的协议, 一次请求对应一次响应
- 无状态: 不保存客户端状态
- 无连接: 只在发送一次请求与响应一次请求时存在连接, 不同于TCP协议的藕断丝连状态
- https: 在http协议之上增加ssl安全认证
前端布局
- 流式布局, 一种布局思想,
  - 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变
- 响应式布局, 一种布局思想,
  - 有media标识符, 分别为不同的屏幕分辨率定义布局，
  - 在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配
- 盒模型布局, margin, 一般调整top和left
- 浮动布局, 清除浮动影响
- 定位布局, 默认static, 还有absolute, relative和fixed
django组件
- 请求组件
- 路由组件: 1.x和2.x区别
- 响应组件: render, httpresponse, redirect, jsonresponse
- orm---数据库交互
- templates---模板层交互
  - 模板语法, 过滤器, 标签, 自定义标签及过滤器, 模板的继承
  - 视图函数与模板之间的传参: render的第三个参数
  - 模板层将数据传入后端: forms组件,
  - 用auth模块完成登录注册的功能
  - 二次封装model扩展user表字段
- views---逻辑层交互
  - request: wsgi协议解释的到的数据结果
- 设计模式: MCV
  - MTV: 基于MVC基础上的三个文件夹models, templates, views
- model: orm, 数据库迁移命令完成对象关系映射

课程安排

Vues

基础: 指令, 实例成员, 组件(组件间传参)

项目: 基于组件开发, 插件: vue-router(路由), vuex(仓库), axios(ajax), vue-cookies), jq + bs, element-ui

DRF

全称: django-rest-framework: 完成前后端分离式django项目, 采用ajax交互数据

知识点:

请求, 响应, 渲染, 解析, 异常,
序列化组件, 三大认证, 视图家族(CBV)
数据处理: 分页, 筛选, 搜索, 排序

Luffy

目的: 了解前后端分离项目(主流, 可重构), 了解公司开发项目的模式

知识点: git(团队开发), 多方式登录, 调用第三方API, 二次封装包, 上线

Vue框架及其实例

三大前端框架

react, vue, angular

vue优点: 中文API, 单页面开发, 基于组件开发, 数据双向绑定, 虚拟DOM, 数据驱动

Vue实例

一个vue实例只能有一个挂载点
挂载点通常使用id选择器(唯一性)
html标签与body标签不能作为挂载点
在实例内部, this就指代当前实例本身, 进行实例间交互时需要用变量接收实例

'''
# Vue_test.html
	<style>
        body {
            user-select: none;  # 用户无法选中内容
        }
    </style>

<div id="d1">
    <p v-on:click="pClick" v-bind:style="pStyle">{{msg}}</p>
</div>

<script src="js/vue.js"></script>  // 引入vue.js文件
<script>
    console.log(Vue);
    let app = new Vue({
        el: '#d1',  // 挂载点, vue实例与页面标签建立关联
        data: {  // data为挂载点提供数据
            msg: '信息',
            pStyle: {
                color: 'blue',
            }
        },
        methods: {
            pClick: function () {
                app.pStyle.color = 'aqua';
            }
        }
    });
</script>
'''

插值表达式

'''
<body>
<div id="app">
    <p>{{msg + 10}}</p>  # 信息10
    <p>{{msg[0]}}</p>  # 信
    <p>{{msg.split('')}}</p>  # [ "信", "息" ]
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '信息',
            num: 10,
        },
    });
</script>
'''

文本指令

'''
<body>
<div id="app">
    <p>{{msg.split('')}}</p>  # [ "蔡", "启", "龙" ]
    <p v-text="msg.split('')">12345</p>  # [ "蔡", "启", "龙" ]
    <p v-text="info"></p>  # <i>i标签</i>
    <p v-html="info"></p>  # i标签
    <p v-once v-on:click="pClick">{{msg}}</p>  # 信息  # 标签只能被渲染一次
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '信息',
            info: '<i>i标签</i>'
        },
        methods: {
            pClick: function () {
                this.msg = '蔡启龙'
            },
        },
    });
</script>
'''

js面向对象

js基本数据类型

undefined, null, string, number, boolean, object(Array), function

'''
<script>
    function f1() {  // 定义函数
        console.log('f1');
    }

    f1();  // 1

    // 构造函数 == 类
    function F1(name) {  // 定义类
        this.name = name;
        this.eat = function (food) {  // 类中的方法
            console.log(this.name + '在吃' + food);
        };
    }

    let f1oo = new F1('蔡启龙');
    console.log(f1oo.name);  // 蔡启龙
    f1oo.eat('苹果');  // 蔡启龙在吃苹果
    
    // js中的函数传参可少传也可多传, 少的参数用undefined替代, 多的参数不接收也不报错
</script>
'''

四种定义变量的方式及箭头函数

var, let, const, 不写

'''
<script>
    function f1() {
        var a = 10;
        let b = 20;
        const c = 30;
        d = 40;
    }

    f1();  // 40
    // console.log(a);  // 报错, 函数外部无法访问
    // console.log(b);  // 报错, 函数外部无法访问
    // console.log(c);  // 报错, 函数外部无法访问
    console.log(d);  // 40, 不加任何声明定义的变量为全局变量

    const e = 50;
    // e = 60;  // 报错, 常量不能被修改
    // const e = 70;  // 报错: 'e' has already been declared

    var f = 80;
    var f = 90;

    let g = 100;
    // let g = 110;  // 报错: 'g' has already been declared;

    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log(i);  // undefined

    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log(i);  // 5

    /*
    let, const定义的变量不能重复定义,
    let, const定义的变量具有块级作用域, 出块级作用域则失效
    局部作用域是块级作用域的一种特殊情况
    块级作用域可以避免变量污染,
    python只有局部作用没有块级作用域, 但python有垃圾回收机制
    */

    let f2 = function () {  // 函数定义方式二
        console.log('f2')
    };
    f2();  // f2

    let f3 = (n1, n2) => n1 + n2;  // 箭头函数, 参数为多个或0个, 没有函数体时的写法
    console.log(f3(120, 130));  // 250

    let f4 = n3 => n3 * 140;  // 箭头函数只有一个参数, 没有函数体时的写法
    console.log(f4(150));  // 21000

    let f5 = () => {  // 箭头函数, 有函数体时的写法
        console.log('f5');  // f5
        return 160
    };
    console.log(f5());  // 160
</script>
'''

箭头函数的应用

'''
<script>
    let obj = {  // 直接写大括号为创建对象
        name: 'Nick',
        // desc: function (attr) {
        //     console.log(this.name + attr)
        // },

        desc() {  // 字典对象中方法的标准写法, 不需要键值对形式
            console.log(this)
        },

        test: () => {
            console.log(this);
        },
    };
    
    console.log(obj.name);  // Nick
    obj.desc();  // {name: "Nick", desc: ƒ}
    obj.test()  // Window {parent: Window, …}, 箭头函数引用的为外层的this
</script>
'''

事件指令

事件指令: v-on: 事件名="方法变量"

简写: @事件名="方法变量"

鼠标事件

'''
<body>
<div id="app">
    <p v-on:click="f1">{{msg}}</p>
    <p @mouseover="f2" @mouseout="f3" @mousedown="f4">{{action1}}</p>
    <p @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{action2}}</p>
</div>
</body>

<script>
    new Vue({
        el: app,
        data: {
            msg: '点击切换',
            action1: '鼠标事件',
            action2: '鼠标事件续',
        },
        methods: {
            f1() {
                this.msg = '切换成了奥特曼';
            },
            f2() {
                this.action1 = '鼠标悬浮';
            },
            f3() {
                this.action1 = '鼠标离开';
            },
            f4() {
                this.action1 = '鼠标点击';
            },
            f5() {
                this.action2 = '鼠标抬起';
            },
            f6() {
                this.action2 = '鼠标移动';
            },
            f7() {
                this.action2 = '右击菜单'
            }
        }
    });
</script>
'''

事件对象

'''
<body>
<div id="app">
    <p @click="f1">{{info}}</p>
    <p @click="f2(1, $event, 3)">{{info}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '事件传参'
        },
        methods: {
            f1(ev, x, y) {
                this.info = '验证默认情况下是否传参';
                console.log(ev, x);  // MouseEvent {..., clientX: 41, clientY: 28, …}, undefined
            },
            f2(a, b, c) {
                this.info = '尝试主动传参的情况';
                console.log(a, b, c)  // 1 MouseEvent ... 3
            },
        },
        // 事件变量, 不加(), 默认会传事件对象; 添加()代表自定义传参, 系统不再传入事件对象, 但可以手动传事件对象$event
    })
</script>
'''

属性指令

属性指令: v-bind:属性名="变量"

简写: :属性名="变量"

普通属性

'''
<body>
<div id="app">
    <p v-bind:title="pTitle">汉字</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            pTitle: '鼠标悬浮提示',
        },
        methods: {

        },
    })
</script>
'''

class属性

'''
<head>
    ...

    <style>
        .c1 {
             200px;
            height: 200px;
            background-color: orange;
        }

        .c2 {
            border-radius: 50%;
        }

        .c3 {
            border-radius: 25%;
        }
    </style>
...

<body>
<div id="app">
    <p :class="[x1, x2]"></p>  # <p :class="c1 c2"></p>, []可以控制多个类名值
    
    # []内可以为常量值, 也可以为布尔类型属性值, isTrue为true时, 则有c3属性值, 否则没有
    <p :class="['c1', {c3: isTrue}]" @click="isTrue = !isTrue"></p>  # <p :class="c1 c3"></p>, 
</div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            x1: 'c1',
            x2: 'c2',
            isTrue: 1,
        },
        methods: {},
    })
</script>
'''

style属性

'''
	<p :style="myStyle">样式属性</p>  # 统一设置样式
	<p :style="{ w, height: h, backgroundColor: bgc,}">样式属性</p>  # 细分每个样式

    new Vue({
        el: '#app',
        data: {
            myStyle: {
                 '100px',
                height: '100px',
                backgroundColor: 'red',
            },
            w: '200px',
            h: '200px',
            bgc: 'green',
        },
        methods: {},
    })
'''

查看全文

相关阅读:
SQLSERVER 中GO的作用
 工作相关工具介绍
 SQL Server 没有足够的内存继续执行程序 (mscorlib)的解决办法
 glyphicons-halflings-regular.woff2 not found 前台错误修正
 Asp.net MVC Pager分页实现
 金融相关网站
 Excel 函数使用
 C# 使用 Invoke 实现函数的白盒 UT 测试
 反编译工具
 SQL Server 数据库修改后不允许保存

原文地址：https://www.cnblogs.com/-406454833/p/12117926.html