钩子函数

Vue项目结构介绍 build 文件夹：用于存放 webpack 相关配置和脚本。 config 文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启gzip压缩等。 dist 文件夹：默认命令打包生成的静态资源文件。 node_modules：存放 npm 命令下载的开发环境和生产环境的依赖包。 src: 存放项目源码及需要引用的资源文件。 src下assets：存放项目中需要用到的资源文件，css、js、images 等。 src下componets：存放 vue 开发中一些公共组件。 src下emit：自己配置的 vue 集中式事件管理机制。 src下router：vue-router vue 路由的配置文件。 src下service：自己配置的 vue 请求后台接口方法。 src下page：存在 vue页面组件的文件夹。 src下util：存放 vue开发过程中一些公共的 js 方法。 src下vuex：存放 vuex 为vue专门开发的状态管理器。 src下app.vue：整个工程的 vue 根组件。 src下main.js：工程的入口文件。 index.html：设置项目的一些meta头信息和提供html元素节点，用于挂载 vue。 package.json：对项目的描述以及对项目部署和启动、打包的 npm 命令管理。 Vue 常用指令 v-model

DRF的序列化组件 首先我们要知道序列化是干嘛的,在此之前我们应该知道json格式的数据,一般在前后端交互或者是跨平台交互的时候,会默认使用Json格式拉进行数据的传输,所以当我们把普通的数据转换成json格式的时候就会使用序列化组件,将其序列化成json格式,然后前端接收到json格式之后,再反序列化把json格式数据转换成普通格式的数据,再进行逻辑运算,判断以及渲染页面等. 而DRF的序列化组件,所完成的功能也是如此,负责将对象数据序列化前台所需要的数据,或者反序列化前台的数据,进行校验,来确保数据的安全. 下面我们就介绍三种DRF中最常用的序列化组件,Serializer,ModelSerializer,以及ListModelSerializer. Serializer组件 在使用Serializer组件之前,我们要先生成一个序列化器,在我们django的项目名(这里我们定义项目名为api)下面新建一个serializer.py文件,在里面继承serializers,生成序列器,供我们在视图函数里面调用: #/api/models.py from django.db import models class User(models.Model): CHOICES_SEX = ((0, '男'), (1, '女')) name = models.CharField(max

下图展示了实例的生命周期，官网提供，但需要理解。 先说下生命周期的几个钩子，说白了就是初始化vue的过程中，每完成一些事情就会调用一下对应的钩子函数让用户做自己想做的事情，钩子函数主要有 以上表格为vue生命周期的主要钩子函数；每个钩子前后到底做了哪些事情？及我们可以在对应钩子中做啥？一直是我的疑问。下面就一个一个分析 1. beforeCreate钩子之前 initLifecycle(vm) // 初始化vm实例中与生命周期相关的一些属性。 详情可参考： https://www.imooc.com/article/29256?block_id=tuijian_wz initEvents(vm) // 初始化事件 详情可参考： https://www.imooc.com/article/30254 2. beforeCreate与created之间做的事情 来源： https://www.cnblogs.com/caoyi/p/10965749.html

1 <div id="app"> 2 {{msg}} 3 </div> 4 <script type="text/javascript"> 5 var vm = new Vue({ 6 el 　　　　　 : '#app', 7 data 　　　 : { msg : 'hi vue' }, 8 beforeCreate : function(){ console.log('beforeCreate'); }, 9 created : function(){ console.log('created'); }, 10 beforeMount : function(){ console.log('beforeMount'); }, 11 mounted : function(){ console.log('mounted'); }, 12 beforeUpdate : function(){ console.log('beforeUpdate'); }, 13 updated : function(){ console.log('updated'); } 14 }); 15 </script> 16 <!-- 17 (1)beforeCreate 18 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 19 (2

一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大。都是一种设计思想。主要就是 mvc中 Controller演变成 mvvm中的 viewModel。 mvvm主要解决了 mvc中大量的 DOM

context_processor： 使用这个钩子函数，必须返回一个字典，这个字典的值在所有模板中都可以使用，这个钩子函数作用是，如果一些在很多模板中都要用到的变量，那么就可以使用此钩子函数来返回，而不用在每个视图函数中的render_template()中去写，这样代码更加简洁和好维护，此函数必须返回数据，且只能字典即使是空的字典 访问 来源： https://www.cnblogs.com/zhongyehai/p/11874381.html

在flask中钩子函数是使用特定的装饰器装饰的函数，用于在正常执行的代码中，插入一段自己想要执行的代码（hook） before_first_request： flask项目第一次部署后指向的钩子函数，类似于unittest的setupClass before_request： 请求到达flask，但是还没有进入到具体的视图函数之前调用，一般用于在调用视图函数之前，准备或处理一些后面可能会用到的数据，类似于unittest的setup 来源： https://www.cnblogs.com/zhongyehai/p/11874219.html

壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive，组件component，并专门花了一篇文章介绍directive与component的不同，其中提到在component的声明周期中需要配合钩子函数来实现组件部分功能，例如在bindings传值过程中，你得通过$onInit方法来初始化数据，那么我们就来好好聊聊component中常用的几个钩子函数，本文开始。 贰 ❀ $onInit 在介绍component的文章中已经有涉及$onInit方法的说明，$onInit用于在component的controller中做数据初始化的操作。 常理上来说，即便我们不通过$onInit为组件绑定数据也是没问题的，看个简单的例子： <div ng-controller="myCtrl"> <echo></echo> </div> angular.module('myApp', []) .controller('myCtrl', function ($scope) {}) .component('echo', { template: '<div>{{vm.name}}</div><button ng-click="vm.sayName()">点我</button>', controllerAs: 'vm', controller: function () {

目录 vue框架学习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue-main.js vue-index.html vue-App.vue vue-views vue-components vue-router-index.js vue生命周期钩子 vue框架学习 Vue项目环境搭建 创建Vue项目之前必须搭建好Vue的环境，就像python一样，需要安装相应版本的解释器，安装解释器又需要安装pycharm解释器，所以，Vue也一样。 首先，先下载并安装好node环境，node就是用c++编写的用来运行js代码的，类似于pycharm 其次，安装好node后，就有了npm，npm就类似于python的pip，相当于应用商城，我们想要的Vue就在npm中。 有了npm就能安装vue环境了，由于默认的镜像源比较慢，所以换一下国内的镜像源： npm install -g cnpm --registry=https://registry.npm.taobao.org 换源之后，就有了新的cnpm了，然后就可以安装vue项目脚手架： cnpm install -g @vue/cli 如果安装失败了，可以清空npm缓存，在重复执行失败的步骤： npm cache clean --force Vue项目创建 进入存放项目的目录： cd ..

　每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。 　首先贴一张Vue文档给出的生命周期图示，并添加了一些注释： Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表 生命周期钩子函数 调用时间 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。