v-model 双向数据绑定：通过前面学习知道Vue是数据驱动的，数据驱动有一个精髓之处是数据双向绑定， 即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。 v-model指令提供表单输入绑定，可以在<input>、<textarea> 及<select> 元素上创建双向数据绑定。 v-model指令其实是一个语法糖，背后本质上包含v-bind和v-on两个操作。 单选框（radio）： 多选框（select）： 登录案例：获取用户输入用户名和密码 常用指令总结

v-if 这里，v-if 指令将根据表达式seen 的值的真假来插入/移除元素。 v-if指令必须将它添加到一个元素上。如果想切换多个元素呢？ 示例：添加一个else块此时可以把一个元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含元素。 v-else-fi多分支： v-show v-show：另一个用于条件性展示元素的指令，与v-if不同的是，v-show的元素始终会被渲 染并保留再DOM中，所以v-show只是简单地切换元素的display CSS属性。 v-for 可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式 的特殊语法，其中items 是源数据数组，而item 则是被迭代的数组元素的别名。 当Vue 正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数 据项的顺序被改变，Vue 将不会移动DOM 元素来匹配数据项的顺序，而是就地更新每个 元素，并且确保它们在每个索引位置正确渲染。 为了给Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你 ...

数据属性 组件的data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返 回一个对象，然后Vue 会通过响应性系统将其包裹起来，并以$data 的形式存储在组件实 例中。为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来： 参考文档： 相等 https://v3.cn.vuejs.org/guide/data-methods.html#data-property 方法 方法（methods）：处理数据的函数。在methods选项中定义的函数称为方法。 示例：添加方法及调用 在methods选项中定义的方法与data选项中的数据一样，可以在组件的模板中使用。 在模板中，它们通常被当做事件监听使用： 计算属性 计算属性（computed）：根据所依赖的数据动态显示新的计算结果。 示例：需要在双花括号里添加计算再展示数据，例如统计分数 使用computed： 小结：计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是， 它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这 就极大的提高了我们程序的性能 ...

指令介绍 指令：带有v-前缀的特殊属性。 指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 v-text v-text作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题！ v-html 某些情况下，从服务端请求的数据本身就是一个HTML代码，如果用双大括号会将数据解 释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令： v-on 在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。 在Vue中如何监听事件呢？使用v-on指令 示例：监听按钮的点击事件 v-on: 冒号后面是event参数，例如click、change v-bind v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递props值（这个后面再介绍） 应用场景：图片地址src、超链接href、动态绑定一些类、样式等等 v-bind：绑定超链接 示例：响应式地更新HTML 属性 v-bind 指令后接收一个参数，以冒号分割。 v-bind 指令将该元素的href 属性与表达式url 的值绑定。 v-bind ...

Vue介绍 Vue.js（简称Vue） 是一套用于构建用户界面的渐进式前端框架。 Vue.js 核心实现： 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心 DOM操作，而专心数据操作。 可组合的视图组件：把视图按照功能切分成若干基本单元，可维护，可重 用，可测试等特点。 官网：https://v3.cn.vuejs.org/ 引入Vue 使用Vue的四种方式： 在HTML中以CDN包的形式导入 下载JS文件保存到本地再导入 使用npm安装 使用官方VueCli脚手架构建项目（不建议新手直接用） 参考文档：https://v3.cn.vuejs.org/guide/installation.html 从一个Hello World例子开始： 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM 的系统： 现在数据和DOM已经被建立了关联，所有东西都是响应式的，可通过下面示例确认： 模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将DOM 绑定至底层组件实例 的数据。所有Vue ...

主流认证方式 主流认证方式： Session Token JWT 主流认证方式：Session认证 主流认证方式：Token认证 主流认证方式：JWT认证 DRF认证 DRF认证与权限 目前DRF可任意访问，没有任何限制，是不符合生产环境标准的，因此接下来学习认证实现访问控制。 DRF支持四种认证方式： BasicAuthentication：基于用户名和密码的认证，适用于测试 SessionAuthentication：基于Session的认证 TokenAuthentication：基于Token的认证 RemoteUserAuthentication：基于远程用户的认证 DRF支持权限： IsAuthenticated：只有登录用户才能访问所有API AllowAny：允许所有用户 IsAdminUser：仅管理员用户 IsAuthenticatedOrReadOnly：登录的用户可以读写API，未登录用户只读 DRF认证：Session认证 DRF认证：Token认证 默认的obtain_auth_token ...

DRF类视图介绍 在DRF框架中提供了众多的通用视图基类与扩展类，以简化视图的编写。 View：Django默认的视图基类，负责将视图连接到URL，HTTP请求方法的基本调度， 之前写类视图一般都用这个。 APIView：DRF提供的所有视图的基类，继承View并扩展，具备了身份认证、权限检查、 流量控制等功能。 GenericAPIView：对APIView更高层次的封装，例如增加分页、过滤器 GenericViewSet：继承GenericAPIView和ViewSet ViewSet：继承APIView，并结合router自动映射路由 ModelViewSet：继承GenericAPIView和五个扩展类，封装好各种请求，更加完善， 业务逻辑基本不用自己写了。 APIView类 APIView：DRF提供的所有视图的基类，继承View并扩展，具备了身份认证、权限检查、 流量控制等功能。 Request与Response DRF传入视图的request对象不再是Django默认的HttpRequest对象，而是基于 HttpRequest类扩展后的R ...

序列化与反序列化介绍 在日常开发中，会从别的API获取数据或者自己写API提供数据，数据格式一般都是采用 JSON格式。这期间就会涉及两个专业术语： 序列化：将python对象转json 反序列化：将json转为python对象 之前常用三种序列化方式 之前经常用json模式完成序列化与反序列化操作： 序列化应用场景示例：用ORM查询数据，采用JSON格式API返回数据。 反序列化应用场景示例：从别的API获取数据，在Python里处理。 import json # 序列化 computer = {"主机":5000,"显示器":1000,"鼠标":60,"键盘":150} json.dumps(computer) # 反序列化 json.loads(json_obj) Serializers是Django内置的一个序列化器，可直接将Python对象转为JSON格式，但不支 持反序列化。 from django.core import serializers ob ...

前后端分离开发模式 前后端分离前：前端页面看到的效果都是由后端控制，即后端渲染HTML页面，前端与后端的耦合度很高。 前后端分离前存在的问题： PC、APP、Pad等多端流行 前后端开发职责不清晰：各司其职，最大程度减少开发难度，方便协作 开发效率问题，一般后端开发需先等前端页面准备好，有时前端也一直配 合后端，能力受限 前后端代码混在一起，日积月累，维护成本增加 后端开发语言和模板耦合 前后端分离后：后端仅返回前端所需要的数据，不再渲染HTML页面，不再 控制前端的效果，至于前端展示什么效果，都由前端自己决定。 认识RestFulAPI 什么是RestfulAPI： REST（Representational State Transfer，表征状态转移）是一种Web服务的软件架构风格。 描述网络中客户端与服务端的一种交互方式，它本身不常用，常用的是如何设计RestfulAPI （REST风格的网络接口） RestfulAPI风格就是把所有的数据都当做资源，对表的操作就是对资源操作 资源就是指的URL，基于URL对资源操作，Web服务在URL上支 ...

jQuery介绍 jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如JS原生代码几十行 实现的功能，jQuery可能一两行就可以实现，因此得到前端程序猿广泛应用。 官方网站： https://jquery.com 发展至今，主要有三个大版本： 1.x：常用版本 2.x，3.x：除非特殊要求，一般用的少 基本使用 下载地址： https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件： <head> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><body><script type= ...