day65

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

事件变量，添加（），代表自定义传参，系统不再传入事件对象，可以手动传入事件对象

{{ info }}

属性指令总结：

属性指令：

v-bind：属性名=“变量名”

简写： ：属性名=“变量名”

1、简单使用

简单使用

2、class属性绑定

c1变量的值就是类名

3、多类名可以使用 [ ]语法，采用多个变量来控制

4、选择器位可以设置为变量，也可以设置为常量（加引号）

5、{类名：布尔值}控制某个类名是否起作用

6、多种语法混用

---

日考

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、多方式登录、第三方短信认证、支付宝、上线

---