Vue2到3 全套学习内容(持续更新)

Vue 初次上手

1. Vue 概念

概念: Vue 是一个用于构建用户界面渐进式 框架

**①构建用户界面:**基于数据动态渲染出用户看到的页面

**②渐进式:**循序渐进

Vue的两种使用方式:

①Vue 核心包开发

·场景:局部 模块改造

②Vue核心包&Vue插件工程化开发

·场景: 整站开发

**③框架:**一套完整的项目解决方案

  • 优点:大大提升开发效率(提升70%)
  • 缺点: 需要理解记忆规则--->官网
  • 框架与库的对比:
  • 库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等
  • 框架,是一套完整的解决方案,实现了大部分功能,我们只需要按照一定的规则去编码即可。

2.创建 Vue 实例,初始化渲染

例如:

构建用户界面步骤:创建Vue实例初始化渲染

  1. 准备容器 div
  2. 引包(官网) - 开发版本 /生产版本
  3. 创建Vue 实例 new Vue()
  4. 指定配置项--->渲染数据
    1. el 指定挂载点(通过 el 配置选择器,选择器 指定 Vue 管理的是哪个盒子)
    2. data 提供页面渲染的数据

3.插值表达式

插值表达式是一种 Vue的模板语法

**1.作用:**利用表达式进行插值,渲染到页面中

表达式: 是可以被求值的代码,JS引擎会将其计算出一个结果

html 复制代码
money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法:{{ 表达式 }}

html 复制代码
<h3>{{ title }}</h3>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ age >= 18 ? '成年' : '未成年' }}</p>
<p>{{ obj.name }}</p>

⭕注意:

复制代码
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式,而非语句,比如:if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.响应式特性

1.概念:

响应式: 数据变化,视图自动更新

如何访问 or 修改?

data中的数据,最终会被添加到实例上

  • 访问数据: "实例属性名
  • 修改数据: "实例.属性名"="值

聚焦于数据 --->数据驱动视图

使用 Vue 开发,关注业务的核心逻辑 ,根据业务修改数据即可


5.安装 Vue 开发者工具: 装插件调试 Vue 应用

  1. 通过谷歌应用商店安装(国外网站)
  2. 极简插件下载(推荐) 极简插件_Chrome扩展插件商店_优质crx应用下载
相关推荐
Zsnoin能7 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房7 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃8 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂11 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7711 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑41 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端