Video tutorial
Since you can't insert the video, please move on. https://www.henrongyi.top
What is VUE?
VUE is a progressive framework for building user interfaces. VUE is not really a mvvm framework, but rather a data-driven framework. So before we learn VUE, whether you are a traditional JS developer or a back-end developer, we need to transform our thinking. In VUE, data is everything, everything you see is data.
Introduction to VUE Foundation
In our daily development, we often use VUE-CLI scaffolding to build VUE projects, but if we learn VUE, it's better not to use scaffolding directly. This will make it more difficult for you to upgrade VUE. Now we use the traditional method of introducing js to start the explanation of VUE.
Start HelloWord
International practice, before learning a new thing, we must first start a HelloWord, here we first introduce vue js file from the official website.
<! - The development environment version contains helpful command line warnings - >. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! - Production environment version, optimized size and speed - > <script src="https://cdn.jsdelivr.net/npm/vue"></script>
These two JS files correspond to our different environments. In the learning process, we will choose the above JS files to learn.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:'Hello Word' } }) </script> </body> </html>
In this way, we write Hello Word in VUE.
Core Basic Template Syntax Data Binding
In the code above, we used something like {message}, what is this? We call these two braces interpolation expressions, which can be simple JS expressions, where {message} is replaced by message data. Let's next give an example of a simple JS expression.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{message}} {{1 + 1}} {{isTrue?"Really?":"false"}} {{message.split('').reverse().join('')}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:'Hello Word', isTrue:true, } }) </script> </body> </html>
As you can see, these JS expressions in interpolation expressions directly return the results of running. It is worth mentioning that the rules in difference expressions are similar to those in script tags.
Next is the essence of VUE, two-way data binding.
v-model is an important instruction in vue for bidirectional data binding. It's important to note that v-model can only be used in form elements. And v-model binds value in dom to data in vue instance. The changes of the two will affect each other.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input v-model="message" placeholder="I am v-model Binding data"></input> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:'Hello Word', isTrue:true, } }) </script> </body> </html>
In the above code, when we change the value value in input, we find that the message data is also changing at the same time.
Common instruction v-if v-show v-for
v-if v-else renders elements according to the true or false conditions of the value of the expression. V-show and v-if are similar, but v-show renders the DOM but hides it, while v-if does not render the dom. When the conditions are met, the DOM will appear.
In our daily development, we often want to hide something and only render it under certain conditions. Here we give an example to simulate the administrator's rights.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input v-model="message" placeholder="I am v-model Binding data"></input> <div v-if="message=='admin'">So you are a respectable administrator!</div> </div> <div v-else>Tell me who you are.</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:'Hello Word' } }) </script> </body> </html>
v-for, as its name implies, is a cycle, which renders what we need.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(key,item) in list" :key="key">{{item.name}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ list:[{name:"wonderful"},{name:"Qi Miao"},{name:"QM"}] } }) </script> </body> </html>
So we rendered a list by v-for.
Data binding and event binding
v-bind data binding
v-bind is what we call data binding. What if we want to use the data in our data in the tag? It can be achieved by v-bin. Let's look at an example. v-bind:xxxx can be abbreviated as: xxxx
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <div v-bind:class="myClass"> I am v-bind Impact data </div> <div :style="bindColor"> I am v-bind Impact data </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ myClass:'active', bindColor:{ color:'red' } } }) </script> </body> </html>
v-on event binding
We can bind events by v-on, which can also be abbreviated as @, and we need to mention where events are registered in the VUE example. Method We all write in this, nonsense, code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add(){ this.num++ }, minus(){ this.num-- } } }) </script> </body> </html>
summary
Now these are the simplest instructions in VUE. Learn them, you can basically write simple VUE pages, but there is still a long way to go before you can really use them in your work. This is the first step of VUE. After watching the video, you will be familiar with API and knock on the code. I wish you to enter the ranks of advanced front-end as soon as possible.