Vue. Js

Introduction to the Vue. Js

  • 4, (4) Vue.js is an (4) gradual, red-face \underline{\text{\text}} progressive JavaScript framework for building user interfaces, the design method of “bottom-up, incremental development {\text{bottom-up, incremental development}} bottom-up, incremental development”.
  • The core of vue.js is to focus only on the view layer.

Vue.js and MVVM architecture model

  • MVVM (Model-view-ViewModel) The ViewModel is responsible for bridging between the Model and View in MVVM, notifying the View when the Model changes, and vice versa.

Bidirectional data binding

  • Bidirectional data binding means that the View and Model data are synchronized with each other.

Vue.js listens to and changes the Data in the Model through DOM Listeners. When the Data in the Model changes, it listens to and changes the Data display in the View through Data Bingings. The definition property () method of the JavaScript Object is used to redefine how the Object gets the property value and how it sets the property value. Therefore, the principle is still implemented in Javascript.

Vue. Js characteristics

  • Vue. Js isBased on the MVVM frameworkA design. A setA progressive front-end WEb framework for building a user’s browser interface.
  • Vue. Js is based onData drivenThought developed JavaScript framework, implemented inMinimize cumbersome DOM operations as much as possible.
  • Vue.js has developed a set of its own template language, usingThe VIRTUAL DOM renders the Html page, the implementation of the willThe front and back ends are separatedDevelopment method.
  • The core library of vue. js focuses only on the view layer, while taking advantage of the MVVM architecture.Bidirectional data binding“Core function
  • Vue.js focuses only on the view layer and has capabilitiesImplement single file components and relatively complex single page applications.
  • Vue. Js is aLightweight, high-performance componentized JavaScript framework, designed easy-to-learn API methods,It is very easy to integrate with other front-end libraries.

Vue.js rapid development environment

Direct script is imported into native vue.js

The vue.js library contains two versions, called “development version” and “production version”. Development version: contains full warning information and debug mode. Production version: removed warnings (smaller and faster) for final packaging and release. (Add a “min” string to the filename to distinguish it.)

Vue. Js is introduced through CDN

Vue.js Scaffolding development environment

Install the vue.js scaffolding

4, the so-called “scaffolding” is designed and developed in order to quickly build the application development framework of the automatic build tool \underline{\text{automatic build tool}} automatic build tool. The scaffolding of the vue. js framework is the Vue-CLI command line tool.

The vue. js framework itself iteration speed is very fast, currently the mainstream is Vue 2 version and Vue 3+ version. Vue 3+ adds many new features and functions on the basis of Vue 2. As a result, Vue 3+ version and Vue 2 version are used somewhat differently. There are also differences between Vue3+ and Vue2 versions in the use of vue.js scaffolding (VUe-CLI).

With the NPM tool and Webpack tool installed in the current system development environment, you can proceed with the vue-CLI command line tool installation

NPM install -g@vue /cli // Note: vUE 3+ version "@vue/cli", vUE 2 version "vue/cli"Copy the code
Vue -v // Verify that the Vue -cli command line tool was installed successfully. Note: use uppercase letters for "-v"Copy the code

Rapid prototype development testing was carried out through vue.js scaffolding

Vue. Js scaffolding supports rapid prototyping, which is simple application design through a single Vue page. To use this rapid prototyping approach, you need to add service support for the VUe-CLI command line tool

npm install -g @vue/cli-service-global
Copy the code

After successful addition, rapid prototyping tests can be performed using the “vue serve” command. Before developing and testing, you need to install a Vue.js extension named “Vetur” in the VS Code development tools. This extension adds Vue file support to the VS Code development tools.

Vue serve [file name].vue // command to directly start the Http service to test the vue.js single page fileCopy the code

Packaging is done via vue.js scaffolding

Vue build [filename].vue // Package the vue. js file in production mode, and output the successfully packaged files to the "dist" directoryCopy the code

In the dist directory, an index.html page file and a set of JS files and map files (in the JS subdirectory) are automatically generated. Finally, you can deploy the files in the dist directory directly to the server for testing.

Use vue.js scaffolding to create the application

With the “vue create” command, you can directly create the vue. js application project, which automatically generates the necessary framework files and a default vue single file page. At the same time, the default Vue single file page is already a basic vue. js application, and you can run the test application project directly with the “NPM run” command.

Vue Create CreatevueCopy the code

After installed

Use vue-CLI combined with Webpack to create applications

Vue.js project applications can also be created with the Vue-CLI command line tool in conjunction with Webpack tools. Strictly speaking, this is the way to operate in Vue 2, and the Webpack tool is actually the template recommended by vue.js.

The following describes how to use the VUe-CLI command line tool to create an application project and test it in Vue 2:

  1. Create a project

For Vue 2, the Vue -CLI command line tool is used to create application projects using “Vue init”, not” Vue create”.

vue init webpack your-project-name
Copy the code

Before using the “vue-init” command, you need to install the command extension tool as follows:

npm install -g @vue/cli-init
Copy the code
  1. Start running project
npm run dev
Copy the code
  1. Package and release the project
npm run build
Copy the code

* vue create and vue init distinction {\text{vue create and vue init distinction}}vue create and vue init distinction

Vue Create is the initialization method of VUe-CLI3. x. Currently, the template is fixed, and the template options can be freely configured. The project created is a Vue-CLI3 project, which has different structure and configuration method from the CUE-CLI2 project. Vue init is a vue-cli2.x initialization method. You can use github templates to initialize the project. Webpack is an official recommended standard template name. If you want to move the vue-cli2.x project to 3.x, you need to copy the static directory to the public directory, and the SRC directory of the old project overwrite the SRC directory of 3.x (if you want to change the configuration, you can view the document and configure it using cli3 method).

Use vue-CLI combined with Webpack to create applications

Install the Vetur plug-in in VS Code, which highlights the basic syntax of vUE Code. Open the plugin Debugger for Chrome, Debugger for Firefox. VS Code set breakpoint method Code line F9 shortcut. VS Code runs the browser debugging method F5 shortcut

Js +Node.js Full stack development practical cn.vuejs.org Vue.js Chinese official website (1) cn.vuejs.org/js/vue.js development version (2) cn.vuejs.org/js/vue.min…. The production version