jq和vue的的优劣

2024-11-03

jQuery和Vue的技术优劣对比

1.精力集中. Jq偏重于对dom的操作,由它的函数就很容易看出来,$().parent().find().我们用jq的时候经常要去考虑怎么去渲染数据,怎么从视图中取到数据,操作数据前必须对dom节点进行选取修改赋值等操作,这其实分散了我们的本该放在业务逻辑上的精力.而Vue则是基于MVVM思想,数据驱动,双向绑定,只需要定义好渲染规则,如果数据发生改变,vue会帮我们重新渲染整个页面,所以我们只需将注意力放在数据操作上就可以了. 2.代码结构. 如果你用jq没有好的代码架构,很容易就回出现一种

记录Vue和Jquery混合开发中关于点击事件的一个bug

最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的methods中,然后用@click去监测. 一直困惑的是这个BUG在不同的页面中有时有,有时没有,而且出现的情况很少.今天工作闲了一点,于是乎专心去琢磨这个问题. 网上百度到的解决方案是这样的,如下图: 于是乎自己试了一下确实可以.代码如下图: 但是回过头来看项目就很奇怪,说的写在JQ的dom加载完成函

非常简单的vue里面引入jquery

如何在vue里面引入jq了,只需四部就完成第一步 cnpm install jquery 第二步打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.exports module.exports = { resolve: { alias: { 'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery') //添加这段代码 } }, 第三步还是在build文件夹,打开webp

vue.js基本使用

#原创,转载请留言联系什么是vue.js Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue.js的github地址 https://github.com/vuejs/vue 开发过程中可以用vue.js,但是项目正式上线,请用vue.min.js. vue.js的基本使用 <!DOCTYPE html> <

Vue项目零碎知识（全局js,css配置，element-UI,bs使用， img动态配置，js数组）

全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/assets/css/global.css') //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置 // main.js //配置全局settings.js imp

Vue插件配置和后台交互

Vue插件配置和后台交互一.全局配置静态文件(csss, js..) 1.1 全局配置css文件创建css文件在main.js配置css文件 // 配置全局css样式 // 方式一 import '@/assets/css/global.css' 方式二(推荐使用) require('@/assets/css/global.css'); 1.2 全局配置js文件创建js文件在main.js配置js文件 // 配置全局js文件 // 导入 import settings from '@

为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？

引子听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D8级的前端大神黄轶,当然也是我推崇的行业偶像之一. 在这里既然提到了Vue这门渐进式的前端框架,我就不得不感慨一下,最近两年,Vue.js在国内的发展可谓是如日中天,红透大江南北(当然功劳也少不了尤雨溪前段时间在上海,北京的演讲,为之宣传布道). 光我从掘金,简书,GitHub等平台上看到的相关文章或个人项目

使用gitbook

前面的话 gitbook功能强大,可以自动实现搜索及翻页等功能,上手容易,用markdown书写即可,且可以自动生成响应式网站.本文将详细介绍如何使用gitbook 安装 1.使用npm全局安装gitbook-cli npm install gitbook-cli -g 2.使用gitbook --version来查看gitbook的版本 gitbook --version 3.接下来对gitbook进行基础配置,创建并进入一个笔记文件夹 mkdir myNote cd myNode 4.初始化

原生JS简单的无缝自动轮播

最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"

2017年10月WEB前端开发实习生面试题总结

从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题. 不定期更新中... 百度第一次一面 1.AJAX流程 2.promise简单说一下 3.手写一个箭头函数 4.链式调用 5.简单的观察者模式 6.let.const 7.数组去重 8.判断数据类型,null怎么判断 9.正则电话区号+座机号,并给区号加上括号 10.MVC.MVP.MVVM 11.TopK用的什么排序 12.堆排序的时间复杂度.稳定性,什么是稳定排序 1

整理代码，将一些曾经用过的功能整合进一个spring-boot

一由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的项目地址https://github.com/247292980/spring-boot 功能 1.spring-boot 2.FusionChart 3.thymeleaf 4.vue 5.ShardingJdbc 6.mybatis-generator 7.微信分享授权 8.drools 9.spring-security 10.spring-jpa 11.webjars 12.Aspect

webpack3整理（第二节/满三节）

消除未使用的CSS:安装PurifyCSS-webpack插件 cnpm i purifycss-webpack purify-css -D const glob = require('glob'); const PurifyCSSPlugin = require("purifycss-webpack"); plugins:[ new extractTextPlugin("css/index.css"), //这里的/css/index.css是分离后的路径位置 n

05：(H5*) node、npm、nrm

目录: 1:NPM 2:CNPM 3:NRM 4:homebrew 5:具体指令 6: -g -S -D 1:NPM NPM的全称是Node Package Manager, 是一个NodeJS包管理和分发工具. 2: NRM nrm(npm registry manager )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换 registry:登记处; 注册处;源地址, 3: cnpm 淘宝镜像,每10分钟. 4: Homebrew简称brew, H

node.js开发 npm包管理工具 npm 和 cnpm区别

npm 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 npm命令 npm -v 来测试是否成功安装查看当前目录已安装插件:npm list 更新全部插件: npm update [ --save-dev ] 使用 npm 更新对应插件: npm update <name> [ -g ] [ --save-dev] 使用 npm 卸载插件: npm un

python前后台交互相关配置

全局配置:全局样式.配置文件在js下创建setting.js ,配置全局的settings.js import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; export default { base_url = 'http://127.0.0.1:8000' } 配置全局的css样式 # import '@/assets/css/global.css' ###二者皆可 require('@/a

day78 通过axios实现数据请求

目录一.axios提供http请求的两个常用方法二.json 1.json数据的语法 2 js中提供json数据转化的方式三 ajax 1 数据接口 2 ajax在jq和vue的不同使用 3 同源策略 4 ajax跨域(跨源)方案之CORS 引子: vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https:/

把token放入请求头

1.jq 2.vue.js

nodejs安装cnpm、nrm、webpack

nodejs更换npm默认安装路径查看包路径 npm config ls NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_modules,为了方便对依赖包管理,我们将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,创建npm_modules和npm_cache,执行下边的命令: npm config set prefix "C:\Program Files\nodejs\npm_modules" npm co

看JQ时代过来的前端，如何转换思路用Vue打造选项卡组件

前言在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来,正文从这开始~ 先来看一下用Vue写的选项卡组件在浏览器上的展示效果: 其实,你在浏览器上看到的UI界面效果也就是那么回事,中规中矩.当点开Chrome的Devtools下面的Elements选项,你看到的dom节点其实和jQuery的dom节点如出一辙,不同的是,现在你看到的dom树是在Vue组件

vue引入JQ的方法

在vue中引入jq 用vue-cli脚手架工具构建项目成功后当需要引入JQ,可用以下方法: 1.首先在package.json里的 dependencies加入"jquery" : "^3.2.1", 2.在终端里输入 npm install jquery --save-dev 3.找到build文件夹下的webpack.base.conf.js文件,打开,添加: var webpack=require('webpack') 在module.exports里输入:

jq和vue的的优劣

热门专题