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