前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)

简介: 这篇文章是关于Vue框架的学习指南,涵盖了前端知识体系、MVVM模式、创建第一个Vue程序以及Vue实例的生命周期等基础知识。

文章目录

  • 1、学习目标
  • 2、前端知识体系
    • 2.1 前端三要素
    • 2.2、MVVM
  • 3、第一个Vue程序
  • 4、Vue实例的生命周期

vue的官方文档:https://cn.vuejs.org/

1、学习目标

在这里插入图片描述

2、前端知识体系

2.1 前端三要素

HTML(结构):决定网页结构和内容

  • CSS(表现):设定网页的表现样式
  • JavaScript(行为):控制网页行为。(浏览器解释执行)

2.2、MVVM

是一种软件架构设计模式。

MVVM的核心是ViewModel,负责转换Model中的数据对象来让数据变得更容易管理和使用。作用

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

优点:

  • 低耦合性
  • 可复用性
  • 独立开发
  • 可测试
    在这里插入图片描述
    2.3 、MVVM的组成部分
    在这里插入图片描述
    注意:ViewModel所封装出来的数据模型包括视图的状态和行为两部分,而Model层的数据模型是只包含状态的
  • 例如页面的某一块展示什么内容,表示视图状态(展示)
  • 页面加载进来时发生什么,点击某一块发生什么,某一块滚动时发生什么,属于视图的行为(交互)

3、第一个Vue程序

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>我的第一个Vue程序</title>
</head>
<body>

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

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!!!"
        }
    })
</script>



</body>
</html>

控制台
在这里插入图片描述

4、Vue实例的生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
55 0
|
1月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
49 4
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
1月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
158 4
|
2月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
63 4
|
2月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
122 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
2月前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
128 0
前端新机遇!为什么我建议学习鸿蒙?