Vue.js basic short answer questions

Series Article Directory

follow-up supplement

---

---

foreword

Vue.js basic short answer questions.

---

1. What is the difference between a library and a framework?

When using a library, the programmer is responsible for the flow of the application, choosing when and where to call the library. When using a framework, the framework takes care of the process. At this point the framework provides some places to insert code, but it will use the code you insert as needed. The use of the framework needs to abide by the rules, and the degree of freedom is worse than that of the library.

2. What are the core features of Vue.js?

• Data-driven view.
• Component development.

3. What is Data Driven View?

After the data in data is declared, bind the data to the view, and the data changes will be automatically updated to the corresponding elements in the view, without manual manipulation of the DOM, to achieve the effect of data-driven views.

4. What are the meanings of each part of the MVVM model, and what functions do they correspond to in Vue.js?

• M-Model, representing data. The data to be displayed on the corresponding page.
• V-View, view template. Corresponds to the DOM structure.
• VM-ViewModel, the view model, is used for two-way data binding with the View layer, corresponding to the Vue instance.

5. What is the function of the el option, and what kinds of values ​​can be set?

Select a DOM element as the mount point of the instance to delineate the scope of vue.js. Can be set as element/css selector obtained by native javascript.

6. What are the characteristics of the data set in data?

The data in data is responsive data, which will be automatically updated to the view when it changes. Can be used directly in interpolation expressions, can be used to set HTML element attributes and content, one-way data binding and two-way data binding.

7. What problems can Vue.set() solve?

When there is an array in data, changes made to the array by index operations and length operations will not be automatically updated to the view. The Vue.set() method updates the data in the array, which can be automatically updated to the view. Vue.set(array name to be changed, index value, 'effective content')

8. What are the writing requirements in the interpolation expression?

Interpolation expressions can only be written in the label content area, not on the label. You can write javascript expressions inside, but you cannot write javascript statements. Element content can be written in a combined form or combined with data binding operations to set dynamic content for elements.

9. What is the function of methods?

Stores the function to be used by the Vue instance.

10. Talk about your understanding of the instructions.

Instructions are custom attributes of HTML. After setting instructions to HTML elements, the framework can identify specific custom attributes, and then quickly perform functional processing and simplify DOM operations, which is equivalent to encapsulating basic DOM operations. When the expression of the instruction changes, the corresponding DOM operation will be performed.

11. What are the commonly used content processing instructions?

• v-text: The entire content of the element is replaced with the specified plain text data.
• v-html: The entire content of the element is replaced with the specified HTML text.
• v-once: Make the interpolation expression inside the element take effect only once, which is static data and will not be updated dynamically.

12. What are the common attribute binding operations?

Used to dynamically bind HTML attributes, such as id, class, style. Bind plain data, set expressions, bind multiple properties, and also bind objects.

Thirteen, the attention points of the v-for instruction?

v-for is generally not used with v-if on a tag. When using v-for, you should always specify unique Key values ​​to improve rendering performance and avoid issues. By using v-for < template>in combination with template placeholders, a certain instruction content area is created in a loop, and the key attribute cannot be set.

14. What is the difference between v-if and v-show?

• v-show is to change the display and hiding of the element by changing the display attribute of the element. v-if is suitable for frequent switching between display and hiding.
• v-if is to change the display and hiding of elements by whether to create DOM elements.

15. How to bind events?

v-on binding event can be abbreviated as @.

Sixteen, talk about your understanding of two-way data binding?

Two-way data binding is based on one-way data binding, which can automatically update the input content of elements to data, and realize two-way data binding between data and element content. The main body of two-way data binding is View and ModelView. View represents the view element and ModelView represents the Vue instance. When the data in the data in the Vue instance changes, it will be automatically updated to the view, which is called one-way data binding. On the basis of one-way data binding, when the data of elements in the view is changed, it will be automatically updated to the data in data, which is called two-way data binding.

17. How to set custom instructions?

• Global registration, available to all Vue instances and components

Vue.directive("自定义指令的名字",{
    inserted：function(el){	// 钩子函数
        el.focus() 		//代码操作
    }
});

• Local registration, only available in the current Vue instance or component

directives: {
  自定义指令的名字: {
    // 指令的定义
    inserted: function (el) { // 钩子函数
      el.focus()		// 代码操作
    }
  }
}

18. What are filters usually used for?

Format the text content.

19. What is the difference between methods and computed?

computed	methods
Access by property name	function call
Based on the cache dependency, only when the data on which the computed property depends changes, it will re-fetch the value	Every time an element is rendered, if there is a function call, it will be called every time
Computed properties are commonly used when traversing data and complex data calculations

20. How to set the listener?

new Vue({
    el:"#app",
    data:{
        value:'',
        obj:{
            content1:'内容1',
            content2:'内容2'
        },
     watch:{
         value(newValue,oldValue){
             // 逻辑代码
         }
         obj:{
         	deep:true;
         	handler(val,oldVal){
        
    		}
     	}
     }
    }
});

---

Summarize

Vue.js is a progressive JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a set of declarative, componentized programming models to help you develop user interfaces efficiently. Whether it is a simple or complex interface, Vue can handle it.

Features of Vue.js include:

Progressive framework: Vue.js can quickly build a beautiful user interface without introducing a large number of libraries or plugins into the project.
Easy to learn and use: The API of Vue.js is designed to be very simple and easy to understand, and the learning cost is low.
Flexibility: Vue.js can be seamlessly integrated with other libraries or plug-ins, and can also be encapsulated layer by layer from bottom to top.
Efficiency: Vue.js uses virtual DOM technology, which can quickly respond to data changes.