目录
http 与 tcp : 一个是应用层, 传输层, http 协议传输层采用的是tcp
http的特点: 无状态 无连接 先客户端发送请求, 服务端一定做出响应
https : 在http协议之上增加ssl安全认证
流式布局
响应式布局
盒子模型布局: margin padding border content
浮动布局: float ------ clearfix 清除浮动 防止父标签塌陷
定位布局:默认static relative absolute fiexd
对象关系映射
表 --- 类 记录 --- 对象 字段 --- 对象.属性
"""vue: 基础:指令, 实例成员, 组件(组件间传参) 项目: 基于组件开发, 插件(vue-router, store, vuex, axios, vue-cookies, jq+bs ,element-ui) drf 全称: django restframework :完成后台 分离式django项目 知识点: 请求,响应,渲染,解析,异常 序列化组件,三大认证(drf永远不用csrf_token),视图家族(cbv) 分页器,过滤,筛选,搜索,排序小商城项目: 知识点:git,多方式登录,第三方短信认证(面向对象二次封装),支付宝,项目上线 目的: 了解前后台分离项目, 前端后端完全独立,了解公司开发项目的模式"""? 前台主流框架: angular, react,vue
? vue 有前两大框架优点, 摈弃缺点, 没有前两个框架健全 数据驱动
? ECMA Script ec5/6 type Script
? vue优点:官网 中文api, 单页面应用,基于组件开发, 数据双向绑定,虚拟DOM, 数据启动思想(相比DOM驱动),
# vue的导入<script src="vue.js"></script> <!--vue的导入 可以取消console的打印大约在9000行--># vue实例console.log(Vue);# 创建vue实例let app = new Vue({})// 不同于jq 可以创建多个实例 每一个实例都可以控制一个标签<div id='d1'>{{ }}</div><div class='d2'>{{ }}</div><div class='d2'>{{ }}</div>let app = new Vue({ el:'#id', // 挂载点 vue实例与页面标签建立关联 el:'.d2', // 挂载点采用的是css3选择器语法, 但是只能匹配第一次搜索到的结果})// 1.通常使用id为挂在点// 2.但是 html 和 body 不能成为挂载点!! <div id="d1"> {{ }} <!--双大括号是vue的语法 使用el:id 可以与页面建立联系--> </div> data:{ msg:'message', info:'info', // 挂载点出现的变量由data提供 pStyle:{ color:'red' // 样式操作 } }, <div id="d1"> {{ info }} <!--数据由data提供--> {{ msg }} <!--属性 用 bind--> <p v-bind:style="pStyle">{{info}}</p> </div>methods:{ pClick:function () { // 如何拿到vue实例? // app.pStyle.color = 'yellow' // 可以使用this来获取 console.log(this.info); // 切换案例 if (app.pStyle.color !== 'yellow'){ app.pStyle.color = 'yellow' }else{ app.pStyle.color = 'red' } } }}) // 声明的实例是否用一个变量来接收 // 1.在实例内部不需要,用this就代表当前vue实例本身 // 2.在实例外部或其他实例内部需要使用可以用变量接收<body> <div id="d1"> <!--事件 用 on--> <p v-on:click="pClick">{{ info }}</p> <!--点击事件由methods提供--> <!--属性 用 bind--> <p v-bind:style="pStyle">{{info}}</p> </div></body>完成运算 和 一些方法的调用
<p>{{ msg }}</p><p>{{ num }}</p><!--插值表达式 运算 --><p>{{ num + 1 }}</p> <!--num 的运算--><p>{{ num * 10}}</p><p>{{ msg[1] }}</p> <!--取msg的第一个字符--><p>{{ msg.split('') }}</p> <!--按空格拆分--><p>{{ msg.split('')[0] }}</p> <!--按空格拆分 取 0-->new Vue({ el:'xxx', data:{ msg:'msg', num:10, }}){{ }} <!--插值表达式-->v-text <!--不能解析html语法文本,会原样输出-->v-html <!--能解析html语法文本-->v-once <!--处理的标签的内容只能被解析一次 渲染一次就不能改了--> <p v-html='info'></p> 点击<p v-text='info'></p> '<a>点击</a>'new Vue({ el:'xxx', data:{ info:'<a>点击</a>' }})<!--事件指令语法: v-on:事件名='方法变量'--><!--支持简写: @事件名='方法变量'--><p v-on:click='f1'>{{ msg }}</p> <!--点击事件--><!--mouseover mouserenter | mouseout mouseleave--><p v-on:mouseover='f1'>{{ msg }}</p> <!--鼠标悬浮事件--><p v-on:mouseout='f1'>{{ msg }}</p> <!--鼠标离开事件--><p v-on:mousedown='f1'>{{ msg }}</p> <!--鼠标按下事件--><p v-on:mouseup='f1'>{{ msg }}</p> <!--鼠标抬起事件--><p v-on:mousemove='f1'>{{ msg }}</p> <!--鼠标移动事件--><p v-on:contextmenu='f1'>{{ msg }}</p> <!--右键事件--><!--vue事件传参数--><!--事件变量 不加() 默认会传事件对象:$event --> <p @click='f2'>{{ msg }}</p> <!--事件变量 添加() 代表要自定义传参 系统不再传入对象 但是可以手动传入 事件 对象 --><p @click='f2($event, 1 )'></p> new Vue({ data:{msg:'没点击了'}, methods:{ f1(){ this.msg = '点击了' }, f2(env){ pass } }})<div class='d1' name='n1' title='悬浮提示' style='color:red'></div><!--里面的都叫属性 style 里面的叫样式--><!--属性指令:v-bind:属性名='变量名'--><!--简写: :属性名='变量名' ***--><p v-bind:title='pTitle' :abc='def' :style='pStyle'>简单使用</p><!--class 属性绑定 特点 可以赋值一个 也可以多个--><p v-bind:class='C1'>简单使用</p><p v-bind:class='[C1,C2]'>设置多个</p><p v-bind:class='["d1",C1,C2]'>设置死值</p><!--true为起作用 false 不起作用 x1是变量--><!--逻辑可以直接在click里面写 x1 = x1取反--><p :class='{x1: true}' @click='x1 = !=x1'>布尔类型属性</p> new Vue({ el:'#app1', data:{ pTitle:'悬浮信息', def:'自定义属性', pStyle:{ color:'red', backgroundColor:'red', // 驼峰命名 对应的就是 - 连接 }, C1:'d1 d1', // 赋值方式一 C2:'d1', C3:'d2', }}).d1{background-color:'green';}.d2{width:100%;}// 数据类型// undefined , null, string, number, object(Array), function, // var , let, const , 不写// 面向过程function f1() {console.log('123')};f1()// 面向对象 称为构造函数 == 类function F1(name) { // 属性 this.name = name // 方法 this.eat = function(food){ console.log(this.name + '在吃' + food) } };// 实例化let f2 = new F2('Tom');console.log(f2); // >>> 'Tom'f2.eat('嫂子'); // >>> 'Tom在吃嫂子'// 面向对象2let obj = { name:'dragon', // 方法1 eat:function(food){console.log(this.name + '在吃' + food)} // 方法简写2 eat(food){ console.log(this.name + '在吃' + food)}}// 变量的4种定义方式function f1(){ var a = 10; let a = 20; // let const 定义的变量不能重复定义, 且具备块级作用域 const c = 30; // 常量 不能修改 d = 40; // 不加声明词 全局变量 外部可以调用}// 函数的定义方式function f1(){};f1();let f2 = function(){};f2();// 箭头函数let f3 = () => {};f3();// 如果箭头函数没有函数体,只有返回值let f4 = (n1, n2) => n1 + n2;let res = f4(10, 25);// 如果箭头函数参数列表只有一个 可以省略()let f5 = num => num*10res = f5(10);function和 箭头函数的区别
// 重点: function,箭头函数,方法,都有本质区别// 在箭头函数中是没有this的 里面的this指向的是window的 // 应用场景new Vue({ data:{res:''}, methods:{ fn(){ this.$axios({ url:'', mehtod:'get', data:{} }).then(function(response){ this.res = response // 这样式不行的 因为这里的this指代的是axios .then(response => { this.res = response // 这样的话就不会产生this 会去找父级的this }) }) } }})
