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

认识 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 的实现都在实例化这个构造函数开始。

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <div id="app"></div>
  var vm = new Vue({el: '#app'// Vue 实例元素data: {//数据}...})

认识数据驱动模式

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

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

  <div id="div1"></div><div id="app"><span>{{message}}</span></div>
  //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

  <div id="app"><span>我是视图</span></div>

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278121.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Microsoft Teams的Outgoing Webhook开发入门

Microsoft Teams的应用程序有几种形式&#xff1a; TabsBotsConnectorsMessaging extensionsActivity feed integrationsOutgoing web hooks 这篇我们主要介绍如何使用 ASP.NET Core来开发最简单的Outgoing web hook。 什么是outgoing webhook Outgoing webhooks allow you t…

0418 jQuery笔记(添加事件、each、prop、$(this))

1.添加点击事件、each、prop、$(this) 1 //全选框的被动操作2 //定义一个标志保存最终状态3 var flag false;4 //为每一个选择框添加点击事件&#xff0c;数组.click()5 $(.chex).click(function(){6 //遍历数组&#xff0c;数组.each()7 …

使用dotnet template快速开发Microsoft Teams Outgoing Web Hook

在上一篇文章中&#xff0c;我们一步步从无到有在Microsoft Teams中开发了一个简单的Outgoing Webhook&#xff0c;并和我们本地的Web API应用程序产生交互&#xff0c;总结起来的步骤大概如下&#xff1a; 导航到“团队” Tab页&#xff0c; 选中需要建立的Channel, 选中“应…

Microsoft Teams:删除成员账户其历史聊天会发生什么?

介绍&#xff1a; 此博客文章的目的是演示从Office 365删除用户的账号后&#xff0c;此用户在Microsoft Teams群聊和私聊中的历史聊天记录会发生什么改变。 以下是Microsoft Teams聊天对话&#xff0c;其中Adele和其他团队成员正在参与对话&#xff1a; 此外, Adele和Mega还在…

Microsoft Teams:团队Owner离开公司后,我们该怎么做?

您是否曾在这么一个团队里&#xff0c;该团队唯一有Owner权限的人离开了公司&#xff1f;不幸的是,如果这个人不再在公司里&#xff0c;您可能觉得没有办法让其他团队成员再成为team的owner。我有一个简单易用的解决方案&#xff0c;但您需要成为Office 365租户的Admin或联系你…

python网络编程-socket编程

一、服务端和客户端 BS架构 &#xff08;腾讯通软件&#xff1a;serverclient&#xff09; CS架构 &#xff08;web网站&#xff09; C/S架构与socket的关系&#xff1a; 我们学习socket就是为了完成C/S架构的开发 二、OSI七层模型 互联网协议按照功能不同分为osi七层或tcp/ip五…

使用PowerShell配置Microsoft Teams

作为 IT 专业人员, 我一直在寻找自动化任务的方法, 并使日常操作简单。当使用Microsoft Teams时, 是否能够在团队中自动创建团队&#xff0c;渠道和设置对于Microsoft Teams组建的成功与否至关重要。PowerShell对Microsoft Teams的支持使您可以做到这一点&#xff0c;它为我提供…

Microsoft Teams的保留策略

Microsoft Teams保留策略现在可在Office 365安全性和合规性中心里进行配置 今天&#xff0c;我们很自豪地宣布&#xff0c;我们正在开始推出针对Microsoft Teams的保留策略。 推出预计将在未来几周内完成。 通过此次发布&#xff0c;Teams管理员可以使用Office 365安全性和合规…

八年溯源,如何巧搭区块链

虎嗅注&#xff1a;区块链正在逐步商业化&#xff0c;但最大的挑战是共识。 为什么这样说&#xff1f;因为商品的溯源防伪业务在过去正是因为缺乏信任感而没有得到普及&#xff0c;这是每个溯源从业者最大的感受。 在虎嗅虎跑团每两周一次线上分享会上&#xff0c;溯源链创始人…

数字签名过程及数字证书

数字签名是什么&#xff1f; 作者&#xff1a;David Youd 翻译&#xff1a;阮一峰 原文网址&#xff1a;http://www.youdzone.com/signature.html 1.鲍勃有两把钥匙&#xff0c;一把是公钥&#xff0c;另一把是私钥。 2.Bob把公钥送给他的朋友们-Pat、Doug、Susan-- 每人一把…

Teams与OneDrive for Business和SharePoint的关系

作为一个相对看重个人信息安全与隐私的人&#xff0c;个人附件等资料在Microsoft Teams中的存储方式、文件访问权限、可见范围问题引起了我的好奇。 众所周知&#xff0c;Teams包含3大主要的模块&#xff1a;单人聊天、团队、会议。那下面让我们一起来看一下&#xff0c;对这三…

hadoop学习笔记(二):centos7三节点安装hadoop2.7.0

环境win7vamvare10centos7 一、新建三台centos7 64位的虚拟机 master 192.168.137.100 root/123456 node1 192.168.137.101 root/123456 node2 192.168.137.102 root/123456 二、关闭三台虚拟机的防火墙&#xff0c;在每台虚拟机里面执行&#xff1a; systemctl sto…

在Microsoft Teams中的Visio协作

所有Team站点都带有专用文件库&#xff0c;用于存储所有工作组的内容。 您现在可以从桌面或云存储站点将Visio文件上载到此库&#xff0c;例如&#xff0c;您所在Team的资产都集中在一个位置&#xff0c;供具有权限的任何人进行访问。与其他存储文件一样&#xff0c;您可以直接…

用区块链打击假新闻 这可能是最2017年的一件事

据外媒报道&#xff0c;非营利性基金会PUBLIQ公布了一个基于区块链打造的平台。这是一个用于创建和分享原创新闻和媒体内容的平台&#xff0c;它将在近期推出。据了解&#xff0c;PUBLIQ创建这一平台则是希望能借用类似于比特币一样的系统来打击假新闻。 通过创建一个受信任的经…

oo面向对象第一单元总结

oo第一次作业主要考察了多项式的求导&#xff0c;从简单的幂函数求导到三角函数求导再到嵌套函数的求导&#xff0c;难度循序渐进&#xff0c;对我们对于面向对象的理解的要求也在一次一次提升。一行行代码打下来&#xff0c;一夜夜熬过去&#xff0c;我也来到了这个短暂的停靠…

Microsoft Teams免费版本初体验

Microsoft Teams推出有一段时间了&#xff0c;如果想要体验Teams&#xff0c;必须需要有Office365的订阅。最近微软为了进一步推广Teams&#xff0c;突然宣布Teams免费了。使用过Teams的读者知道Teams是基于Office365账号和组的&#xff0c;那它免费后&#xff0c;不使用Office…

强制禁用gitlab的双因子认证:Two-Factor Authentication

&#xff08;一&#xff09;问题描述&#xff1a; 此博客解决如下问题&#xff1a;禁用gitlab的双因子认证 禁用前&#xff0c;如图&#xff08;此时&#xff0c;你在gitlab中什么也干不了&#xff09; &#xff08;二&#xff09;思路分析&#xff1a; 百度了很多方法&#xf…

如何将Outgoing Webhook部署到中国版Azure

在这篇文章中&#xff0c;我们主要来如何将Azure DevOps中的项目作为应用发布到中国版Azure的App Service中。 什么是Azure DevOps Azure DevOps, 原名为VSTS, 全称是Visual Studio Team System&#xff0c;是由微软开发的一套具有高生产力、高集成性、可扩展的生命周期开发工…

Google SRE 读书笔记 扒一扒SRE用的那些工具

写在前面 最近花了一点时间阅读了《SRE Goolge运维解密》这本书&#xff0c;对于书的内容大家可以看看豆瓣上的介绍。总体而言&#xff0c;这本书是首次比较系统的披露Google内部SRE运作的一些指导思想、实践以及相关的问题&#xff0c;对于我们运维乃至开发人员都有一定的借鉴…

Microsoft Teams的Meet Now功能

今天&#xff0c;我们宣布完成了Skype for Business to Teams路线图中首次披露的几项关键会议功能。当个人联系&#xff0c;沟通和协作时&#xff0c;工作就自然而然的完成了&#xff0c;我们相信这些功能&#xff08;除了我们2月的公告之外&#xff09;使Microsoft Teams为所有…