current position:Home>How do Vue, native JS and jQuery feel about development

How do Vue, native JS and jQuery feel about development

2022-04-29 16:48:59Sandy_ Star

There are questions about the Q & a framework during the interview . Use of questions Vue Develop and use native JS or jQuery What's the difference between development ? Or what is the sense of experience ?

First, let's talk about what these three are ?

  1. JavaScript: Scripts run in the browser language , The main solution is the interaction between the front end and the user , Including using interaction and data interaction ,JavaScript The browser parses and executes .
  2. jQuery: yes JavaScript A function library in , In fact, it's about the original js Made a layer of encapsulation , Make acquisition dom The operation of the system is more simple and convenient , But the data and view layers are not separated , In essence To operate DOM Implementation logic .
  3. vue: Is a progressive framework for building user interfaces . Yes js Of API It was packaged , Other functions are also implemented , Separate the data from the view layer , Drive... With data , Operation page view .

What's the difference between experience ?

I happen to have used these three for development .

1. about DOM Treatment mode :

  • For native js Come on , It must be something that needs to be realized manually . obtain DOM, operation DOM, Monitor data and so on , Anyway, I have to write a lot of long API.
  • about jQuery Come on , It encapsulates the js, Simplified right DOM The operation of , For example, we want to get DOM, direct $ Just fine .
  • about vue Come on , It keeps us from operating DOM You can operate the page , Drive views through data . For example, to insert data into a page , direct { {}}(mastache grammar ) Just fine , And then in data Set the data to be displayed in . Then by listening data To achieve the effect of view change . That is, responsive data development .

2. For user input processing :

  • Native JS and jQuery Basically, first get DOM, Then get the inside value, Then carry out relevant operations .
  • vue You can use v-model Compare the user's input with that in the instance data Two way data binding of variables in .

3. Handling of events :

  • For native and jQuery: Still have to get DOM Elements , such as $(‘#id’).click()
  • about vue, It's using v-on Instructions , Write the event name after , Then you can go to methods It defines , Without getting DOM Elements

4. For creating new DOM fragment :

  • about jQuery: To put DOM Write the fragment into a string and add
var html = `<div>hhhhh</div>`;
$('#id').innerHTML = html;
  • about vue Come on , Generate new DOM Redefine how components can be used .

5. about css operation :

  • jQuery about css The operation of is only simplified js The grammar of , direct $(‘#id’).css(key:value)
  • about vue:css The operation of also adopts binding operation , Use v-bind
<div v-bind:class="{active:isActive}">
    
</div>
data:{
	isActive:true;
}

6. For cycles DOM Fragment operation :

  • js It's using for loop , Cycle generation DOM fragment
  • vue It's using v-for Instructions

7. Monitoring for data changes :

  • stay jQuery Judgment needs to be written manually in , When the content changes, compare the old and new content , The code is very cumbersome .
  • And in the vue Through watch Option to listen for changes in data . Very convenient , When the data changes, certain events are triggered .

summary

  • vue The release of the DOM operation , Update the view by manipulating the data
  • vue More elegant rendering , Code is easy to maintain
  • vue Project Engineering , Can combine npm Direct installation of third-party libraries

copyright notice
author[Sandy_ Star],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291500325478.html

Random recommended