今天的学习笔记:初识Vue框架

一、Vue是什么?

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架

  • 构建用户界面:将数据动态转换为页面内容。
  • 渐进式:支持从简单到复杂的应用场景。小项目可用核心库轻量开发,大项目可结合插件(如路由、状态管理)逐层扩展,避免资源浪费。

二、Vue的三大核心特点

1. 组件化开发模式
  • 什么是组件化
    将页面拆分为独立的功能块(如 UserCard.vue),每个组件包含自己的 HTML、CSS 和 JavaScript 逻辑。
  • 优势
    • 高复用性:相同功能模块无需重复编写。
    • 易维护性:修改组件内部代码时,不影响其他部分。
    • 封装性:组件内部状态和样式隔离,避免全局污染。
<!-- 示例:一个用户信息组件 -->
<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>年龄:{{ age }}</p>
  </div>
</template>

2. 声明式编码
  • 命令式 vs 声明式

    • 命令式(原生JS):手动操作 DOM,流程繁琐。

      // 数据
      const persons = [
        { id: '001', name: '张三', age: 18 },
        { id: '002', name: '李四', age: 19 },
        // ...
      ];
      
      // 手动拼接 HTML 并更新 DOM
      let htmlStr = '';
      persons.forEach(p => {
        htmlStr += `<li>${p.id}-${p.name}-${p.age}</li>`;
      });
      document.getElementById('list').innerHTML = htmlStr;
      
    • 声明式(Vue):关注数据本身,无需直接操作 DOM。

      <ul id="list">
        <li v-for="p in persons" :key="p.id">
          {{ p.id }}-{{ p.name }}-{{ p.age }}
        </li>
      </ul>
      
  • 常用指令

    • v-for:列表渲染
    • v-bind(缩写 :):动态绑定属性
    • v-model:表单双向绑定
    • v-if / v-show:条件渲染

3. 虚拟DOM + Diff算法
  • 原生DOM更新的问题
    数据变化时,直接操作真实 DOM(如 innerHTML)会导致整个元素重新渲染,效率低下。

  • Vue的优化方案

    1. 虚拟DOM:用 JS 对象模拟真实 DOM 结构。
    2. Diff算法:对比新旧虚拟 DOM,仅更新差异部分,复用相同节点。

示例

  • 初始数据:张三、李四、王五
  • 新增数据:赵六
    • 原生JS:删除旧列表,重新渲染全部4条数据。
    • Vue:通过 Diff 发现前3条未变,仅插入新节点 赵六

三、学习Vue的前置知识

  1. ES6+ 语法:箭头函数、解构赋值、模板字符串等。
  2. ES6模块化import/export 管理代码依赖。
  3. 包管理器:npm 或 yarn。
  4. 原型与原型链:理解 JS 面向对象基础。
  5. 数组常用方法mapfilterreduce
  6. Promise 和异步编程:处理异步操作。
  7. axios:用于网络请求的库。

四、总结

Vue 通过组件化、声明式编码和虚拟 DOM 机制,显著提升了开发效率和性能。其渐进式特性使得开发者能灵活选择功能模块,适合各种规模的项目。接下来将深入探索 Vue 的基础语法和核心功能!


你对哪个部分最感兴趣?欢迎留言讨论! 🚀

posted @   谁来着?  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示