Day087--Vue, django回顾

Vue

vue介绍

vue的基础语法

模板语言

	{{ 变量 }}

指令系统

	v-on(简写：@)

	v-bind(简写：:)

	v-if

	v-for

	v-show

	v-text

	v-html

	v-model

Vue的生命周期

beforeCreate   --> 数据属性只声明没赋值

created             --> 数据属性赋值（发送ajax请求到后端拿数据）

beforeMount   --> 页面上还是{{ 变量 }}

mounted          --> 页面上完成数据渲染 （给页面监听事件）

beforeUpdate  --> 数据变更之前  页面上DOM还没重新渲染

updated            --> 数据变更之后页面已经重新渲染

beforeDestroy  --> 实例销毁之前

destroyed          --> 实例销毁之后（清除页面上设定那些定时器）

Vue组件

一个组件就是一个独立的 HTML + CSS + JS

全局组件和局部组件

组件通信

	父组件 --> 子组件传值

		在子组件中通过props声明需要传递的参数有哪些

		在父组件中通过v-bind给子组件传值

	子组件 --> 父组件传值

		在子组件中用过$emit(自定义事件)向外抛出自定义事件

		在父组件中用v-on:自定义事件 监听子组件，并且接收传值

	组件1 --> 组件2传值

		借助一个空Vue对象

		let bus = new Vue()

		组件1中：听过bus.$emit(事件,值)向外传递数据

		组件2中：mounted(){bus.$on(事件,(值)=>{...})}

	父组件监听子组件原生的事件--native修饰符

	<my-button v-on:click.native='aaa'/>

	slot插槽

	同样的组件不同的形态使用slot/具名slot插槽

Vue Router（路由）

	基本使用

import Router from 'vue-router'

let router = new Router({
    routes: [
    {
      path: '/',  // 匹配URL路径的
      name: 'index',  // 路由别名
      redirect: {name: 'home'}  // 重定向
    },
    {
      path: '/home',
      name: 'home',
      component: Home  // 路由组件
    },
    {
      path: '/course',
      name: 'course',
      component: Course
    }
  ]
})



<!-- 路由的入口-->
<router-link :to="{name:'home'}">首页</router-link>

<!-- 路由的出口-->
<router-view></router-view>

两个对象	

	this.$router 路由对象

	this.$route 当前的路由信息对象

路由动态匹配

	params   --> /user/:id

		this.$route.params.id

	query   --> /user?id=1

		this.$route.query.id

嵌套路由

let router = new Router({
    routes: [
    {
      path: '/user/',  // 匹配URL路径的
      name: 'user',  // 路由别名
      children: [
            {path: 'info', name: 'user-info', component: UserInfo},  // 匹配 /users/info
            {path: 'posts', name: 'user-posts', component: UserPosts},  // 匹配 /user/posts
        ]
    },
        ...
    ]
 })

编程式导航（代码模式）和声明式导航（a标签模式）

<template>
  <div class="about">
    <button @click="goHome">点我返回主页</button>
  </div>
</template>

<script>
    export default {
        name: 'About',
        methods: {
            goHome(){
                // 通过代码跳转到 home
                this.$router.push({name: 'home'})
            }
        }
    }
</script>

前端开发工具系列

Node.js  --> 后端版JS

	后端开发都是模块化

	不想重复造轮子，互相依赖的问题 --> 需要包管理工具 ↓

npm

	js世界的包管理工具

	npm init    --> 初始化项目 生成一个package.json文件，保存当前项目的信息和依赖包的信息 

	npm install 包名@3.3.7 --save  安装项目要用到的包，并且把依赖信息写入到package.json中

	npm install 包名 -g 全局安装，安装工具类的包（Vue-CLI、webpack等）

	npm install 包名 -D 安装开发时候用的工具（代码检测工具ESlint等）

	npm install 拿到新的项目，进入项目目录，运行该命令会自动安装项目依赖



	npm uninstall 包名

	npm连接的是国外的库，会出现网络超时。推荐使用cnpm  （淘宝团队维护的一个国内镜像库）

在后端开发的代码方便是方便了，但是你后端开发的代码前端不认识。

用webpack把后端开发的代码打包成浏览器可以识别和运行的代码 ↓

webpack4

安装

npm install webpack webpack-cli -g

webpack xx.js

Vue-CLI3

	Vue官方出品的快速搭建Vue项目的脚手架工具

	命令行创建：

	vue create 项目名

	。。。

	图形化界面创建：

	vue ui

	项目的目录结构

	跑起来 npm run serve

	打包 npm run build

Django

安装

新手必会三件套

ORM 重点

	单独的文件加载Django环境

	必知必会13条

	常用字段和方法

	单表查询、跨表查询（外键、多对多（3种））

	分组和聚合

	事务操作、行级锁

	F和Q

模板语法

路由

视图

	FBV

	CBV  重要     ---> 面向对象 类的继承和多继承

Cookie和Session

中间件 重要

三个要点：执行顺序和时间点、参数、返回值

process_request

process_view

process_exception

process_tempalte_response

process_response

AJAX

Django中配置ajax请求的CSRFtoken

form组件、ModelForm、FormSet和ModelFormSet

Form  重要

局部钩子和全局钩子  --> 看过Django的源码

ModelForm 重要 form 与Model 结合

formset/ModelformSet

{{ formsetobj.management_form }}  --> 告诉后端提交了多少条数据

每一行加id