Detailed graphic explanation of Vue.js

This time I will bring you a detailed explanation of Vue.js with pictures and text. What are the precautions when using Vue.js? Here are practical cases, let’s take a look.

Vue.js is currently one of the most popular and promising front-end frameworks. It provides a new thinking model that helps us quickly build and develop front-end projects. This article aims to help everyone understand Vue.js, understand the development process of Vue.js, and further understand how to build a medium-to-large front-end project through Vue.js, while doing corresponding deployment and optimization work.

The article will be developed in the form of a PPT picture with text introduction, and will not involve the specific code of the knowledge point, just click there. Interested students can check the corresponding documents to learn more.

Introduction to Vue.js

From the introduction in the picture above, it is not difficult to find that Vue.js is a lightweight It is a data-driven front-end JS framework. The biggest difference between it and jQuery is that jQuery changes the display of the page by manipulating the DOM, while Vue realizes the update and display of the page by manipulating data. The following is the Vue data-driven conceptual model:

Vue.js is mainly responsible for the green cube ViewModel in the picture above, which is between the View layer (i.e. DOM layer) and The Model layer (that is, the JS logic layer) is bound to DOM Listeners and Data Bingings through ViewModel, two things equivalent to listeners.

When the view of the View layer changes, Vue will listen and change the data of the Model layer through DOM Listeners. On the contrary, when the data of the Model layer changes, it will also listen and change the display of the View layer through Data Bingings. This implements a two-way data binding function, which is also the principle of Vue.js data driver.

Vue instance

##In an html file, we can directly introduce Vue through the script tag. js, and then you can write Vue.js code in the page. In the picture above, we construct a Vue instance through new Vue(). In the instance, it can include hanging elements (el), data (data), templates (template), methods (methods) and

lifecycleHooks (created, etc.) and other options. Different instance options have different functions, such as:

(1) el indicates which area under the element our Vue needs to operate, and '#demo' indicates the area under the element with the ID of demo.

(2) data represents the data object of the Vue instance, and the attributes of data can respond to data changes.
(3) created indicates the step in the instance life cycle when the creation is completed. When the instance has been created, its method will be called.

Vue common instructions

In the development of Vue projects, the one we use most should be It is a Vue command. Through the common instructions provided by Vue, we can fully utilize the powerful functions of Vue's data drive. The following is a brief introduction to the commonly used instructions in the figure:

(1) v-text: used to update the content in the bound element, similar to jQuery's text() method

(2) v- html: used to update the html content in the bound element, similar to jQuery's html() method
(3) v-if: used to render the element based on the true and false conditions of the value of the expression, if P3 in the above picture is If false, the P tag will not be rendered
(4) v-show: Used to display hidden elements based on the true and false conditions of the expression value, and switch the display CSS attribute of the element
(5) v-for: Use For traversing data to render elements or templates, if P6 in the figure is [1,2,3], 3 P tags will be rendered, and the contents are 1, 2, 3
(6) v-on: used in the element Binding events, the click event of showP3 is bound to the P tag in the figure

For more Vue instructions, you can view the Vue2.0 document, address: https://vuefe.cn/api/# Instructions

Vue.js Technology Stack

We mentioned above that you can write Vue code directly in an HTML page by introducing Vue.js, but this method is not commonly used. Because if our project is relatively large, there will be many pages in the project. Once each page introduces a Vue.js or declares a Vue instance, this is very detrimental to later maintenance and code sharing, and there will also be instance name conflicts. situation, so we need to use the technology stack provided by Vue to build a powerful front-end project.

In addition to Vue.js, we also need to use:

(1) vue-cli: Vue’s scaffolding tool, used to automatically generate the directories and files of the Vue project.
(2) vue-router: The front-end routing tool provided by Vue, we use it to implement page routing control, partial refresh and on-demand loading, build a single-page application, and achieve front-end and back-end separation.
(3) vuex: The state management tool provided by Vue is used to manage the interaction and reuse of various data in our projects at the same time, and stores the data objects we need to use.
(4) ES6: A new version of Javascript, short for ECMAScript6. Using ES6 we can simplify our JS code while taking advantage of the powerful features it provides to quickly implement JS logic.
(5) NPM: The node.js package management tool is used to uniformly manage the packages, plug-ins, tools, commands, etc. needed in our front-end projects to facilitate development and maintenance.
(6) webpack: A powerful file packaging tool that can package and compress our front-end project files into js at the same time, and can achieve syntax conversion and loading through loaders such as vue-loader.
(7) Babel: A plug-in that converts ES6 code into browser-compatible ES5 code

Using the above technologies, we can start building our Vue project.

