一、前言

  Vue、React、Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念。

  学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html

  仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/docs/Concept.md

二、干货合集

  1、 Vue.js是什么?

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,只关注于视图层。在Vue的官网中我们可以看见,对于渐进式框架这个词,作者是加粗表示的,按照作者的设计,Vue包含了现代前端框架所必须的内容,但是你并不需要一开始就把所有的东西都用上,这些都是可选的。

  对于Vue的解释,推荐简书上的一篇文章,文章地址:https://www.jianshu.com/p/a4339bad5256  

  2、 使用Vue.js后与传统的前端开发模式有何不同?

  在传统的前端开发中,为了完成某个任务,我们需要使用 JS/Jquery 获取到元素的DOM元素,随后对获取到的DOM元素进行操作。而当我们使用Vue进行前端开发后,对于DOM的所有操作全部交由Vue来处理,我们只需要关注于业务代码的实现就可以了。

  3、 如何使用Vue.js?

  3.1、使用 script 标签引用Vue.js(这里可以在Vue的官网上下载好js文件后使用标签引入,也可以使用cdn的形式引入)

  <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  3.2、使用 Vue-cli 构建单页应用(需要先在电脑中安装好node.js环境才可使用)

  //1、全局安装Vue-Cli
  npm install -g vue-cli
  //2、进入创建项目目录下
  //3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
  vue init webpack projectname
  //4、进入项目目录下
  //5、下载项目引用的包
  npm install
  //6、运行项目
  npm run dev

  PS:这里使用的是 vue-cli 的 2.x 版本,在最新的 vue-cli 3.x 版本中,包名已经发生了改变,你需要卸载原有的包之后重新安装 vue-cli 才可以,同时也可以使用页面的形式配置项目了。

 //1、卸载原有的 vue-cli 版本
npm uninstall vue-cli -g
//2、安装新版本 vue-cli
npm install -g @vue/cli
//3、创建项目
vue create projectname
//3、使用页面创建
vue ui

  4、 MVC与MVVM

  4.1、MVC(Model-View-Controller):是一种表现模式(UI / Presentation Pattern),它将软件的UI部分的设计拆分成三个主要单元,分别是Model、View和Controller。MVC核心是控制器,它负责处理浏览器传送过来的所有请求,并决定要将什么内容响应给浏览器。

  Model:模型,用于存储数据的组件;

  View:视图,根据Model数据进行内容展示的组件;

  Controller:控制器,接受并处理用户指令,并返回内容

  4.2、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了对于Model和ViewModel的双向数据绑定,通过ViewModel连接View和Model,确保视图与数据的一致性,而这个过程是框架自动完成的,无需手动干预。

  图片版权说明:由Ugaya40 - 自己的作品,CC BY-SA 3.0链接

三、总结

  这一章我们主要学习了一些 vue 涉及到的一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到的知识,文章开始处提供仓储地址里会将涉及到的知识点的汇总成一个markdown文档,希望多多关注啊,嘻嘻。

Vue.js-01:第一章 - 一些基础概念的更多相关文章

  1. 第一章 zookeeper基础概念

    1.ZooKeeper是什么 ZooKeeper为分布式应用提供了高效且可靠的分布式协调服务,提供了统一命名服务. 配置管理和分布式锁等分布式的基础服务.在解决分布式数据一致性方面, ZooKeepe ...

  2. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  3. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  4. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  5. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  6. 第一章 –– Java基础语法

    第一章 –– Java基础语法 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4 ...

  7. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  8. [Python笔记][第一章Python基础]

    2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...

  9. UNIX环境高级编程--第一章 UNIX基础知识

    第一章 UNIX基础知识 1.2 UNIX体系结构   从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...

随机推荐

  1. Redis Rpop 命令

    Redis Rpop 命令用于移除并返回列表的最后一个元素. 语法 redis Rpop 命令基本语法如下: redis 127.0.0.1:6379> RPOP KEY_NAME 可用版本 & ...

  2. CentOS6.5 安装Python2.7后, yum出现“No module named yum”错误

    安装如下方法安装python2.7: yum install –y python27 python27-devel python-docutils cd /usr/bin/ rm -rf python ...

  3. Java多线程简介

    Java多线程简介 Java中内置了对多线程的支持,让多线程的开发方便很多,但同时也带来了另外的复杂,线程间的交互以及很多的不确定性让多线程又显得很复杂.在此只是针对Java中多线程的基础做些说明,有 ...

  4. 8天入门docker系列 —— 第四天 使用aspnetcore小案例熟悉端口映射和挂载目录

    到目前为止大家应该对镜像和容器有了一个大概认知,而且也用了docker进行了一个简单化的部署,但仔细一看问题还有很多,所以这篇我们继续完善. 一:如何让外网访问到容器内应用 我们知道容器内拥有自己的子 ...

  5. 手把手学会MySql主从配置

    001 开启二进制日志. vi /data/mysql/port-3306/my.cnf log-bin=mysql-bin 002 在master上为从主机新建一个专门用于同步的账户,并授权REPL ...

  6. Hyperledger Fabric、Corda和以太坊对比

     Hyperledger Fabric . Corda 和以太坊的对比 三种不同的框架 我们从 Hyperledger Fabric.R3 Corda和以太坊的白皮书中可以看到,三种框架在可能的应用领 ...

  7. Go:学习笔记兼吐槽(2)

    Go:学习笔记兼吐槽(1) Go:学习笔记兼吐槽(2) Go:学习笔记兼吐槽(3) 基本数据类型和string之间的转换 (1) 基本类型转string 使用 fmt.Sprintf(“%参数”, 表 ...

  8. 一文带你认识Spring事务

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y Spring事务管理我相信大家都用得很多,但可能仅仅 ...

  9. okio:定义简短高效

    欢迎关注公众号,第一时间获取最新文章: 本篇目录 一.前言 okio是大名鼎鼎的square公司开发出来的,其是okhttp的底层io操作库,既然已经有java原生的io库为什么还要自己费尽开发一套呢 ...

  10. SpaceSyntax【空间句法】之DepthMapX学习:第一篇 数据的输入 与 能做哪些分析

    两部分,1需要喂什么东西给软件,2它能干什么(输出什么东西在下一篇讲) 博客园/B站/知乎/CSDN @秋意正寒 转载请在头部附上源地址 目录:https://www.cnblogs.com/onsu ...