日考：
1.http与https区别：
http vs tcp:应用层，传输层，http协议传输层采用的是tcp
http的特点：无状态，无连接，基于请求响应（先客户端发送请求，鼓舞短一定做出相应的响应）
2.前端布局
流失布局
响应式布局
盒模型布局
浮动布局
定位布局
3.orm
对象关系映射
课程安排
vue:
基础：指令、实力成员、组件（组件间传参）
项目：基于组件开发、插件（vue-router、vues、axios、vue-cookies、jq+bs、element-ui）
DRF:
全称：django-restframework:完成前后台 分离式 django项目
知识点：
请求、响应、渲染、解析、异常
序列化组件、三大认证、视图家族（CBV）
分页、过滤、筛选、搜索、排序
Luffy:
目的：了解前后台分离项目，了解公司开发项目的模式
知识点：git、多方式登录、第三方短信认证、支付宝、上线
Vue
前端框架：angular、react、vue
vue:有前两大框架优点，摒弃缺点；没有前两个框架健全
vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想（相比DOM驱动）
1、什么是vue
可以独立完成前后端分离web项目的JavaScript框架
2、为什么要学vue
三大主流框架之一：angular、react、vue
先进的前端设计模式：MVVM
可以完全脱离服务器，以前端代码复用的方式渲染整个页面：组件化开发
3.特点：
单页面web应用
数据驱动
数据的双向绑定
需您DOM
4.如何使用
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
}
})
</script>
</html>
vue示例（核心入门）
vue控制挂载点的内部，可以实例化多个vue，挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
总结：1.通常挂载点都采用id选择器（唯一性）
2.html与body标签不能作为挂载点
声明的实例是否用一个变量接收
1.在示例内部，用this就可以代表当前vue示例本身
2、在示例外部或其他示例内部需要，定义一个变量接受new Vue() 产生的实例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
user-select: none; /*页面不能选中
}
</style>
</head>
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
</div>
</section>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'section',
data:{ //data为挂载点提供数据
msg:'message',
info:'信息',
pStyle:{
color:'red'
}
},
methods:{ //个人认为事件都是放在methods里的
pClick:function () {
if (this.pStyle.color!=='yellow'){
this.pStyle.color='yellow'
}else{
this.pStyle.color='red'
}
}
}
})
</script>
</html>
插值表达 式
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ num*10 }}</p>
<p>{{ msg+num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'信息',
num:10
}
})
</script>
</html>
文本指令
1、{{ }} 插值表达式
2、v-text 不能解析html语法的文本，会原样输出
3、v-html 能解析html语法的文本
4、v-once 处理的标签内容只能被解析一次 （dom渲染+vue虚拟渲染 这是两次 v-once只渲染一次dom渲染）
<body>
<div id="app">
<p>{{ msg.split('') }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p>
<p v-on:click="pClick" v-once>{{ msg+info }}</p><!--个人理解：其他都变，就他不变-->
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'message',
info:'<i>info</i>>'
},
methods:{
pClick:function () {
this.msg='信息'
}
}
})
</script>
</html>
事件指令
格式:
v-on:事件名=“方法变量”
简写：@事件名=“方法变量”
事件变量不添加括号，默认会传事件对象：$evenrt
事件变量添加括号，代表要自定义传参，系统不再传入事件对象，但是可以 手动传入事件对象
click: 点击事件
mouseover: 鼠标悬浮
mouseout: 鼠标离开
mousedown: 鼠标按下
mouseup: 鼠标松开
mousemove: 鼠标移动
contextmenu: 鼠标右击
<body>
<div id="app">
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<p @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<p @click="f8($event,'第一个人')">{{ info }}</p>
<p @click="f8($event,'第二个人')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'点击切换',
action:'鼠标事件',
info:'确定点击者'
},
methods:{
f1(){
this.msg='点击了呀'
},
f2(){
this.action='悬浮';
console.log('悬浮')
},
f3(){
this.action='离开';
console.log('离开')
},
f4(){
this.action='按下';
console.log('按下')
},
f5(){
this.action='抬起';
console.log('抬起')
},
f6(){
this.action='移动';
console.log('移动')
},
f7(){
this.action='右键';
console.log('右键')
},
f8(ev,argv){
console.log(ev,argv);
this.info=argv+'点击了'
}
}
})
</script>
</html>
属性指令
格式:
v-bind:属性名="变量"
简写： :属性名="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
200px;
height: 200px;
background-color: red;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 25%;
}
</style>
</head>
<body>
<div id="app">
<!--1、简单使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
<img :src="img_src" alt="">
<!--2、class属性绑定-->
<!--c1变量的值就是类名-->
<p :class="c1"></p>
<!--多类名可以使用[]语法，采用多个变量来控制-->
<p :class="[c2,c3]"></p>
<!--选择器位可以设置为变量，也可以设置为常量-->
<p :class="['d1',c4]"></p>
<!--{类名：布尔值}控制某类名是否起作用-->
<p :class="{x1:false}"></p>
<!--多种语法混用-->
<p :class="['d1',{d2:is_true}]" @click="is_true=!is_true"></p>
<!--3、style属性绑定（了解）-->
<p :style="myStyle">样式属性</p>
<p :style="{weight:w,height:h,backgroundColor:bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
pTitle:'简单使用',
def:'自定义属性',
img_src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1:'d1 d2',
c2:'d1',
c3:'d3',
c4:'d3',
is_true:true,
myStyle:{
'100px',
height:'200px',
backgroundColor:'red',
},
w:'200px',
h:'100px',
bgc:'green'
},
methods:{
changeImg(){
this.img_src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
</html>
面向对象js
undefined、null、string、number、object（Array)、function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function f1(name){
console.log('f1 run')
}
f1();
//构造函数=类
function F2(name) {
this.name=name;
this.eat=function (food) {
console.log(this.name+'在'+food)
}
}
let ff1=new F2('Bob');
console.log(ff1.name);
let ff2=new F2('Tom');
console.log(ff2.name)
ff1.eat('饺子');
ff2.eat('sao子面');
let obj={
name:'jack',
// eat:function (food) {
// console.log(this.name+'在'+food)
// }
eat(food){//方法的语法
console.log(this.name+'在'+food)
}
};
console.log(obj.name)
obj.eat('无用')
</script>
</html>
js函数补充
不加声明词的是全局变量 d=40
常量不能进行修改
let、const定义的变量不能重复定义，且具备块级作用域
全局作用域>块级作用域>局部作用域
var可以重复定义
<script>
function f() {
d=40;//全局变量
}
f();
console.log(d)
const c=30;//常量
console.log(c)
if (1){
var a=10;
let b=20;//let const 定义的变量不能重复定义，且具备块级作用域
}
console.log(a);
// console.log(b);
</script>
function f1() {
console.log('f1 run')
}
let f2=function () {
console.log('f2 run')
}
let f3=()=>{
console.log('f2 run')
}
如果箭头函数没有函数体，只有返回值
let f4=(n1,n2)=>n1+n2;
let res=f4(10,25);
console.log(res);
如果箭头函数参数列表只有一个，可以忽略（）
let f5=num=>num*10;
res=f5(10);
console.log(res);
重点：function、箭头函数、方法具有本质的区别:箭头函数没有this
let obj={
name:'jack',
eat(food){//方法的语法
console.log(this.name+'在'+food)
}
};
obj.eat('无用')
new Vue({
data: {
res: ''
},
methods: {
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(function (response) {
_this.res = response.data;
})
},
fn1 () {
// axios插件
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(response => {
this.res = response.data;
})
}
}
})
知识总结、
1.vue框架的优势
2.vue如何在页面中引入
1）通过script标签引入vue.js环境
2）创建vue实例
3）通过el进行挂载
3。插值表达式
{{ 变量及变量的简单运算 }}
4.文本指令
{{ }} |v-text|v-html|v-once
5.方法指令
v-on:事件=“变量” | @事件=“变量” | @事件=“变量（）” | @事件=“变量（$event,....）”
6.属性指令
v-bind:属性=“”