Vue框架的优势
前端框架：angular、react、vue
vue：有前两大框架优点，摈弃缺点；没有前两个框架健全
vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)
中文API—易读，学习成本低
单页面应用—提升移动端app运行速度
数据的双向绑定—变量全局通用
数据驱动—只用考虑数据，不需要在意DOM结构
虚拟DOM—缓存机制
Vue如何在页面中引入
1、通过script标签引入vue.js环境
2、创建vue实例
3、通过el进行挂载
插值表达式
{{ 标量以及变量的简单运算 }}
文本指令
{{ }} | v-text | v-html | v-once
方法指令
v-on:事件 = ”变量“ | @事件=”变量“ | @事件=“变量()” | @事件=“变量($event,...)”
@click=’btnClick(1,2,$event)‘
btnClick(n1,n2,event){}
btnClick(...args){}
属性指令
v-bind：属性=“变量” | ：属性=“变量”
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
js补充
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法：方法名（）{}
new Vue({
el: '.d2',
});
挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果，一个页面可以有多个挂载点
总结：
1、通常挂载点都采用id选择器(唯一性)
2、html与body标签不能作为挂载点(组件知识点解释)
3、data为挂载点内部提供的数据
let app = new Vue
总结：
声明的实例是否用一个变量接收
1、在实例内部不需要，用this就代表当前vue实例的本身
2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
文本指令总结：
1、{{ }}
2、v-text ：不能解析html语法的文本，会原样输出
3、v-html ：能解析html语法的文本
4、 v-once：处理的标签的内容只能被解析一次
面向对象总结：
数据类型： undefined(空)、null(空)、string(字符串)、number(数字)、boolean(布尔型)、object(Array) (对象、数组)、function(方法、函数)
定义变量的方法：var、let、const、不写
构造函数==类
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: 'Jerry',
// eat: function (food) {
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的语法
console.log(this.name + '在' + food)
}
};
console.log(obj.name);
obj.eat('hotdog');
js函数补充总结：
let、const定义的变量不能重复定义，且具备块级作用域
const c = 30; // 常量
console.log(c);
for (let i = 0; i < 5; i++) {
console.log(i);
}
// console.log(i);
如果箭头函数没有参数
let f3 = () => {
console.log('f3 run');
};
f3();
结果：f3 run
如果箭头函数没有函数体，只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
结果：35
如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num*10;
res = f5(10);
console.log(res);
结果：100
重点：function、箭头函数、方法都具有本质的区别
let obj = {
name: 'Jerry',
//function//
// eat: function (food) {
// console.log(this);
// console.log(this.name + '在吃' + food)
// },
//箭头函数//
// eat: food => {
// console.log(this);
// console.log(this.name + '在' + food)
// },
//方法//
eat(food) { // 方法的语法
console.log(this);
console.log(this.name + '在' + food)
}
};
obj.eat('food');
事件指令总结：
事件指令：
v-on：事件名=“方法变量”
简写：@事件名=“方法变量”
鼠标悬浮|离开
mouseover mouseenter | mouseout mouseleave
事件变量，不添加（），默认会传事件对象：$event
事件变量，添加（），代表自定义传参，系统不再传入事件对象，可以手动传入事件对象
<p @click="f8($event, '第一个')">{{ info }}</p>
属性指令总结：
属性指令：
v-bind：属性名=“变量名”
简写： ：属性名=“变量名”
1、简单使用
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
2、class属性绑定
c1变量的值就是类名
<p :class="c1"></p>
3、多类名可以使用 [ ]语法，采用多个变量来控制
<p :class="[c2, c3]"></p>
4、选择器位可以设置为变量，也可以设置为常量（加引号）
<p :class="['d1', c4]"></p>
5、{类名：布尔值}控制某个类名是否起作用
<p :class="{x1: false}"></p>
6、多种语法混用
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
日考
1、http与https
http vs https:应用层，传输层，http协议传输层采用的是tcp(文件传输协议)
http特点：无状态，无连接，先客户端发出请求，服务端一定做出响应
https：在http协议之上增加ssl安全认证
2、前端布局
流式布局
响应式布局
盒模型布局
浮动布局
定位布局
3、你所知道的orm
框架采用元数据来描述对象——关系映射细节，元数据一般采用XML格式，并且存放在专门的对象——映射文件中。
我们在具体的操作数据库的时候，就不需要再去和复杂的SQL语句打交道，只要像平时操作对象一样操作它就可以了 。
持久化五类：把对象持久化到数据库中
Hibernate(Nhibernate)
iBATIS
mybatis
EclipseLink
JFinal
课程安排流程
Vue：
基础：指令、实例成员、组件(组件间传参)
项目：基于组件开发、插件（vue-router、vuex、axios、vue-cookies、jq+bs、element-ui）
DRF：
全称：django-restframework：完成前后台 分离式 django项目
知识点： 请求、响应、渲染、解析、异常
序列化组件、三大认证、视图家族(CBV)
分页、筛选、搜索、排序
Luffy：
目的：了解前后台分离项目，了解公司开发项目的模式
知识点：git、多方式登录、第三方短信认证、支付宝、上线