vue指令、数据驱动、类属性、实例成员

总结：

Vue框架：前台界面，页面逻辑
1）指令
2）实例成员
3）组件
4）项目开发

DRF框架：数据（接口）
1）基础的模块：请求、响应、解析、渲染
2）序列化、三大认证
3）过滤、搜索、排序、分页
4）异常、第三方jwt、restful接口规范

Luffy项目：前后台分离项目
1）项目的登录认证、课程商机销售、项目完成
2）短信、支付宝、服务器、上线、redis、celery、git

一、前端主流的三大框架：

1、Vue是相对比较轻量级的框架，是通过进行双向数据绑定来达到驱动页面的效果。（轻量级）

2、Angular拥有很好的应用程序，是一个以JavaSpript编写的库，模板功能也异常强大，本身就带有丰富的Angular指令。（庞大）

3、React框架是起源于Facebook的项目，React可以轻易的解决跨浏览器兼容的问题，主要是通过对DOM的模拟减少与DOM的交互做到的。（精通移动端）

二、Vue框架：javascript渐进式框架

渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。

1、优势：
有指令（分支结构，循环结构...），复用页面结构等
有实例成员（过滤器，监听），可以对渲染的数据做二次格式化
有组件（模块的复用或组合），快速搭建页面

2、为什么学习vue：

Vue的一手文档是中文，实现前后台分离开发，节约开发成本。吸取Angular和React框架的优势。

3、怎样使用Vue

01、Vue环境简单搭建：通过script标签导入vue文件即可

1）cdn（在线）

2）本地导入（把Vue下载下来存到本地）
<script src="js/vue.js"></script>

三、实例成员

注意：new Vue() 表示创建Vue对象，一个对象只能控制一个标签。是操作内存数据的。

实例成员

1）、el: 挂载点
* 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）
* 2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯用app）
* 3）html标签与body标签不能作为挂载点（html和body标签不可以被替换）
* 4）是否接受vue对象，是外界是否要只有vue对象的内容决定的

2）、delimiters: 插值表达式（作用：渲染数据到页面上）

* 1）空插值表达式：{{ }}
* 2）中渲染的变量在data中可以初始化
* 3）插值表达式可以进行简单运算与简单逻辑
* 4）插值表达式符合冲突时，用delimiters自定义来解决

注意：django中索引取值用 .索引值不支持[ ]
3）、filters: 过滤器

* 1）用实例成员filters来定义过滤器
* 2）在页面结构中，用 | 来标识使用过滤器
* 3）过滤方法的返回值就是过滤器过滤后的结果
* 4）过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量，过滤器方法接受参数是安照传入的位置先后

4）、methods：方法。

*1）自定义vue控制的方法，给事件指令绑定的

四、指令: v-某某

1、文本指令

v-某某是vue指令，如果放在挂载点中会被vue解析。v-text="num"中的num是变量（指令是有限的，不可以自定义）

v-text 是原样输出渲染内容，渲染控制的标签自身内容会被替换掉。（<p v-text="num">123</p>会被num替换）
v-html 可以解析渲染html语法的内容

2、事件指令

v-on 事件名=“事件方法名”

五、js对象（普通对象与对象简写）

1）js没有字典类型，只有对象类型，对象可以完全替代字典来使用
2）js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
3）对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}

5）定义的函数，函数名大写，且函数内部有this，代表类
6）可以通过类.prototype.类属性实现所以对象共享

普通对象

var dic_obj = {
    // 属性：值（数值，函数）
    'name': 'Bob',
    'eat': function () {
        console.log('在吃饭')
    }
};

console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();

var height = 180;
var p = {
    height：height,
    name: 'Jerry',
    eat() {}
};
console.log(p.name, p.height);

对象简写

