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 的一种实现。
Vue 教程第一篇——基础概念相关推荐
- Vue教程 第一篇 基础
从接触学习到项目应用,大大小小的vue项目也做了好几个,近期应公司要求需要培训下vue,于是便开始写vue教程的连载博客,网上有很多关于vue学习的教程,我在这里也只是记录下整个vue的学习心得和比较 ...
- Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
- 微信公众号开发入门教程第一篇
微信公众号开发入门教程第一篇 关键字:微信公众平台开发 作者:方倍工作室 在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/ ...
- 重温《数据库系统概论》【第一篇 基础篇】【第3章 关系数据库标准语言SQL】
本篇内容为中国人民大学教授王珊.萨师煊的<数据库系统概论>自学课程的复习笔记,学习视频源于小破站(传送门),对应视频P16-P27,属教材"[第一篇 基础篇]"的&qu ...
- 重温《数据库系统概论》【第一篇 基础篇】【第1章 绪论】
时隔两年,重温数据库,再次学习人大教授王珊.萨师煊的<数据库系统概论>,别有一番滋味在心头,或许这就是软件"不归路"上的感悟吧,又一次打开课本,记忆犹新,在已经学习过大 ...
- MVC教程第一篇:准备工作
MVC教程第一篇:准备工作 2010-01-28 作者:张洋 来源:张洋的BLOG 摘要 本文将简要介绍这个文章系列的目的.形式及大体内容.并且完成开始学习这个系列前所必要的准备工作. 前言 ...
- 区块链教程(二):基础概念介绍
注:本教程为技术教程,不谈论且不涉及炒作任何数字货币 本系列重点在于以太坊基础知识.以太坊客户端以及以太坊solidity编程,因此博客重点在于以太坊核心知识点的掌握,区块链部分的基础知识可以作为补充 ...
- Electron系列教程——第一篇:入门
Electron系列教程--第一篇:入门 一.楔子 想要学习Electron,跟着官网或者中文网,仔细阅读,并实践,其实是够了,不必要重复.那为什么还要写这个系列呢?大概有两方面原因,其一:我使用el ...
- CCIE理论-第一篇-SDN概念复习
CCIE理论-第一篇-SDN概念复习 SDN-软件定义网络(Software Defined Network,SDN 最主要的核心概念是方便管理设备 传统网络 其实这个SDN也不是多牛逼的东西,他只是 ...
最新文章
- EBS报表 查看输出 FNDWRR.exe
- 论如何学习一门编程语言
- 好架构是进化来的,不是设计来的
- nginx配置vue项目500_一个Nginx部署多个vue前端项目总结
- 查询阜阳2021高考成绩,2021年阜阳高考成绩排名及成绩公布时间什么时候出来
- Jeewx-api 1.1 版本发布,微信极速 SDK
- Kafka的高性能原理
- (51)FPGA条件选择(case)
- 哈希函数(Hash Functions - 散列函数)的基本介绍(SHA-2,SHA-256,MD-5,Scrypt,BCrypt等)
- SpringMVC和Structs2
- cordova 美洽_phonegap-cordova-美洽客服插件-ios
- python实现语法分析器_Python源码分析5 – 语法分析器PyParser | 学步园
- Java加密知识体系
- 虚拟机kali挂主机代理
- 识别IOS和android方法
- 《番茄todo》APP广告的设计与制作
- 深圳求职指南(2004版)
- 2022.7.14 花旗银行外包面试
- python timer怎么用_python定时器(Timer)用法简单实例
- Endnote插入文献与文献管理
热门文章
- location 拦截所有_让它帮你干掉所有流氓软件,还你一个清静系统
- Unity3D 旋转
- 必须掌握的前端模板引擎之art-template
- 记一次用WPScan辅助渗透WordPress站点
- 动态规划(冬令营课堂笔记)
- [单选题]$array = array('a','b','c','d'); $array_now = array_splice($array,2); print_r($array_now);...
- 如何通过session控制单点登录
- Spark入门实战系列--8.Spark MLlib(上)--机器学习及SparkMLlib简介
- PDA开发系列:GPS模块的调用
- WINDOWS下的squid