热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

新手简单了解vue

Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。下面我们来简单了解下吧

前言

作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法,刚好今天没事就给自己挖一个坑,分享一下我对vue的见解和一些领悟,整个专栏应该会包括vue,vue-cli,vue-router,vuex,nuxt和一些webpack的简单入门,当然实战项目也一定会放出来,更新频率视手头的项目进度而定,话不多说,开始今天的第一篇专栏。

vue是什么?为什么我们要使用vue?

说到了vue,我们就不得不先聊一下vue是什么以及为什么我们要使用vue,他能给我们的开发带来什么样的便利呢?
首先,我们来看一下vue的自我介绍:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

请注意我加粗的这一点,渐进式框架是相比于Angular.js我最喜欢的一点(ps:绝对不是因为vue的文档写的最好 :-) )
这意味着,vue是一个无论项目大小都可以满足开发需求的框架。(想当年我一次用vue-cli装的项目只有几十M,昨天从老大拷贝过来的src都已经200M了……)

通俗的来讲,vue就是一个已经搭建好的空屋,与单纯使用jQuery这种库比,可以更好地实现代码复用,减少工作量,与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选,把自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的!

简而言之,vue做了必须的事,又不会做职责之外的事。

vue的MVVM设计模式是什么?MVC又是什么?

如果你对前端有过了解的话一定知道MVVM和MVC这两种设计模式,而且很有可能对mvp也有一些了解。
MVC即model,view,control,jQuery就是采用的这种设计模式,熟悉jQuery的同学恐怕早就对$()深通恶绝了吧。

MVVM即model,view,viewmodel,它是数据驱动模式,即所有的一切通过操作数据来进行,而尽量避免操作dom树。

换句话说,我们不关注dom的结构,而是考虑数据该如何储存,用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作,而是专心于对用户的操作进行处理,避免了MVC中control层过厚的问题。

VUE组件化开发的优点

说起来还是比较感慨的,刚开始接触VUE的时候我对于他的组件还是并不喜欢的,什么父传子,子不能传父,什么占坑,传参等等,完全是一头雾水,并且感觉这些东西完全没有必要。
后来的事实证明,作为整个VUE文档中篇幅最大的部分,组件可是相当的添彩,要不是有组件这么易于复用,不易污染的特性,怕不是我都疯了无数回。

打个比方,我们现在要做一个有一百个页面的项目,其中有三十三个导航栏是A,六十七个导航栏是B,这其中三十三个A导航栏中有一个模块与众不同,可以分为A1,A2,A3,A4……

这个如果用jQuery解决的话,就得自己封装模板插件,且要么写(A,B,A1,A2,An).length个模板,要么模板套模板。
啧啧,累死个狗娘养的了。

这点上,VUE的模板就简单的多,我们先算好要多少个组件,然后看看组件之间有没有相互嵌套,把所有需要的地方都先挖上坑(写好组件标签),并且在组件标签中写好要传入组件的参数,再分别写好各种组件的实现,简简单单的就写好了,即使是嵌套也只是组件标签中套一个组件标签,更简单的改一个传参能够实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • 一、Struts2是一个基于MVC设计模式的Web应用框架在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互。Struts2优点1、实现 ... [详细]
  • 我将SpringMVC升级到Spring3.2.5.我的一些剩余调用即使存在,也会返回无法识别的字段异常.这是错误.Resolvingexceptionfrom ... [详细]
  • 关于extjs开发实战pdf的信息
    本文目录一览:1、extjs实用开发指南2、本 ... [详细]
  • MVC中的自定义控件
    怎么样创建自定义控 ... [详细]
  • Asp.Net MVC 测试应用程序
    建立一个Asp.NetMVC项目的时候,如果选择建立测试项目,那么系统会为我们建立一个项目所对应的测试项目。包含了Controller文件夹中对应的Controller单元测试文件, ... [详细]
  • MVC就是model模型control控制view视图把web开发的分工明确各施其职,互不干涉在MVC模式中,三个层各施其职,所以如果一旦哪一层的需求发生了变化,就只需要更改相 ... [详细]
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社区 版权所有