what is vue

vue is the abbreviation of Vue.js. It is an open source JavaScript framework for creating user interfaces and a Web application framework for creating single-page applications; the core of vue's focus is the view layer in the MVC model. At the same time, it can also easily obtain data updates and realize the interaction between the view and the model through specific methods within the component.

The operating environment of this tutorial: windows7 system, vue version 2.0, DELL G3 computer.

[Related article recommendations: vue.js]

Vue.js (/vjuː/, or simply Vue) is a tool for creating user interfaces An open source JavaScript framework, it is also a web application framework for creating single-page applications.

Vue.js is a popular JavaScript front-end framework designed to better organize and simplify web development. The core focus of Vue is the view layer in the MVC pattern. At the same time, it can also easily obtain data updates and realize the interaction between the view and the model through specific methods within the component.

Features

Components

Components are one of the most powerful features of Vue. In order to better manage a large application, it is often necessary to cut the application into small, independent, and reusable components. In Vue, components are extensions of basic HTML elements, and their data and behavior can be easily customized. The code below is an example of a Vue component, rendered as a button that counts mouse clicks.

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

Template

Vue uses HTML-based template syntax to allow developers to bind DOM elements to data in the underlying Vue instance. All Vue templates are legal HTML, so they can be parsed by browsers and HTML parsers that follow the specification. In the underlying implementation, Vue compiles templates into virtual DOM rendering functions. Combined with the responsive system, when the application state changes, Vue can intelligently calculate the minimum cost of re-rendering the component and apply it to DOM operations. [12]

In addition, Vue allows developers to directly use the JSX language as the rendering function of the component to replace the template syntax. [13] The following is the JSX rendering version of the button that can count the number of clicks (the corresponding Babel processor needs to be configured):

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (Clicked {this.count} times)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

Responsive design

Responsive means Views in an MVC model change as the model changes. In Vue, developers only need to bind the view to the corresponding model, and Vue can automatically observe changes in the model and redraw the view. This feature makes Vue's state management quite simple and intuitive.

Transition effects

Vue provides many different ways to apply transition effects when inserting, updating, or removing DOM. Includes the following tools:

• Automatically apply classes in CSS transitions and animations

• Can be used with third-party CSS animation libraries, such as Animate.css

• Use JavaScript in the transition hook function to directly operate the DOM

• You can use a third-party JavaScript animation library, such as Velocity.js

Single file component

In order to better adapt to complex projects, Vue supports files with a .vue extension to define a complete component, using An alternative to registering components using Vue.component. Developers can use build tools such as Webpack or Browserify to package single-file components.

Core Plugin

vue-router
vuex
vue-loader
vueify 
vue-cli

The above is the detailed content of what is vue. For more information, please follow other related articles on the PHP Chinese website!