To get started with Vue.js, you first need to learn the most basic knowledge, such as the concept, function, and characteristics of Vue.js. Only by having a rough initial understanding of Vue.js can we understand why it is so important to master it. Let's take a look at what knowledge to learn to get started with Vue.js.js !
1 , Vue.js is doing?
( 1 ) The production of Vue.js
In the current society with the rapid development of the Internet, countless applications appear and disappear every day. A website will frequently change its style due to festivals or other reasons. In order to continue to develop, the user experience of the product is the basic of the basics. If you have opened some web pages with a mobile browser, you will find some differences between web pages and native apps . The advantage of the web page is that it doesn’t need to be installed, it’s easy to use, etc.; the disadvantage is that a blank page will appear when the page is loaded, some animation effects are obviously stuck, and the jump between pages will appear because of the load of the page data. The situation of a short blank page, etc.
In general, comparing web pages with native apps , there is almost only one advantage of not having to install them, and other aspects of user experience are obviously inferior to native apps . In this case, a series of front-end development frameworks such as Vue.js came into being. It can be said that the popularity of front-end frameworks such as Vue.js is inevitable in history. To become an excellent developer, it is necessary to learn front-end development frameworks.
( 2 ) The definition of Vue.js
For those who are just starting to learn, we must first figure out the basic knowledge of Vue.js definition. The official documentation of Vue.js explains that it is a progressive framework for building user interfaces. The emphasis is on " progressive " and " framework " . The so-called progressive type means that Vue.js has many functions, you can use all of them, or only a part of them. Let's talk about the framework. It appoints an area and develops on the basis of the shelf. In other words, the framework has limitations and needs to comply with the framework's own regulations, and the library is a toolbox, which is basically unlimited in use.
2 , Vue.js What are the characteristics and advantages are?
After understanding the basics of Vue.js , let's take a look at the characteristics of Vue.js. One is its small size. Vue.js itself is very small, 33k after compression . In addition, it is more efficient. The two-way binding of data frees developers from manipulating DOM objects. And easy to learn. More friendly for beginners, have a lot more mature and stable, based on the market Vue.js the UI framework and components, used ready to use. Of course, its advantages don't stop there. I hope everyone will experience it slowly after getting started.
3. The first Vue program demonstration
( 1 ) Introducing vue.js The first step when we use Vue is to introduce it first.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- Load via CDN--><script src="./js/vue .js"></script><!-- Or download to local-->
( 2 ) Specify the active area of Vue
When we talk about the frame, it is easy to think of the building structure built by steel bars when building a house. This structure only acts on a fixed range. Vue is the same as a frame. We also need to specify a range of action for it. So our next step is to write in the body tag:
<div id="root"></div><!-- Specify a location to build the frame -->
Our purpose is to specify the active area of Vue in the div whose id is root (the frame should be built in the specified place). In other words, inside this div , you can use the functions of Vue , but it must also comply with Vue 's regulations, and Vue can't control it outside this div .
(3) Create Vue instance
Here comes the point. After the above code, we add a script tag and write:
new Vue({ el:'#root' //This line of code hangs Vue to the above div, note that the css selector is used here))
A brand new instance of Vue was born, and Vue also worked. But since there are no HTML elements and CSS styles written , the result of running now is just a big white screen.
( 4 ) Add HTML elements
HTML<div id="root"> {{text}} <!-- Note that there are two curly braces {} --></div>Jsnew Vue({ el:'#root', data: {text: 'Welcome to the front-end international students' }})
Refresh the page again, and the page appears.
Seeing this, everyone is basically getting started with Vue.js.
Scan the QR code below
Get web front-end, learning material videos
Remarks'Official Account'
