热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue教程第一篇——基础概念

认识Vue关于Vue的描述有不少,不外乎都会拿来与Angular和React对比,同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多,但到目前为止,Angul
认识 Vue

关于 Vue 的描述有不少,不外乎都会拿来与 Angular 和 React 对比,同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多,但到目前为止,Angular 在热度上已明显不及 Vue,性能已成为最大的诟病。

在我看来,Vue 和 Angular 的对比有种早些年 Java 和 ASP.NET 的对比,对于开发者而言,ASP.NET 官方本身已实现好了大量的框架和功能,使用起来非常的方便快捷,同时也提供了无限的可扩展性,对比起 Java 而言,后者在本身框架和功能上都不及 ASP.NET,但同样都拥有无限的可扩展性,相比之下,本来 ASP.NET 很有一统天下的可能,但现实终归现实,ASP.NET 本身的框架和功能实现并没有换来多少称赞,反在性能和安全性方面被诟病。回看 Vue 和 Angular 的阵营,我也总有这么一种感觉。

所以,在这个开源的年代,我认为一个框架功能不需要有多么强大,再强大再完善的功能都抵不上“适合”两字,反而轻量级且有无限可扩展性会成为所有开发者的追求。

关于 Vue、React 和 Angular,其实都是在原生 JS 基础上,对面向对象不一样的实现方式而已,所以要想使用这三者中的任意一种,首先要有一定的 JS 基础和对面向对象有一定的认识。

在代码层面,Vue 只是一个构造函数,整个 Vue 的实现都在实例化这个构造函数开始。

var vm = new Vue({
el: '#app'// Vue 实例元素
data: {
//数据
}
...
})
认识数据驱动模式

开始接触前端编程的基本上都是先学习 DOM 节点操作,jQuery 在这一领域上一度成为了标准,所以在前端编程的领域中,jQuery 几乎是每个开发者的标配。随着前后端分离的成熟,产品或项目都趋于分布式部署,开发者已不满足于操作 DOM 节点, 设计模式便慢慢的被前端化。

数据驱动的设计模式在思维逻辑上与 DOM 节点操作完全不一样。



{{message}}

//DOM 节点操作
document.getElementById('div1').innerText = '节点被动改变'
//Vue 数据驱动: 当 message 发生改变的时候,span 会相应的发生改变,而不需要手动去改变 span。
var vm = new Vue({
el: '#app',
data: {
message: '我是通过映射显示的文本'
}
})
认识 MVVM 模式

M:Model,称之为数据模型,在前端以对象的形式表现。

var data = {message: '我就是一个数据模型'}

V:View,视图,也就是 HTML


我是视图

VM:ViewModel,就是连接数据和视图的桥梁,当 Model 发生改变的时候,ViewModel 便将数据映射到视图。

那么数据驱动模式和 MVVM 模式有什么关系,换句话说,MVVM 是数据驱动模式的一种实现,Vue 是 MVVM 的一种实现。


推荐阅读
  • 本文总结了优化代码可读性的核心原则与技巧,通过合理的变量命名、函数和对象的结构化组织,以及遵循一致性等方法,帮助开发者编写更易读、维护性更高的代码。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 探讨在 JavaScript 中使用不同方向的 for 循环来实现跟随鼠标的 div 动画时,为什么会出现不同的视觉效果。 ... [详细]
  • 本文详细解析了Java中hashCode()和equals()方法的实现原理及其在哈希表结构中的应用,探讨了两者之间的关系及其实现时需要注意的问题。 ... [详细]
  • 采用IKE方式建立IPsec安全隧道
    一、【组网和实验环境】按如上的接口ip先作配置,再作ipsec的相关配置,配置文本见文章最后本文实验采用的交换机是H3C模拟器,下载地址如 ... [详细]
  • 丽江客栈选择问题
    本文介绍了一道经典的算法题,题目涉及在丽江河边的n家特色客栈中选择住宿方案。两位游客希望住在色调相同的两家客栈,并在晚上选择一家最低消费不超过p元的咖啡店小聚。我们将详细探讨如何计算满足条件的住宿方案总数。 ... [详细]
  • Python 内存管理机制详解
    本文深入探讨了Python的内存管理机制,涵盖了垃圾回收、引用计数和内存池机制。通过具体示例和专业解释,帮助读者理解Python如何高效地管理和释放内存资源。 ... [详细]
  • 本文详细介绍了JSP的三大指令:page、include和taglib,重点探讨了静态包含与动态包含的区别及其应用场景,并解释了如何使用taglib指令引入第三方标签库。 ... [详细]
  • 2018-2019学年第六周《Java数据结构与算法》学习总结
    本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • 历经三十年的开发,Mathematica 已成为技术计算领域的标杆,为全球的技术创新者、教育工作者、学生及其他用户提供了一个领先的计算平台。最新版本 Mathematica 12.3.1 增加了多项核心语言、数学计算、可视化和图形处理的新功能。 ... [详细]
  • 如何使用Ping命令来测试网络连接?当网卡安装和有关参数配置完成后,可以使用ping命令来测试一下网络是否连接成功。以winXP为例1、打开XP下DOS窗口具体操作是点击“开始”菜 ... [详细]
author-avatar
龙之图皮具
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有