首页 > 其他分享 >前端发展史 vue介绍 vue的快速使用

前端发展史 vue介绍 vue的快速使用

时间:2023-02-14 20:12:11浏览次数:58  
标签:发展史 前端 Vue js --- vue 页面

上节回顾

# 1 jwt 源码分析
    -签发:
    	登录----》ObtainJSONWebToken--->post--->serializer.is_valid()--->走了校验---》正常登录逻辑可以拿到序列化类的validate中写---》authenticate(username=xx,password=xx)--->通过user获得payload----》通过payload---》token---》返回给前端
    -认证:
    	认证类---》BaseJSONWebTokenAuthentication(父类)---》authenticate
        
        
        
# 2 自定义表
    -签发:登录接口
    -认证:认证类
    
    
# 3 权限:acl  rbac
    -访问控制列表
    -基于角色的访问控制
    
# 4 django的auth+admin

# 5 simplieui
  • drf回顾

  • 前端发展史

  • vue介绍

  • vue快速使用之helloworld

  • 引入方式

1 drf回顾

# 1 drf 入门规范
    -前后端分离模式
    -前后端混合
    -postman
    -restful规范
    -drf:django的app
# 2 序列化类(重点)
    -Serializer
    	-字段类
        -字段参数
        -局部钩子
        -全局钩子
        -定制返回格式
            -1 序列化类中写:SerializerMethtoField
            -2 在表模型中写
        -many=True    
    -ModelSerializer:create,update
        -class Meta:
            -model
            -fields
            -extra_kwargs
            
       	-重写字段  
    -反序列化校验源码----》forms
    
# 3 请求和相应
	-请求类源码:新的request
    -请求能解析的编码格式
    -相应对象源码:data,headers,status
    -响应格式
    
    
# 4 视图组件(重要)
    -两个试图基类
    -5个视图扩展类
    -9 视图类
    -视图集
# 5 路由写法
	-ViewSetMixin
    -映射写法
    -自动生成写法
    -action装饰器
    
# 6 认证频率权限(重点)
# 7 过滤,排序分页
    -过滤:内置,第三方,自定义
    -排序:内置
    -分页:三个分页类
    
# 8 全局异常

# 9 接口文档
	
# 10 jwt(重点)
    -base64
    -jwt原理
    -django中快速使用
    -自定义签发认证
    
    
# 11 rbac权限控制
# 12 simpleui使用

2 前端发展历史

# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
	-ECMAScript 6 ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准
    -ES13--->标准
    -js=ecma+bom+dom
    -sass,typescript。。。
# 2 Ajax(异步JavaScript和XML)的出现 -> 后台发送异步请求,Render+Ajax混合
    -$.ajax
    -XMLHttpRequest  原生ajax

# 3 单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形

# 4 Angular框架的出现(1个JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)

# 5 React、Vue框架:当下最火的2个前端框架(Vue:国人喜欢用,React:外国人喜欢用)

# 6 移动开发(Android+IOS) + Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面):前端 -> 大前端

# 7 一套代码在各个平台运行(大前端):谷歌Flutter(Dart语言:和Java很像)可以运行在IOS、Android、PC端
	-前端用flutter后端用python写好不好

# 8 在Vue框架的基础性上 uni-app:一套编码 编到10个平台

# 9 在不久的将来 ,前端框架可能会一统天下

3 vue介绍

# Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
# Vue  js的框架
 
# M-V-VM 架构思想               MVC    MTV   MVVC   MVP移动端架构
    -M:Model 数据层   js的数据
    -V:View  视图层   html,css
    -VM:ViewModel vue做出来的介于M和V之间的一层,以后不需要手动进行dom操作了
	----作用:以后页面变,js变量就变,js变量变,页面就变
    
    
    
 # 组件化开发、单页面开发
    -组件化开发,以后都是写出一个个组件,组件的组合成页面
    -单页面开发(单页面应用):spa:single-page application,一个HTML页面
    
    
    
 # 版本
    1.X:使用得较少
    2.X:普遍使用(蛮多)
    3.X:出了很久了,公司里新项目会选择
        -语法有差距,但是vue3完全兼容vue2
        -你可以在vue3上写vue2,但是官方不建议了
    
    
    
# 先基于vue2讲

4 vue快速使用之helloworld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="js/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>

    </div>
</body>

<script>
    // 传达的意思就是 页面中id为d1的div标签就被vue托管了

    // 配置项 key:value vm就是一个变量
    var vm = new Vue({
        el:'#app',  // el固定格式 传你管理的那个标签 以后在这个标签里就可以写vue的语法了 在div里就可以使用vue的指令 语法
        data:{  //添加数据
            name: 'hello world',
            age: 18
        }
    })

</script>
</html>

引入方式

1.CDN的方式引入:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.下载后导入
<script src="js/vue.js"></script>

image-20230214184120913

HTMl中简单使用:

image-20230214195254405

pycharm配置中安装vue插件,这样在敲写代码的时候才支持提示

image-20230214195445346

标签:发展史,前端,Vue,js,---,vue,页面
From: https://www.cnblogs.com/super-xz/p/17120749.html

相关文章

  • Vue中使用this.$router.resolve打开新页面
    方法一:resolve会返回一个跳转路由对象if(id&&orgCode){lettext=this.$router.resolve({path:path,query:{......
  • vue简介及基础语法
    vue简介及基础语法前端编程从最初的html、css、js散件编写页面,到后来ajax异步请求的出现,在不断发展,在Angular框架出现之后,出现了前端工程化的概念,而现在时下最主流的框架......
  • vuex页面刷新数据丢失
    一:数据丢失的原因vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时......
  • Vue实现字符串换行
    今天在做的时候需要用到字符串换行,在网上找了一下,换行是通过添加white-space:pre-wrap属性,通过\n进行换行在这里记录一下<stylelang="scss"scoped>::v-deep.el-tab......
  • vue2--day2
    昨日回顾#1put,post提交的json格式必须是标准json字符串格式#2字符串中不小心加了空格#4认证类,当前登录用户可以不去数据库查出来#5斜杠问题(中间件:django.mi......
  • vue
    今日内容1.插值语法2.文本指令3.属性指令4.事件指令5.class和style6.条件渲染7.列表渲染1.插值语法插值语法中可以放:变量,对象取值,数组取值,简单的js语法,函数()......
  • vue
    昨日回顾#1put,post提交的json格式必须是标准json字符串格式#2字符串中不小心加了空格#4认证类,当前登录用户可以不去数据库查出来#5斜杠问题(中间件:django.mi......
  • Vue 02
    Vue1.插值语法插值语法中可以放:变量,对象取值,数组取值简单的js语法函数(function())插值语法不能写在标签的属性中,只能写在标签的内部<htmllang="en"><head>......
  • vue02
    今日内容概要插值语法文本指令属性指令事件指令class和style条件渲染列表渲染今日内容详细插值语法vue的mvvm架构演示<!DOCTYPEhtml><htmllang="en"><he......
  • 通过Vue解决跨域问题(proxy配置代理)【转载】
    当我们在用本机去找服务器要数据时会产生跨域问题,所以利用vue-cli去开启一个代理服务器。方法一:在vue.config.js中添加如下配置//开启代理服务器(方式一)devServer......