집 > 기사 > 웹 프론트엔드 > jquery와 vue 비교 예시 분석

jquery와 vue 비교 예시 분석

小云云원래의: 2018-03-05 17:00:231555검색

많은 사람들이 jquey와 vue는 비교할 수 없다고 말합니다. 둘 다 mvvm 아이디어를 기반으로 설계된 프레임워크일 뿐이므로 비교할 수는 없을 것 같습니다. 다양한 시나리오에서는 성능에 약간의 차이가 있습니다. 하지만 jquery에서 vue나 mvvm으로의 전환은 dom을 직접 운영한다는 원래의 생각을 데이터를 운영하는 것으로 바꾸는 것이 근본적인 변화가 아닐까요?

1. jquery 소개: jquery는 예전이나 지금이나 가장 많이 사용되는 jquery라고 생각합니다. 그러나 현재는 국내외에서 점차 다른 js 라이브러리로 대체되고 있습니다. 브라우저 제조업체는 HTML5 사양을 일관되게 따르고 브라우저 측에서 ECMA6을 구현하므로 jquery의 사용량은 점점 더 낮아질 것입니다

2. vue 소개: vue는 떠오르는 프런트 엔드 js 라이브러리이자 간소화된 MVVM입니다. 기술적 관점에서 Vue.js는 MVVM 모델의 ViewModel 계층에 중점을 둡니다. 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결하고, 데이터에 대한 작업을 통해 페이지 보기 렌더링을 완료할 수 있습니다. 물론 Angular 및 React와 같은 다른 많은 mvmm 프레임워크도 유사하며 기본적으로 MVVM 개념을 기반으로 합니다. 그러나 vue는 단순하고 빠르며 결합되어 있고 컴팩트하고 강력하며 강력하다는 고유한 장점으로 빠르게 상승했습니다

3. vue와 jquey의 비교

jQuery는 선택기($)를 사용하여 DOM 개체를 선택하고 값을 할당하며 실제로 이벤트 바인딩 등의 작업과 네이티브 HTML의 유일한 차이점은 DOM 개체를 더 편리하게 선택하고 작업할 수 있으며 데이터와 인터페이스가 함께 있다는 것입니다. 예를 들어, 레이블 태그인 $("lable").val();의 내용을 가져와야 하는 경우에도 여전히 DOM 요소의 값에 따라 달라집니다.

Vue는 Vue 객체를 통해 데이터와 뷰를 완전히 분리합니다. 데이터를 조작하기 위해 더 이상 해당 DOM 객체를 참조할 필요가 없습니다. 데이터와 뷰는 Vue 객체인 vm을 통해 서로 연결되어 있다고 할 수 있습니다. 이것은 전설적인 MVVM입니다.

4. 예시

시나리오 1: 목록에 요소 추가 다음 그림은 vue가 데이터 메시지에 데이터 조각만 푸시하면 된다는 것을 보여줍니다. li 태그 추가 작업을 완료하려면 jquery가 dom 요소 노드를 가져와서 dom에 레이블을 추가해야 합니다. dom 구조가 특히 복잡하거나 추가된 요소가 매우 복잡하면 코드가 매우 복잡해지고 낮아집니다. 가독성

vue:

jquery와 vue 비교 예시 분석

nbsp;html>
    <meta>
    <p>
        </p>

{{item}}

jquery와 vue 비교 예시 분석

jquery:

jquery와 vue 비교 예시 분석

nbsp;html>
    <meta>
    <p>
        </p>

第1条数据
第2条数据

jquery와 vue 비교 예시 분석

장면 2: 제어 버튼 표시 및 숨기기, 아래 그림은 v 코드입니다. ue와 jquery의 두 가지 작업의 경우 vue는 isShow 속성의 값을 true와 false로 제어하기만 하면 되는 반면 jquery는 여전히 버튼을 제어하기 위해 dom 요소의 표시 및 숨기기 작업을 수행해야 한다는 것을 알 수 있습니다

vue:

jquery와 vue 비교 예시 분석

nbsp;html>
    <meta>
    <p>
        </p>

{{item}}

jquery와 vue 비교 예시 분석

jquery:

jquery와 vue 비교 예시 분석

nbsp;html>
    <meta>
    <p>
        </p>

第1条数据
第2条数据

jquery와 vue 비교 예시 분석

출력 결과:

4. 요약 : 내용이 비교적 얕고, 주로 vue와 jquey의 차이점을 분석하기 위해 위의 두 예제는 단순한 설명일 뿐이지만 Vue는 이보다 훨씬 더 많은 문제를 해결할 수 있으며 훨씬 더 복잡합니다. ㅋㅋㅋ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　바인딩, jquery는 스타일 작업, 애니메이션 효과 등에 중점을 두어 비즈니스 요구 사항을 보다 효율적으로 완료할 수 있습니다.

5. 첨부된 회사의 프런트 엔드 디렉토리 구조는 관심이 있는 경우 모든 사람과 코드를 공유할 수 있습니다. .보세요

src代码目录包含assets静态文件，components vue组件文件，plugins 插件文件（包含登录操作，http请求操作，过滤器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相关配置，index.html主页面

build目录为webpack打包文件，dist目录为打包后生成的文件，node_modules 引用的外部组件

补充阅读：

1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字
点击按钮后：

改为

(1)jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<p>
    <p>大家好，我是<span id="name">张三<span>!</p>
    <p>我是一名<span id="jop">医生</span>.</p>
    <button id = "modifyBtn">修改</button>
</p>
<script type="text/javascript">
    $("#modifyBtn").click(function(){  
        $("#name").text("李四");  
        $("#jop").text("老师");  
    });  
</script>
</body>
</html>

(2)Vue代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
    <p>大家好，我是<span>{{name}}<span>!</p>
    <p>我是一名<span>{{jop}}</span>.</p>
    <button v-on:click="modifyInfo">修改</button>
</p>
<script>
new Vue({  
    el: &#39;#app&#39;,  
    data:{  
        name:"张三",  
        jop:"医生"  
    },  
    methods:{  
        modifyInfo:function(){  
            this.name = "李四";  
            this.jop = "老师";  
        }  
    }  
})  
</script>
</body>
</html>

jquery와 vue 비교 예시 분석

관련 기사