0帧起手《Vue零基础教程》，从前端框架到GIS开发系列课程

什么是Vue？

Vue是一个动态构建用户界面的 渐进式 JS框架!

• 构建用户界面: 将数据转换成界面(视图)

• 渐进式: 自底向上,慢慢改进

1. 1. 简单应用: 当成jQuery的代替品

   2. 中型应用: 应用组件化, 重构某个(某些)页面

   3. 大型应用: 使用全家桶开发

Vue的优点

Vue做为目前主流的三大前端框架,具有如下优点

• ·上手容易

• 平滑的学习曲线

• 友好的文档

• 活跃的社区

Vue框架集众家所长

• 借鉴了Angular的模板语法和数据绑定

• 借鉴了React的组件化和虚拟DOM

Vue的特点

1.声明式渲染

2.响应式数据

3.组件化开发

**优点：**渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开

**缺点：**单页面不利于seo，不支持IE8以下，首屏加载时间长

Vue快速上手

1、搭建开发环境

Vue环境分为两种

• 不使用构建工具

• 使用构建丁具

首先，我们会介绍 不使用构建工具 的环境,在组件化章节中介绍使用构建工具的方式

1) 初始化

使用如下指令初始化

npm init -y

发现在目录下会多一个文件package.json, 这个文件用来管理该项目使用了哪些包

2) 安装vue

执行如下命令安装vue

npm install vue

以上命令可以简写为

npm i vue

在项目目录会产生一个文件夹node_modules和一个文件package-lock.json

在package.json文件中, 会多如下内容

目前, Vue的默认最新版本是3.2

在node_modules里可以找到vue/dist

vue的各种版本说明

vue.global.js是完整版(在初学阶段使用)

• esm(ES Module): 使用ES的模块规范导入导出export default

• runtime: 运行时版本, 相对于编译版本, 体积更小, 效率更高

3) 小结

💡 使用Npm安装Vue分为两步

1. 项目初始化: npm init -y

2. 安装vue: npm install vue

2起步案例

做为第一个案例, 主要给大家介绍vue的最基本使用.

vue使用的3步曲(重点)

1. 引入vue.js

2. 编写页面(视图)

3. 创建App实例并挂载

1) 引入vue.js

在html的头部, 通过<script src>引入vue.global.js

<!-- 1. 引入vue.js --><script src="../node_modules/vue/dist/vue.global.js"></script>

2) 编写页面(视图)

在body中, 编写一个div元素, id为app, 所有视图部分将在这部分渲染

示例

<!-- 2. 编写页面 --><div id="app">hello</div>

3) 创建App实例并挂载​​​​​​​

<script>  // 1. 从Vue中解构相应的API  const { createApp } = Vue
  // 2. 创建App, 传入一个对象, 返回一个应用实例  const app = createApp({})  // 3. 挂载  app.mount('#app')</script>

1. Vue是我们从vue.global.js中导入的对象, 从对象中解构出需要的API函数

2. createApp 传入一个对象, 返回应用实例

3. app.mount挂载到HTML对应的位置

4) 声明式渲染

声明式渲染

跟变量, 函数类似, 需要使用什么就先声明一下.

使用流程

Vue被称为声明式渲染, 使用步骤

1. 声明状态(变量)

2. 使用状态(变量)

声明状态

示例​​​​​​​

const app = createApp({  data() {    return {      msg: 'hello',    }  },})

data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态

这里大家先当做固定写法, 后面会详细分析

使用状态

示例​​​​​​​

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

• 通过{``{}}(插值表达式)使用在data中定义的状态

5) 响应式数据

什么是响应式数据

当状态值发生变化时, Vue会自动响应变化, 使用新的数据重新渲染视图

安装调试工具

借助调试工具, 演示响应式数据

6) 小结

💡 Vue的两个特点

1. 声明式渲染: 先声明后使用

2. 响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值

完整版视频教程