This is my sixth day of the August Genwen Challenge
preface
Hi, everybody, I’m Helu.
Now the front and back end separation technology is more and more popular, many companies of the traditional Jsp project also slowly re-constitute the front and back end separation of the project, although large companies are specialized front-end personnel, but there are a lot of companies are front and back end code separation, but people do not separate. Therefore, as a back-end developer, it is necessary to understand and master certain front-end technology.
This series of articles introduces vue2.X, which requires some basic KNOWLEDGE of HTML, CSS, and JavaScript. If you are also interested in VUE, please come and learn with us
Why do you study Vue?
Now when it comes to the front-end framework, there are no more than three frameworks: Vue, Angular, React. Angular was developed by Google, but is rarely used in China. React is developed by Facebook. It uses a lot of higher-order functions and requires you to be familiar with JAVASCRIPT. Vue was developed by Yuxi Yu from China. It combines the advantages of Angular and React and is widely used by domestic companies. The gradual learning advocated by Vue is smooth and there is no steep learning curve. Moreover, its Chinese document is very perfect, which is conducive to our study.
What is Vue?
Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects.
In a nutshell, Vue is a front-end framework, and it is progressive. So what is an incremental framework?
This means that a front-end project can use one or two features of vue.js or the entire project can use vue.js, which means that you can gradually use all of Vue.
Iii. Features of Vue
1. MVVM model
MVVM is the abbreviation of mode-view-ViewModel. Its core is to provide bidirectional data binding between View and ViewModel. When the data of ViewModel changes, the View will update the data synchronously, and vice versa.
A View is the View layer, the user interface. It is mainly used to show that DOM node Model is an index data Model and a data object related to business logic. It is usually mapped from the database and represents JavaScript object ViewModel here. ViewModel is the middleware connecting views and data.
2. Bidirectional binding
Two-way data binding: When the data changes, the view changes, and when the view changes, the data changes synchronously. The two-way binding of Vue is implemented through Object.defineProperty(), which can define attribute descriptors for objects, thereby hijacking setters and getters for individual attributes, and publishing messages to subscribers when data changes, triggering corresponding listener callbacks.
3. The virtual DOM
In the traditional development model, when using native JS or JQ to manipulate the DOM, the browser will run the process from start to finish from the DOM tree, resulting in significant performance waste and even lag when DOM manipulation is frequent. The virtual DOM does not manipulate the DOM immediately, but stores the updated diff content in a local JS object (the virtual DOM). After the update is completed, the final object is mapped to the real DOM and rendered.
4. Component development
The various modules are broken up into separate components and then data bound. Build interfaces with decoupled, reusable components.
5. The instruction
Through the built-in instructions or custom instructions, according to the change of data to achieve control components, simplify the code.
4. Start using Vue
1. Use Vue for a single page
Create a new HTML page, import vue.js, create a Vue instance, and bind the data to the page element.
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<! -- View layer, template -->
<div id="app">
{{message}}
</div>
<! - 1. Import Vue. Js - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app"./*Model: data */
data: {message:"hello,vue!"}});</script>
</body>
</html>
Copy the codeOpen the HTML page in your browser and display the data successfully.
At this point, open the developer tools, type vm.message= “Hello, World” on the console, and press Enter to see that the content of the page has also changed. As shown in the figure below
In this case, I changed the content of the page without actively manipulating the DOM, thanks to Vue’s data binding capabilities.
2. Create a Vue project
To create a Vue project, you need to install Node.js and the environment configuration. Node.js is the javascript runtime environment. Equivalent to the JDK in Java.
2.1 installation Node. Js
Installation Reference:www.cnblogs.com/zhouyu2017/…After the installation is complete, press win+R on the keyboard, enter CMD, and press Enter. In the CMD window, enter node -v and press Enter to display the version. Node is successfully installed.
2.2 Configuring NPM Environment Variables
The new version of Node.js has built-in NPM, which is installed with node.js when installed. NPM is used to manage node.js dependent packages. It is recommended to set the registry source of NPM as a domestic image, which can greatly improve the installation speed. To install the NPM image of Taobao, enter the command NPM config set registry registry.npm.taobao.org and check whether it is successful, enter the command: NPM config get Registry is successful if it can display the mirror address of Taobao.
2.3 Installing vuE-CLI Scaffolding
Vue provides an official CLI that quickly scaffolding complex single-page applications (spAs). To help you get started quickly on a VUE project, it essentially gives you a set of file structures containing the base dependency libraries that you can install with NPM install. You don’t have to waste time compiling or doing other trivial things, and it doesn’t limit what you can do. (Note: it only needs to be executed during the first installation, in this case vue2, after the first installation, the project will not need to be installed.)
NPM install -g@vue /cli
Enter the command: vue -v If the version number is displayed, it is normal
2.4 Initializing a VUE project
Open the CMD window, go to a file directory, and enter the command: vue init webpack project to initialize the VUE project. Enter related information as prompted.
conclusion
Ok, the above is what we want to talk about today. I believe you have a preliminary understanding of Vue. Let’s get started and start the learning journey of Vue, Gogogo.
Thank you for reading, if there are any shortcomings, please give me more advice, as a programmer, you are welcome to leave your original opinion in the comments section ~