vuejs 简介
- Vue.js (vuejs.org)
- 渐进式 JavaScript 框架
- vuejs 是基于MVVM 思想的框架
- vuejs 是以数据驱动为主的框架
- vuejs 是以组件化进行开发的框架
- vuejs 是国人尤雨溪(尤大大,尤小石)进行开发的。
什么是渐进式?(vuejs)破坏性小,上手简单
渐进式是相对于另外一种开发思想(侵入式)来说。
渐进式指的是在使用该产品做开发的时候,不需要完全的去重构之前的代码结构,可以非常方便将该产品集成到自身的项目中。
什么是侵入式?(react)脚手架(命令行)封装性明显
侵入式指的是如果要使用这种产品去维护之前的老项目的话,没办法直接引入使用,必须要破坏老项目的结构。
意思就是以前的老项目必须要进行重构,没办法直接使用这种侵入的产品。
什么是 MVVM 开发思想?
MVVM 开发思想是前端近几年借鉴后端的 MVC 的开发思想引进的。
-
M 是 Model 的简写,负责数据,在前端其表现形式就是一个js对象,一般称之为模型变量(数据)
-
V 是 View 的简写,负责数据的展示和收集,在前端的表现形式就是一个 DOM 区域。
-
VM 是 ViewModel 的简写,负责业务逻辑,在前端的表现形式就是当前的产品本身的一个实例对象,它以数据驱动作为指导思想,通过双向数据绑定进行数据的操作。
什么是 MVC 思想?
- M Model的简写,翻译 模型,负责对数据的操作
- V View的简写,翻译 视图(模板),负责页面的展示和数据的收集
- C Controller的简写 翻译 控制器,负责业务逻辑代码
之前做后端的某个功能开发的时候,第一步定义路由(url-----》控制器的方法----》是否调用模型----》是否调用视图----》模板引擎–》响应(HTML页面(前后端不分离 ssr)、json格式(前后端分离 bsr)))
一般把 MVC 这种开发思想也称之为 分层思想。主要是为了便于后期的维护和新功能的扩展。(分而治之)
什么是数据驱动?
数据驱动是相较于传统 web 开发里面的 dom 操作来说的,以前的web开发某个功能的时候,我们都是先进行dom选取,然后在进行业务代码,最后做dom更新。但是其实对开发本身来说,我们不应该关系dom操作,我们只需要去关心我们数据的流向,现在的一些新的框架基于数据流向进行实现,对于开发来说,无须关心底层的dom实现,我们只需要提供数据,框架本身会给我们进行dom操作。这种思想就是数据驱动思想。这种开发思想在目前的各类前端框架,乃至小程序产品里面都有体现。
什么是组件化开发思想?
组件化指的是在开发过程中,把一些可以复用的代码高度的抽象、提取出来,封装成一个一个的代码块,然后在其他的地方进行复用。这种思想叫做组件化。有点类似于乐高积木。并且基于该思想衍生出来非常多的前端的组件化ui库(vantui elementUI mintUI antd iview uview…)
vuejs 入门使用
vuejs 是一个js库,也可以叫做一个框架。
vuejs 目前来说出现过3个版本
- vuejs 1.x 过时(不使用)
- vuejs 2.x 大规模使用中(√)
- vuejs 3.x 新秀 (2020 9 正式发布)
- 底层架构使用 Proxy api改写
- 组合api
- 函数式编程
安装
下载vue.js包
npm
npm install vue
CND
最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
稳定版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
使用
入门使用
main.js
只要运行vue项目,main.js就会执行
index.html
> mian.js
>App.vue
html
<! --1引入vuejs框架-->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
// 需要编译器
const vm = new Vue({
el: '#app',// eL是eLement的简写,属性值是一个选择器,选择vuejs,管理的dom区域
/*data 代表是我们开发中的业务数据*/
data: {
title: 'hi vuejs!'
}
})
</script>
<!--2.需要在html区域定义一个 vuejs管理的dom区域,在该区域内我们可以使用vuejs语法-->
<div id="app">
<! --这个区域会交给vuejs管理插值表达式指令-->
< ! --4.使用的vues语法-->
<!--双大括号一般我们称之为插值表达式”语法,里面可以写vue构造函数 data对象属性里面的哪些属性信息--><h1>{
{title}}</h1>
</ div>
插值表达式
<div id="app">
<!--这个区域会交给vuejs管理 插值表达式 指令-->
<!--4. 使用的 vuejs语法-->
<!--双大括号一般我们称之为 插值表达式 语法,里面可以写Vue构造函数 data对象属性里面的哪些属性信息-->
<!-- 插值表达式里面到底可以写什么?-->
<h1>{
{ title }}</h1>
<hr>
<h2>1. data对象里面的属性</h2>
<p>{
{ version }}</p>
<hr>
<h2>2. 四则运算 </h2>
<p>{
{ (1 + 1) + 3 * 4 - 4 }}</p>
<p>{
{ 10 - 1 }}</p>
<p>{
{ 2 * 3 }}</p>
<p>{
{ 20 / 4 }}</p>
<p>{
{ 20 % 3 }}</p>
<hr>
<h2>3. 比较运算</h2>
<p>{
{ 10 > 9 }}</p>
<p>{
{ 3 >= 9 }}</p>
<hr>
<h2>4. 逻辑运算</h2>
<p>{
{ true && true }}</p>
<p>{
{ true && false }}</p>
<p>{
{ true || false }}</p>
<p>{
{ !false }}</p>