01 Vue 入门介绍

154次阅读
没有评论

共计 3171 个字符,预计需要花费 8 分钟才能阅读完成。

引入

在 Vue 入门介绍之前, 先简单了解一下前端现状

1. 前端发展

  • HTML(5)、CSS(3)、JavaScript(ES5、ES6):

前端调好页面 ---> 给后端(PHP、Python、Go、Java 等) ---> 后端嵌入模板语法 ---> 后端渲染完数据 ---> 返回数据给前端 ---> 在浏览器中查看

  • Ajax 的出现

js 跟后端交互,js 从后端请求数据,js 的 dom 操作渲染页面,前后端分离的雏形

出现了“前端工程化”的概念(前端也是 1 个工程、1 个项目)

当下最火的 2 个前端框架(中国人中小型项目用 Vue 多,老外用 React)

  • 大前端的概念

移动开发(Android+IOS)+ Web(Web+ 微信小程序 + 支付宝小程序)+ 桌面开发(Windows 桌面)

  • 谷歌 Flutter

一套代码在各个平台运行(大前端 ): 谷歌 Flutter(基于 Dart 语言 (也是谷歌出的):和 Java 很像) 可以运行在 IOS、Android、PC 端

使用 vue 写的, 一套编码 编到 10 个平台, (一般初创型公司使用, 不用招很多人)

  • 在不久的将来,大前端可能会一统天下

一.Vue 介绍

1.Vue.js 框架的发展历程

👉尤雨溪对 Vue 的介绍

👉Vue.js 框架的发展历程

  • 为什么叫 Vue

尤雨溪表示:

其实我在最开始想的名字是 seed.js,但在 NPM 上已经被注册了,所以就想这个是一个 视图的库 ,但是直接叫他的英文“view”有点太直接了,于是我把“view”这个单词放进谷歌翻译中,然后发现他的 法语 翻译只有三个字母,这看起来很棒,并且没有被注册,所以就在 2013 年 6 月在 NPM 进行了注册

2.vue 介绍

  • (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 渐进式框架
  • 与其它大型框架不同的是,Vue 被设计为可以 ` 自底向上逐层应用
  • Vue 的核心库 只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

3. 渐进式框架

  • 可以一点一点地使用它,只用一部分,也可以整个工程都使用它, 放入多少就使用多少

4. 网址

5.Vue 特点

  • 易用:通过 HTML、CSS、JavaScript 构建应用

  • 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩

  • 高效:20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化

二.Vue.js 的 M-V-VM 思想

1.MVVM 介绍

MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种 事件驱动编程方式

  • Model:vue 对象的 data 属性里面的 数据,这里的数据要显示到页面中
  • View:vue 中数据要显示的 HTML 页面,在 vue 中,也称之为“视图模板”(HTML+CSS)
  • ViewModel:vue 中编写代码时的 vm 对象,它是 vue.js 的核心,负责连接 View 和 Model 数据的 中转 ,保证视图和数据的一致性,所以前面代码中,data 里面的数据被显示中 p 标签中就是 vm 对象自动完成的( 双向数据绑定:JS 中变量变了,HTML 中数据也跟着改变)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入 vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<!-- view : 视图模板, 展示数据 -->
<div id="app">
    {{msg}}
</div>

</body>
<script>
    // vm : view-model, 负责时刻保证视图模板中的数据和 data 里面的数据一致
    var vm = new Vue({
        el:'#app',
        data:{  // data : Model, 模型里的所有数据, 是 vm 对象的属性
            'msg':'Hello word!'
        }
    })
</script>
</html>

2.MVVM 的特性

  • 低耦合 视图 (View)可以 独立于 Model 变化和修改,1 个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变
  • 可复用 :可以把一些视图逻辑放在 1 个 ViewModel 中,让很多 View 重用这端视图的逻辑(以此减少代码冗余)
  • 独立开发 开发 人员可以专注于 业务逻辑 数据的开发 (ViewModel), 设计 人员可以专注于 页面设计
  • 可测试 :界面元素是比较难以测试的,而现在的测试可以 针对 ViewModel来编写

3.MVVM 的逻辑

01 Vue 入门介绍

三. 组件开发 & 单页面开发

1. 组件化开发

类似于 DTL(Django Template Language) 中的 inclusion_tag, 每一个组件的内容都可以被 替换 复用

01 Vue 入门介绍

2. 单页面开发

  • 只需要 1 个页面,结合组件化开发来替换页面中的内容

  • 页面的切换只是组件的替换,页面还是只有一个index.html

四.vue.js 的快速入门使用

1. 版本选择

  • 1.X:使用得较少

  • 2.X:普遍使用 (我们学习就使用这个)

  • 3.X:刚出没多久,只有 Beta 版

2.vue.js 与 jQuery 的定位

  • jQuery 的定位是获取元素和完成特效
  • vue 的定位是方便操作和控制数据和完成特效

3.vue.js 的下载

ps : 在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

4.vue.js 的引入方式

  • 本地引入 : 下载好 vue.js 直接在 script 标签内链接本地路径
<script src="js/vue.js"></script>
  • CDN 引入 : 可以引入最新版本, 也可以指定版本号
# 引入最新版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

# 指定版本号
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

5. 使用 vue 展示 "Hello word!"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入 vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>

<div id="app">
    {{msg}}
</div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{'msg':'Hello word!'}
    })
</script>
</html>

01 Vue 入门介绍

6. 验证数据的双向绑定

vm.$data.msg='年后'
vm._data.msg='年后'
vm.msg='年后'

01 Vue 入门介绍

五.nodejs 介绍

1.js 语言

  • javascript : 它是一门解释型语言,只能运行在浏览器中,浏览器里有它的解释器

  • 所以在浏览器的 Console 中输入命令,就和在 cmd 中输入 python 后,进入交互式环境一样

2.nodejs 语言

  • 它是一们后端语言
  • node 是一个解释器, 将谷歌的 V8 引擎抠出来, 运行在操作系统之上, c 写了一些底层包
  • 可以用来写 javascript 代码
  • node 相当于 Python
  • npm 模块管理工具, 相当于 pip

有些前端工程师,不用学后端语言,只会 js,就可以写后端了

正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计3171字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)