// 属性省略引号，方法简写
var obj = {
    name: 'Tom',
    eat () {
        console.log('在吃饭...')
    }
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()

// 属性变量简写
var height = 180;
var p = {
    height,
    name: 'Jerry',
    eat() {}
};
console.log(p.name, p.height);

六、js函数

1）函数的形参与调用时传入的实参关系（你传你的，我收我的）
2）传入和接受的参数个数不需要一致，但是一定按位进行赋值（没有关键字参数）
3）没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined

函数定义的方式

// 第一种方式
function fn1(a, b) {
    console.log(a, b);
    return a + b;
}

let res = fn1(10, 20, 30);
console.log(res);

// 2）第二种方式
let fn2 = function (a, b) {
    return a + b;
};

// 第三种方式（省略关键字的箭头函数）
let fn3 = (a, b) => {
    return a + b;
};

// 第四种方式（没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也省略）
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));

// 第五种方式（如果形参只有一个时，声明参数的()也可以省略）
let fn5 = num => num * num;
console.log(fn5(3));

七、数据驱动、DOM驱动、事件指令

数据驱动：

1）操作是一个功能，使用需要一个方法来控制。

2）方法名是变量，所以控制变量就可以控制该方法

DOM驱动：

1）js选择器获取目标标签

2）为目标标签绑定事件

3）在事件中完成相应逻辑

事件指令：

* 1）在实例成员methods中声明事件方法
* 2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"
eg: <button v-on:click="btnClick">按钮</button>
* 3）标签通过事件指令绑定声明的方法且自定义传参： v-on:事件名="事件方法名()"
eg: <button v-on:click="btnClick()">按钮</button> 不传任何参数
eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象，同不写()
eg: <button v-on:click="btnClick(10)">按钮</button> 只传入自定义参数，当然也可以传入事件对象

<body>
    <div id="app">
        <button v-on:click="btnClick">{{ btn1 }}</button>
        <button v-on:click="btnClick">{{ btn2 }}</button>
        <hr>

       <!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) -->
        <button v-on:click="fn1">按钮3</button>

       <!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 -->

        <button v-on:click="fn2($event, 10, 20)">按钮4</button>
        <hr>

        <button v-on:click="fn(btn1)">{{ btn1 }}</button>
        <button v-on:click="fn(btn2)">{{ btn2 }}</button>
    </div>
</body>

<script src="js/vue.js"></script>
<script>

    // DOM驱动
    // var btn = document.getElementsByTagName('button')[0];
    // btn.onclick = function () {
    //     console.log(111111111111);
    // };

    new Vue({
        el: '#app',
        data: {
            btn1: '按钮1',
            btn2: '按钮2',
        },
        methods: {
            btnClick () {
                console.log(666)
            },
            fn1 (ev) {
               console.log(ev.clientX, ev.clientY);
            },
            fn2(ev, n1, n2) {
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg) {
                console.log(msg);
            }
        }
    })
</script>

八、声明类的方法

// 第一种声明类的方法
    class People {
        constructor (name) {
            this.name = name
        }
        eat () {
            console.log(this.name + '在吃饭')
        }
    }
    let p1 = new People('Bob');
    let p2 = new People('Tom');
    console.log(p1.name, p2.name);
    p1.eat();

// 第二种声明类的方法(难点)：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name) {
    this.name = name;
    this.eat =function () {
        console.log(this.name + '在吃饭')
    }
}
let t1 = new Teacher('Owen');
t1.eat();

九、类的属性：Vue.prototype.类属性

// 类属性：给类属性赋值，所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();

// 赋值类属性
Fn.prototype.num = 100;

console.log(f1.num);
console.log(f2.num);

// 类似于单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

十、强弱语言

js是弱语言类型，python是强语言类型

console.log(10 + '5');   结果是：105 
console.log(10 - '5');   结果是：5
console.log(+'55555');

十一、前后端分不分离的区别

前后端不分离：

在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。

前后端分离：

前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据展现都是后端通过异步接口(AJAX)的方式提供的，前端只管展现。

前后端分离的优点：

彻底解放前端
前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码
提高工作效率，分工更加明确
前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。
局部性能提升
通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。
降低维护成本
通过MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

posted @ 2020-02-11 20:02 薛定谔的猫66 阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

薛定谔的猫66