欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js-01:新手村的试炼 - 初见Vue新世界(概念)

程序员文章站 2022-07-05 14:34:34
一、前言 初入Vue.js的新世界,总归是要了解些涉及到的新概念。菜鸟诞生的第一课,开眼看看Vue的新世界~~~ 学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html 仓储地址:https://github.com/Lanesra712/ ......

 一、前言

  初入vue.js的新世界,总归是要了解些涉及到的新概念。菜鸟诞生的第一课,开眼看看vue的新世界~~~

  学习系列目录地址:

  仓储地址:https://github.com/lanesra712/vuetrial/blob/master/chapter01-rookie/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

  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,确保视图与数据的一致性,而这个过程是框架自动完成的,无需手动干预。

Vue.js-01:新手村的试炼 - 初见Vue新世界(概念)

  图片版权说明:由ugaya40 - 自己的作品cc by-sa 3.0