vue和原生js的优点分析
我的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下:
一、控件跟数据自动绑定
可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid").val()那一套方法来获取控件的值,对控件赋值也方便很多,只需要改变data的值,控件就会自动改变值。将复杂的界面操作,转化为对数据进行操作。
比如下面的一段代码就可以很简单的实现了select控件的里面的列表的动态管理:
html代码:
<el-select v-model="mType"style="flex: 1;"><el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>
js代码:
data(){return{mType:'',enums:[{value:0,label:'正常'},{value:1,label:'拉黑'}]}
}
二、页面参数传递和页面状态管理。
页面传值对于vue来说,可供选择的方法非常多。比如使用子组件实现,通过对props属性传值;也可以使用页面url参数的方法传值;或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候,在页面有多个参数的时候,页面传值和初始化,要复杂很多。而vue直接将参数保存在对象里面,直接给子组件的属性或vuex存储一个对象就行了,比如 , 这样就可以将userinfo传到自定义组件。
三、模块化开发、无刷新保留场景参数更新
比如一个列表页面里面有添加功能,有修改功能,这时候我们可以通过引用子组件的形式,当子组件内容更新的时候,修改主组件的数据,比如修改了一条数据后,我们需要列表页同时刷新,但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个,需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数,但假如你用vue开发,将变得非常简单。
四、代码的可阅读性
vue天生具有组件化开发的能力,因此不同的功能基本都是写在不同的模块里面,因此代码的可阅读性非常高。当一个新手接手一个旧项目的时候,基本上可以做到一天就能定位到要修改的代码,进行修改,快速接手项目。
vue的优点
vue.js是一个用于创建用户界面的开源 JavaScript 框架,也是一个创建单页应用的 Web 应用框架。旨在更好地组织与简化 Web 开发。Vue.js是一套构建用户界面的渐进式框架,一款流行的 JavaScript 前端框架。
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
● vue基于一种MVVM模式,使用数据驱动的方式,通过Vue对象将数据和View完全分离开来。对数据进行操作,不在需要引用相应的DOM对象,通过vue对象,将数据和相应的DOM对象相互绑定起来。
● Vue适用的场景:vue侧重数据绑定,比如复杂数据操作的后台页面;表单填写页面
● Vue不直接操作dom,采用虚拟dom
● Vue通过数据驱动界面
vue是基于强大的nodejs,添加新的组件库,基本一句npm命令就能安装,比如当我需要使用axios组件的时候,直接npm install axios安装一下,就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。
vue的话分为主路由、子路由、主页面、子组件的方式,可以让我们彻底抛弃iframe。写过前端的同学都知道,因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局。
vue的各子组件样式不冲突:各个组件之间,可以使用相同的样式名,但有不同的样式属性。比如组件A和组件B的button都绑定了class=“btn”, 但在两个组件里,我们可以实现两个不同的btn样式属性,互不影响。
vue的缺点:
vue的不足:
当然,vue也有不足,不足的地方如下:
一、vue是单页面页面,对于搜索引擎不友好,影响seo.因此不适合做公司官网。比如两个vue路由(页面),它的路径是这样的:index.html#aaa 和 index.html#bbb,但对于搜索引擎来说,都是同一个页面,就是index.html。这样搜索引擎就无法收录你的页面。
二、vue门槛较高,使用vue,需要先学习和摸索vue大概3天左右的时候,建议使用vue的时候,不需要看node.js自动帮你生成的js文件。你只需要编写你自己页面的代码就行了。具体nodejs帮你生成的框架代码,其实是不用看的。
vue和原生js的优点分析相关推荐
- vue如何写原生js_纯技巧向:React, Vue, Rxjs 和原生 JS 代码大乱斗
前言 这是一篇纯技巧向的文章,跟一年多之前的<揭秘Vue-3.0最具潜力的API>一样[0],更少的背景铺垫,更多的代码,更多的 demo,更快的节奏. 让我们直接进入主题. 背景 前一阵 ...
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
- 直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...
本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
- vue原生js打印插件
##需求 在vue单页面应用中打印目标区域 ##解决方案 使用原生window.print var printhtml = window.getElementById(dom).innerHtml / ...
- vue 判断字符串是否是英文_vue rules以及原生js判断字符串是否为正整数(正小数)...
1.在vue中 使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNu ...
- 原生js 或vue实现60分钟倒计时案例
使用场景类似于 订单倒计时,或答题倒计时,代码如下 在Vue中封装了如下的方法 data () {return {countdownTxt:'',//要显示的倒计时文案};}, // 定义一个方法 方 ...
最新文章
- 神经网络到底是如何实现分类的---共振参考系假设
- 趣文:程序员/开发人员的真实生活
- tomcat的配置支持多个网站
- Consul-template+nginx实现自动负载均衡
- 狂雨CMS小说网站源码 附一套pc模板和两套手机模板(白色,蓝色)
- 2017.3.6~2017.3.7 Harry And Magic Box 思考记录(特别不容易)
- 面试官:Spring MVC的处理流程是怎样的?
- 软件测试入门到飞升上仙之web 端测试
- k8s学习: Ingress Nginx
- 10个不错的编程等宽字体
- 企业微信小程序开发流程
- 怎么把python压缩_python中如何实现图片压缩
- uniapp 跳转公众号获其他小程序
- 有n个人围成一圈编号1~n,顺序排好,从第一个人开始1到3报数,凡是报到3的人退出圈子,C语言编程出圈顺序
- cad计算机中怎么用除号,CAD中特殊符号如何输入?超全教程,一看就懂!
- FFmpeg基础: 视频裁剪
- 低轨卫星J2模型数值外推精度竟然接近STK的HPOP高精度外推模型
- VCC,VDD,VSS,VEE区别
- 面对层出不穷的问题,延迟开学的原因就是取消延时服务?
- 在layui表格中显示图片
热门文章
- 基于Echarts数据可视化地图模块(地图下钻+地图迁徙线)
- suse linux 单用户,如何在 SUSE 12 Linux 中进入单用户模式?
- Wilcoxon rank-sum 和 signed-rank
- 查看话单日志和性能日志有效信息的流程
- 怎么在SAP MM库存管理中使用简单的货架管理功能
- Altium Designer PCB扇孔技巧
- OpenCV—画出时钟并动态同步系统时间
- 《数据挖掘导论》学习 | 第八章 聚类分析:基本概念和算法
- 全球及中国抗高血压药物市场经营状况及投资竞争力分析报告2021-2027年
- 解决无线打印机休眠后掉线无法进行局域网打印的问题