Building large-scale applications

##In building our medium and large Vue projects, we mainly introduce how to Use vue-cli to automatically generate the front-end directory and files of our project, understand the concept that everything in Vue is a component and the communication issues of parent-child components, explain how we use third-party plug-ins in the Vue project, and finally use webpack to package and deploy us s project.

vue-cli build

Before using vue-cli we need to install node.js and use the npm command it provides to install vue-cli. To install node.js, you only need to go to its official website to download the software and install it. The address is: https://nodejs.org/en/

After the installation is completed, we open the cmd command line tool of the computer and enter the above picture in sequence. Commands in:

(1) npm install -g vue-cli: Install vue-cli globally

(2) vue init webpack my-project: Use vue-cli to generate a webpack-based project at the directory address The Vue project file and directory named 'my-project'
(3) cd my-project: Open the folder just created
(4) npm intall: Install the package files that the project depends on
(5) npm run dev: Use the local node server to open and browse the project page in the browser

In this way, our vue project directory based on webpack is built.

Single file component

##In the vue project just built, we will find an App .vue and Hello.vue files, then files ending with the .vue suffix like this are common single-file components in our Vue projects. A single file component contains the html, js, and css of a function or module. In the .vue file, we can write html in the template tag, js in the script tag, and css in the style tag. Such a function or module is a .vue component, which is also very convenient for component sharing and later maintenance.

Parent-child component communication

So like this in the development of projects with single-file components as the core , we will definitely think of a question, that is, how do vue parent and child components exchange data to achieve communication? Props are provided in Vue2.0 to enable parent components to pass data to child components, and $emit is used to enable child components to pass data to parent components. Of course, if it is a more complex and common data interaction, it is recommended that you use vuex to manage the data uniformly. For details, please see: https://vuefe.cn/guide/components.html#Use Props to pass data

Plug-in usage

Next we will introduce how we use plug-ins in webpack-based vue projects. There are two main situations:

(1) Global use

(1) Introduced in index.html: This method is not recommended because there is a problem with the loading order, and some plug-ins do not support this method.
(2) Introduction through webpack configuration file: Mainly implemented through the webpack.ProvidePlugin() method of the plugin configuration item, but it is only suitable for plugins that support the CommonJs specification and provide a global variable, such as in jQuery $.
(3) Introduction through import + Vue.use(): This method requires importing the plug-in that needs to be loaded in the global .vue file, and then implementing it through Vue.use('plug-in variable name'), but this method Only plug-ins that follow Vue.js plug-in writing specifications are supported, such as vue-resourece.

(2) Single file use

(1) Direct introduction through import: This method can be used in .vue files that need to call plug-ins, but you need to pay attention to the order of creation of instances. , or it can also be introduced through require.

(2) import + components registration: This method is the way of using Vue components. You can register and use a sub-component in a component.

Deployment and Optimization

After we have completed the front-end coding phase of the entire Vue project, we need to The main ways to deploy and optimize our front-end project files are as follows:

(1) Use webpack's DefinePlugin to specify the production environment: Through the DefinePlugin configuration in the plugin, we can declare 'process.env ' attribute is 'development' (development environment) or 'production' (production environment). It is very convenient to switch the environment mode by combining the scripts command in the npm configuration file package.json.

(2) Use UglifyJs to automatically delete warning statements in code blocks: Generally used in the webpack configuration file of the production environment, configured through new webpack.optimize.UglifyJsPlugin(), deleting warning statements can reduce the file size volume of.

(3) Use Webpack hash to process cache: When we need to modify a file published online, if the recompiled file name is the same as the previous version, the browser will not recognize it and load the cache file. The problem. In this way we need to automatically generate file names with hash values ​​to prevent caching. For details, see: https://segmentfault.com/a/1190000006178770#articleHeader7

(4) Use v-if to reduce unnecessary component loading: The v-if instruction is actually very useful, it can make our project Components that are not needed temporarily will not be rendered and will be rendered when they are needed, such as a pop-up window component, etc. This way we can reduce the first load time and file size of the page.

In addition to the optimization of the above points, there are many optimization options. Interested children can take a good look at the API documentation of webpack. After all, webpack is very powerful.

Data-driven examples

#Summary

This article is attached with PPT pictures The form of text introduction briefly introduces the knowledge points and development process of Vue.js, and runs the concepts of front-end automation, componentization, and engineering throughout it. It explains Vue.js's "simple but yet simple" concept from shallow to deep. The unique charm of "Elegance without losing elegance, compactness without being too big"

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Using Video.js to implement the H5 live broadcast interface

detailed explanation of the path module of node.js

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