Detailed explanation of your understanding of Vue.js

Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer. It is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications when combined with single-file components and libraries supported by the Vue ecosystem.

If you are an experienced front-end developer and want to know the difference between Vue.js and other libraries/frameworks, check out the comparison with other frameworks.

Features:

1. Simplicity: HTML template + json data + Vue instance

2. Data-driven: templates for automatic tracking Expressions and machine-selected attributes

3. Componentization: Use decoupled and reusable components to construct the world

4. Lightweight: Accurate and effective asynchronous batch Dom updates

5. Module friendly: Install through npm or bower and seamlessly integrate into your workflow.

Compatibility:

Vue.js does not support versions below IE8. Vue.js uses AScript5 features that IE8 does not support.

Declarative Rendering

The core of Vue.js is a tool that allows declarative rendering of data into the DOM using concise template syntax:

<

div id="app">{{ message }}</div>    
var app = new Vue({el: &#39;#app&#39;,data: {message: &#39;Hello Vue!&#39;}})

Let’s talk about some basic knowledge:

1. Global configuration

Vue.config is an object that contains the global configuration of Vue , you can modify the following properties before starting the application.

#slient

Type: boolean

Default value: false

Usage:

Vue.config .slient = true;

Cancel all logs and warnings of Vue

#optionMergeStrategies

Type: {[key:string]: Function}

Default value: {}

Usage:

1 Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {2   return child + 13 }4 const Profile = Vue.extend({5   _my_option: 16 })7 // Profile.options._my_option = 2

Options for customizing the merge strategy.

The merge strategy options accept the first parameter as the parent instance, the second parameter as the child instance, and the Vue instance context is passed in as the third parameter.

#devtools

• Type: boolean

• ##Default value:

  true (The production version is false)

• Usage:
  // Be sure to set the following content simultaneously after loading Vue
  Vue.config.devtools =
  true
  Whether the configuration is allowed

  vue-devtools Check the code. The development version defaults to true, and the production version defaults to false. Production version is set to true to enable checking

#errorHandel

Type: function

Default Value: undefind

Usage:

1 Vue.config.errorHandler = function (err, vm, info) {2   // handle error3   // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子4   // 只在 2.2.0+ 可用5 }

The above is the detailed content of Detailed explanation of your understanding of Vue.js. For more information, please follow other related articles on the PHP Chinese website!