• vue学习（基础1）

    【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

            vue学习有很多的方法。一是找一份教程，从0开始学习；另外一种就是找一份视频，跟着视频一步一步去做。个人觉得第二种方法是比较好的。因为对于大部分人来说，学习新东西的热情是很容易被消磨掉的。如果在学习的过程当中，无法短时间看到效果，那么这份积极性可能一会就没了。看视频则不一样，很多视频都是以动手实践的内容为主，只要跟着up主一步一步去做，马上就可以看到效果。

            b站上面有很多的参考视频，选择一份自己比较喜欢的、跟得上的即可。这里推荐一个可以帮助我们快速了解和掌握vue.js的学习视频，地址在这，https://www.bilibili.com/video/BV1rb4y1S7Lg。下面实例中的一部分代码也是来自于这个视频。

    1、第一个vue程序

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    7. 		<title> 第一个vue应用程序 </title>
    8. 	</head>
    9. 	
    10. 	<body>
    11. 		<div id="app">
    12. 			<p>{{message}} </p>
    13. 		</div>
    14. 		
    15. 		<script>
    16. 			var app = new Vue({
    17. 				el:"#app",
    18. 				data:{
    19. 					message:"Hello Vue!",
    20. 				}
    21. 			})
    22. 		</script>
    23. 	</body>
    24.  
    25. </html>
    26.  
    27.

            这是完整的一个网页。首先在header中引用了vue.min.js这个文件。其次增加一个id为app的div块，后面script中的vue也会和这个div绑定在一起。最后定义了一个message数据，只要对message做出了修改，上面的显示部分就会同步做出修改。

    2、v-if命令

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    7. 		<title> v-if程序 </title>
    8. 	</head>
    9. 	
    10. 	<body>
    11. 		<div id="app">
    12. 			<h1 v-if="status"> This is yes </h1>
    13. 			<h1 v-else> This is no</h1>
    14. 		</div>
    15. 		
    16. 		<script>
    17. 			var app = new Vue({
    18. 				el:"#app",
    19. 				data:{
    20. 					status:false,
    21. 				}
    22. 			})
    23. 		</script>
    24. 	</body>
    25.  
    26. </html>

            v-if是非常有用的一个命令。整个程序的显示内容取决于vue中的status数据，如果status为真，那么显示的内容是This is yes，反之显示的内容是This is no。

    3、v-for命令

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    7. 		<title> v-for程序 </title>
    8. 	</head>
    9. 	
    10. 	<body>
    11. 		<div id="app">
    12. 			<li v-for="city in cities">
    13. 				{{city}}
    14. 			</li>
    15. 		</div>
    16. 		
    17. 		<script>
    18. 			var app = new Vue({
    19. 				el:"#app",
    20. 				data:{
    21. 					cities: [
    22. 						'beijing','shanghai','nanjing'
    23. 					]
    24. 				}
    25. 			})
    26. 		</script>
    27. 	</body>
    28.  
    29. </html>
    30.  
    31.

            v-for命令主要是将vue中的数据循环显示出来。如上面代码所示，显示的内容是city。city本身又来自于vue中的cities，所以这里的v-for就是一个对cities中的内容进行循环打印的过程。

    4、button按钮事件

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    7. 		<title> event程序 </title>
    8. 	</head>
    9. 	
    10. 	<body>
    11. 		<div id="app">
    12. 			<button v-on:click="handle_button">click_me</button>
    13. 		</div>
    14. 		
    15. 		<script>
    16. 			var app = new Vue({
    17. 				el:"#app",
    18. 				data:{
    19. 					name:'vue.js'
    20. 				},
    21. 				methods:{
    22. 					handle_button:function(event){
    23. 						alert('Hello ' + this.name +'!')
    24.  
    25. 						/*if(event){
    26. 							alert(event.target.tagName)
    27. 						}*/
    28. 					}
    29. 				}
    30. 			})
    31. 		</script>
    32. 	</body>
    33.  
    34. </html>
    35.

            在vue程序中，对于按钮事件的响应和处理有它自己的一套想法。如上图所示，这里定义了一个button，响应的函数为handle_button。那么这个函数其实是挂在vue的methods下面。当然这了为了简单，只是添加了一个alert打印，实际项目处理的时候，可以根据实际需要添加对应的语句。

    5、axios程序

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    7. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    8. 		<title> axios程序 </title>
    9. 	</head>
    10. 	
    11. 	<body>
    12. 		<div id="app">
    13. 			<div>
    14. 				名称:{{info.name}}
    15. 			</div>
    16. 			<div>
    17. 				url:{{info.url}}
    18. 			</div>
    19. 		</div>
    20. 		
    21. 		<script>
    22. 			var app = new Vue({
    23. 				el:"#app",
    24. 				data(){
    25. 					return {
    26. 						info: {
    27. 							name:'',
    28. 							url:''
    29. 						}
    30. 					}
    31. 				},
    32. 				mounted() {
    33. 					axios
    34. 						.get('data.json')
    35. 						.then(response=> {
    36. 							this.info = response.data
    37. 							console.log(this.info)
    38. 							console.log(response.data)
    39. 							
    40. 					})
    41. 				}
    42. 			})
    43. 		</script>
    44. 	</body>
    45.  
    46. </html>
    47.  
    48.

            另外，涉及到的data.json如下所示，

    1. {
    2. 	"name":"test_data",
    3. 	"url":"http://www.test_url.com"
    4. }

            和jquery中的ajax实现前后台交互一样，vue中用axios来实现前后台数据的交互。当然这里为了实现方便，就在本地用data.json做了替代。不过和上面1-5的程序有所不同，除了header中添加了axios.min.js文件外，这个html想要运行起来，不能直接用chrome打开网页，而是应该使能iis，将网页命名为index.html，同时将data.json拷贝到对应的目录下，创建一个iis网站，修改目录权限。在所有的这一切都ok之后，输入http://127.0.0.1:8080就可以看到对应的显示内容了。

  • 相关阅读:
    面对无限“续杯”的会议？项目经理怎么应对
    2024 年的 13 个 AI 趋势
    MySQL高级：函数（一）系统函数
    计算机毕业设计ssm儿童成长记录与分享系统cc35g系统+程序+源码+lw+远程部署
    解压主播狂揽4000w+播放，快手美食赛道又添新风向？
    对自动化测试的一些展望与理解
    libigl 网格harmonic参数化
    [附源码]Python计算机毕业设计Django基于VUE的网上订餐系统
    【爬虫+情感判定+Top10高频词+词云图】“刘畊宏“热门弹幕python舆情分析
    煤炭行业数据库-煤炭价格、消耗量、发电量&分省市民用电、工业用电数据
  • 原文地址：https://blog.csdn.net/feixiaoxing/article/details/126883177