inotgo.com

Download area
File name File size
vue.min.js 84k
Step 1 : What is? Vue   
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
Operation effect
<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>
 


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
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 .
Operation effect
<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>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
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
reganhcf




{{message.name}} To display , use gareen.name Just report an error , What's the difference between the two
<html>
	<head>
		<script src="./vue.js"></script>
		<script>
			var gareen = {"name" :" Galen ","hp":"616"}
		</script>
	</head>
	<body>
		<div id="app">
			<p>{{message.name}}</p>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					message: gareen
				}
			})
		</script>
	</body>
</html>
 
               


2 One answer

Shadow chasing sound
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
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
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see





2021-05-31 message What role does it play here
qugengting

You can change it to another name , Remove message: gareen Only gareen it's fine too ... What do you want it for




4 One answer

Love to eat little rabbits _
Answer time :2021-10-27
Not on data It can also be displayed on the page .

The last ripple
Answer time :2021-09-10
Facilitate dynamic binding , You can also build another hero, Then put hero Bind to message All right .

Buzzczars
Answer time :2021-08-25
In this way, I immediately understand a lot , Hey, hey, hey

Sleepless sky
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
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




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
about Front end part -Vue.js- Introduction Your questions

Try to provide Screenshot code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845
Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download : /k/helloworld/helloworld-version/1718.html

Upload screenshot