 |
|
Step 2 : JS The way Step 3 : js The problem of way Step 4 : VUE The way Step 5 : vue More usage of Step 6 : edition
What is? Vue？
Consider this need ： We're going to put one json Object data , Display on an element . If not Vue, Then you'll use JS Or JQuery, By operating HTML DOM The way , Show the data . If used Vue, Then you just need to provide data , And the element to which the data is bound id, Just , There is no need to operate explicitly HTML DOM. The following code is used to represent these two methods , By comparison , I knew Vue What did you do .
1. First prepare a div Element , It's actually a view
2. Then in js Prepare a... In the code json data . yes json Students who don't know , Please learn json course 3. Then pass Native js obtain div Corresponding html dom yes html dom Students who don't know , Please learn html dom course 4 4. Finally, put json Data assignment html dom, It leads to div Display in The name of the hero
<div id="div1"> </div> <script> // Prepare data var gareen = {"name":" Galen ","hp":616}; // obtain html dom var div1 = document.getElementById("div1"); // Display data div1.innerHTML= gareen.name; </script>
<div id="div1">
</div>
<script>
// Prepare data
var gareen = {"name":" Galen ","hp":616};
// obtain html dom
var div1 = document.getElementById("div1");
// Display data
div1.innerHTML= gareen.name;
</script>
js Is there a problem with the way ？ no problem . But keen students will realize , html dom It's just a means , What we really want , It's data , Show on element .
and vue.js Is used to solve this problem . Now look at vue.js What you do .
1. First import vue.js Library to be used ： vue.min.js. I put this library on the website , Students who practice by themselves , You can download one from the top right corner , Convenient for your local use .
<script src="http://inotgo.com/study/vue.min.js"></script> 2. Also prepare a div Element , Its id yes div1. 3. stay js Prepare for json data gareen 4. Create a Vue Object . this Vue The object takes the data gareen and view div1 Connected new Vue({ el: '#div1', data: { message: gareen } }) 5. In view div In , You can get the data in the following ways . {{gareen.name}} This way html dom It's transparent to developers .
<script src="/study/vue.min.js"></script> <div id="div1"> {{gareen.name}} </div> <script> // Prepare data var gareen = {"name":" Galen ","hp":616}; // Through vue.js Associate the data with the corresponding view new Vue({ el: '#div1', data: { message: gareen } }) </script>
of course vue.js It's not just that , Then we will gradually put vue.js All the practices are carried out , Its function is still very powerful .
book Vue.js The version used in the series of tutorials is ：Vue.js v2.5.16
The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .
Q & A area
2021-09-17
use gareen.name Just report an error , Change to message.name To show
2 One answer
Shadow chasing sound Jump to the problem location Answer time ：2021-09-30
Because you wrote {{}} Grammar ,gareen.name The error is because he doesn't know gareen, Even if you var Yes gareen,message.name or message Can be displayed normally
Deceive smoke and trap rain Jump to the problem location Answer time ：2021-09-20
Don't write so much script, All in body in
The answer has been submitted successfully , Auditing . Please
My answer Check the answer record at , thank you
2021-05-31
message What role does it play here
4 One answer
Love to eat little rabbits _ Jump to the problem location Answer time ：2021-10-27
Not on data It can also be displayed on the page .
The last ripple Jump to the problem location Answer time ：2021-09-10
Facilitate dynamic binding , You can also build another hero, Then put hero Bind to message All right .
Buzzczars Jump to the problem location Answer time ：2021-08-25
In this way, I immediately understand a lot , Hey, hey, hey
Sleepless sky Jump to the problem location Answer time ：2021-07-04
Quite flexible , Indeed, there can be no
The answer has been submitted successfully , Auditing . Please
My answer Check the answer record at , thank you
2020-10-30
el：element
2020-07-19
I have to write here message The result is
2020-06-02
<script> The code block is written to body It will display normally in the , Write head It doesn't show in the
Too many questions , Page rendering is too slow , To speed up rendering , Only a few questions are displayed on this page at most . also 19 Previous questions , please Click to view
Please... Before asking questions land
The question has been submitted successfully , Auditing . Please
My question Check the question record at , thank you
|
|||||||||||||||||
