新手简单了解vue


Posted in Javascript onMay 29, 2019

前言

作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法,刚好今天没事就给自己挖一个坑,分享一下我对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的同学恐怕早就对$()深通恶绝了吧。

新手简单了解vue

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

新手简单了解vue

换句话说,我们不关注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的模板就简单的多,我们先算好要多少个组件,然后看看组件之间有没有相互嵌套,把所有需要的地方都先挖上坑(写好组件标签),并且在组件标签中写好要传入组件的参数,再分别写好各种组件的实现,简简单单的就写好了,即使是嵌套也只是组件标签中套一个组件标签,更简单的改一个传参能够实现。

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

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
input框中的name和id的区别
Nov 16 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 #Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 #Javascript
You might like
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python数据结构之单链表详解
2017/09/12 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
python实现定时发送邮件
2020/12/23 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
自我鉴定范文300字
2013/10/01 职场文书
生产管理的三大手法
2013/11/11 职场文书
怎样写离婚协议书
2015/01/26 职场文书
毕业论文致谢信
2015/05/14 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL