Vue.js Study Notes 1

As one of the hottest and most promising front end frameworks, Vue.js provides a new mindset that helps us quickly build and develop front-end projects. This article is designed to help you know Vue.js, understand the vue.js development process, and further understand how to build a medium-sized front-end project through Vue.js, while doing the appropriate deployment and optimization work.

The article will be introduced in the form of PPT pictures attached text, will not involve the specific code of knowledge points, donuts. Interested students can check the corresponding documents to understand.

Vue.js Introduction

From the introduction we are not difficult to find Vue.js is a lightweight data-driven front-end JS framework, and jquery The biggest difference is that jquery by manipulating the DOM to change the page display, and Vue by manipulating the data to achieve page updates and display. Here's the Vue data-driven conceptual model:

Vue.js is primarily responsible for the Green Cube ViewModel, which binds the DOM listeners and data through viewmodel between the view layer (the DOM layer) and the model layer (the JS logic layer). Bingings two things that are equivalent to a listener.

When the view layer views change, Vue listens to the DOM listeners and changes the model layer's data. Conversely, when the model layer's data changes, it also listens to and changes the view layer's display through data bingings. This enables a two-way data binding function, which is the vue.js data-driven principle.

Vue instance

In an HTML file, we can directly introduce vue.js through the script tag, and then we can write the Vue.js code on the page. We have built an instance of Vue through New Vue (), which can contain options such as hanging elements (EL), Data, templates (template), Methods (methods) and life cycle hooks (created, etc.). Different instance options have different functions, such as:

• (1)El indicates that our Vue needs to manipulate the area under which element, ' #demo ' represents the area below the element with the action ID of the demo.
• (2) data represents the database object of the Vue instance, and the properties of data can respond to changes.
• (3)created represents the step in the creation of the instance lifecycle and calls its methods when the instance has been created.

Vue Common Instructions

In the development of the Vue project, the most we used should be the Vue instructions. With the common instructions provided by Vue, we can take full advantage of the power of VUE data-driven capabilities. Here is a brief introduction to the common directives in the diagram:

• (1)V-text: Used to update the contents of a binding element, similar to the text () method of jquery
• (2)v-html: Used to update HTML content in binding elements, like jquery's HTML () method
• (3)v-if: Used to render elements based on the true and false conditions of the value of an expression, and if P3 is False, p tags are not rendered
• (4)v-show: To display hidden elements based on the true and false conditions of the value of an expression, toggle the Display CSS property of an element
• (5)v-for: Used to traverse the data rendering elements or templates, P6 to [three-to-one] will render 3 p-tags, the contents of which are in turn
• (6)v-on: Used to bind an event on an element, the ShowP3 Click event is bound to the P tag in the figure.

For more Vue instructions You can view the Vue2.0 documentation, address: https://vuefe.cn/api/#指令

Vue.js Technology Stack

We can write the Vue code directly in an HTML page by introducing Vue.js, but this is not a common approach. Because if our project is larger, there will be a lot of pages in the project, Once each page introduces a vue.js or a Vue instance, which is very detrimental to later maintenance and code common, there will be instances where the name conflicts, 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 for automating the creation of catalogs and files for Vue projects.
• (2)Vue-router: Vue provides a front-end routing tool that leverages the page's routing control, Local refresh, and on-demand loading to build a single-page application for separation of front and back ends.
• (3)Vuex: The State management tool provided by Vue for the same purpose of managing the interaction and reuse of the various data in our project, storing the data objects we need to use.
• (4)ES6: New version of JavaScript, abbreviation for ECMASCRIPT6. With ES6 we can simplify our JS code and use the powerful features it provides to quickly implement JS logic.
• (5)NPM: node. JS's package management tool for the same management of packages, plugins, tools, commands, etc. needed in our front-end projects for easy development and maintenance.
• (6)Webpack: A powerful file packaging tool, you can compress our front-end project files in the same package to JS, and can be vue-loader and other loaders to achieve the syntax conversion and loading.
• (7)Babel: A plugin that translates ES6 code into a browser-compatible ES5 code

With these technologies, we can start building our Vue project.

Building Large applications

In building our mid-large Vue project, we mainly describe how to use VUE-CLI to generate the front-end directories and files of our project, understand the concepts of everything in Vue and the communication problems of parent-child components, and explain how we used third-party plugins in Vue projects. Finally, we use Webpack to package and deploy our projects.

VUE-CLI Construction

Before using VUE-CLI we need to install node. js and use the NPM command it provides to install VUE-CLI. Install node. js just go to its official website to download the software and install it, Address:https://nodejs.org/en/
After the installation is complete, we turn on the CMD command line tool in the computer and enter the command in turn:

• (1)npm install-g vue-cli: Global Installation Vue-cli
• (2)vue init webpack my-project: Using VUE-CLI to generate a Webpack-based Vue project file and directory named ' My-project ' at the directory address
• (3)CD My-project: Open the folder you just created
• (4)NPM intall: Package files on which the installation project depends
• (5)npm run dev: Open and browse the project page in a browser using the local node server

This allows one of our Webpack-based Vue project catalogs to be built.

Single-File component

In the just-built Vue project, we'll find a App.vue and Hello.vue file, so a file like this ending with the. Vue suffix is a common single-file component in our Vue project. The single-file component contains HTML, JS, and CSS for a feature or module. In the. vue file, we can write HTML in the template tag, write JS in the script tag, and write CSS in the Style tab. Such a function or module is a. Vue component, which is also very convenient for component public and later maintenance.

Parent-Child Component communication

Well, like this. In the development of projects with single-file component as the core, we must think of a problem, that is. How does the Vue Parent-child component Exchange data for communication? Props is provided in Vue2.0 to enable the parent component to pass data to the child component, and $emit to implement the child component to pass data to the parent component. Of course, if it is a more complex and pervasive data interaction, it is recommended that you use VUEX to manage the same data. For details, see: https://vuefe.cn/guide/components.html# using props to pass data

Plug-in use

Next we describe how we use plug-ins in the Webpack-based Vue project, in two main cases:

(i) Global use

• (1) introduced in index.html : Such a way is not recommended, because there are sequential loading order problems, some plug-ins do not support this way.
• (2) through Webpack configuration file Introduction : Mainly through the plugin configuration item Webpack. The Provideplugin () method is implemented, but only for plug-ins that support the COMMONJS specification and provide a global variable, such as $ in jquery.
• (3) introduced via import + Vue.use () : This method needs to import the plugin that needs to be loaded in the global. Vue file, and then it is implemented by Vue.use (' plugin variable name '). However, this method only supports plugins that follow the Vue.js plug-in code, such as Vue-resourece.

(b) Single-File use

• (1) importing directly via import : This can be used in. vue files that need to call the plug-in, but you need to be aware of the order in which the instances are created, or you can introduce them through require.
• (2)Import + Components Registration : This is how the Vue component is used, and can be registered in one component and use a subcomponent.

Deployment and optimization

As we take care of the front-end coding phase of the entire Vue project, we need to deploy and optimize our front-end project files in several ways:

• (1) Specify the production environment using the Webpack Defineplugin : With the Defineplugin configuration in the plugin, we can declare that the ' process.env ' attribute is ' development ' (development environment) or ' production ' (production environment), it is convenient to switch the environment mode with the scripts command in NPM configuration file Package.json.
• (2) use UGLIFYJS to automatically delete warning statements within a code block : typically used in the Webpack configuration file of a production environment, configured with new Webpack.optimize.UglifyJsPlugin (), Deleting a warning statement can reduce the volume of the file.
• (3) using Webpack hash processing cache : When we need to make changes to the files published to the line, the recompiled file name if the same as the previous version will cause the browser to be unable to recognize the problem of loading the cache files. This way we need to automatically generate filenames with hash values to block the cache. See:https://segmentfault.com/a/1190000006178770#articleheader7
• (4) use V-IF to reduce unnecessary component loading : The v-if directive is useful in that it allows components that are temporarily unwanted in our project to be rendered without rendering, and so on when needed, such as a pop-up window component. This allows us to reduce the time and file volume of the first load of the page.

In addition to the above points of optimization, there are many optimization options, interested in children's shoes can have a good understanding of the next Webpack API documentation, after all, Webpack's function is very powerful.

Data-driven instances

This is my previous use of vue.js data-driven principles of a jigsaw puzzle game, I hope that you can learn more about the Vue data-driven concept.

Demo Address: Puzzle games

Code Address: Puzzle Code

Summarize

This paper introduces the vue.js's knowledge point and development process in the form of the additional text introduction of PPT picture, and the concept of front-end automation, component-based and engineering is penetrated, and the unique charm of vue.js "simple but elegant, small but not big carpenter" is expounded.

Transferred from: https://zhuanlan.zhihu.com/p/24040371

Vue.js Study Notes 1