前端之——vue day01 入门

DRF重点

  • 序列化类
  • 视图组件
  • 路由写法
  • 三大认证
  • jwt

一、前端发展历史

1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

​ 到现在为止也只有这三个可以写前端，任何新出的乱七八糟的都是为了编译成这三个

2.Ajax的出现 -> 后台发送异步请求，Render+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端

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

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

# 知乎上的完整的发展史

https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

二、Vue介绍

​ 现在已经在推行3版本，不过还是2市面上主流一些，部分公司即使是开新项目也可能用2，3完全兼容2

渐进式JS的框架：

​ 既可以在一个小区域用也可以建立一个项目

​ Vue的核心库只关注视图层，便于与第三方库或既有项目整合

官网：
https://cn.vuejs.org/
文档：
https://cn.vuejs.org/guide/quick-start.html

互绑定架构

​ VM层监听数据变化，viewmodel

​ 双向数据绑定，vue写出来的页面，如果后台变量发生变化，前端页面关联变化，反之同理

组件化开发

​ 都是组件，甚至一个页面也是组件，拼拼拼就拼出页面了，类似我们学过的模板继承

​ 单页面开发，页面

三、Vue写一个hello world

编辑器选择

​ jetb公司的webstorm

​ 微软公司的vscode（免费）

​ pycharm + Vue 插件（也可以的）

使用

类似JQ的使用，选择自己下到本地或者CDN导入
# 下到本地
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
    给这个页面的所有源代码复制到pycharm下新建一个js文件夹内的一个js文件中即可

建立一个页面
引一下Vue的 src
    <script src="js/vue.js"></script>
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="myvue">

</div>

<script>
    var vm=new Vue({
        el:'#myvue',  // 这样就是该标签被vue锁定，里面可以写vue的内容了
        date:{
            // 写变量
            name:'jack',
            age:20,
            city:'changsha'
        }

    })
</script>
</body>
</html>

四、插值语法

<body>
<div id="myvue">

        <p>{{name}}</p>

</div>

<script>
    var vm=new Vue({
        el:'#myvue',  // 这样就是该标签被vue锁定，里面可以写vue的内容了
        data:{
            // 写变量
            name:'jack',
            age:20,
            city:'changsha'
        }

    })
</script>

posted @ 2023-02-13 21:48  yiwufish  阅读(90)  评论(0)    收藏  举报