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

什么是Vue?

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

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

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

    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. 响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值

完整版视频教程

相关推荐
慧一居士21 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead23 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app