• Vue系列之入门篇

    前言：

                                                    目录

    一，关于Vue的简介

    1.什么是Vue？

    2.使用Vue框架的好处？

    3. 库和框架的区别：

    4. MVVM的介绍

    5.Vue的入门案例

    二，Vue的生命周期

    一，关于Vue的简介

    1.什么是Vue？

    Vue是一个构建用户界面(UI)的渐进式JavaScript框架

    2.使用Vue框架的好处？

    1. 简单易学：Vue的API设计简洁，易于理解和上手。它采用了模板语法，使得开发者可以更加直观地描述页面的结构和逻辑。

    2. 组件化开发：Vue将页面拆分为独立的组件，每个组件都有自己的状态和行为，方便组织和复用代码。组件化开发可以提高开发效率，同时也使得代码更加可维护和可测试。

    3. 响应式数据绑定：Vue使用双向绑定的方式来处理数据和视图之间的同步，只需简单地绑定数据到视图，当数据发生变化时，视图会自动更新。这大大减少了手动处理DOM的工作量，提高了开发效率。

    4. 轻量高效：Vue的体积小，加载速度快，同时也具有出色的性能，能够高效地处理大规模的应用程序。

    5. 生态丰富：Vue拥有庞大的社区和生态系统，有大量的第三方插件和组件可以使用。这些插件和组件可以帮助开发者快速构建复杂的功能，节省开发时间。

    总而言之，Vue框架具有简单易学、组件化开发、响应式数据绑定、轻量高效和丰富的生态等优点，使得它成为一种非常流行的前端框架。

    3. 库和框架的区别：

      2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

          代表：jQuery

          jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

      2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

          代表：vue

          框架规定了自己的编程方式，是一套完整的解决方案

          使用框架的时候，由框架控制一切，我们只需要按照规则写代码

          框架的侵入性很高(从头到尾)

    4. MVVM的介绍

        MVVM是Model-View-ViewModel的缩写。是一种软件架构设计模式。它是一种简化用户界面的事件驱动编程方式，它是不允许数据和视图直接通信的，只能通过ViewModel来通信 ，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

    相比较于mvc更加便捷。  在MVVM模式中，Model是数据层，用于存储数据和对数据进行增删改查；View是视图层，也就是UI界面，用于将数据模型转化成UI展现出来；ViewModel是一个同步View和Model的对象，它负责处理用户的交互事件，以及将用户的操作传递给Model进行相应的处理，最后将处理结果返回给View进行展示
     

    5.Vue的入门案例

    5.1基本使用：通过vue的方式显示到浏览器：

    第一步：使用开发工具Hbuilderx

    下载地址：

    HBuilderX-高效极客技巧 (dcloud.io)

    第二步：正常创建html项目

    第三步：导入vue的在线资源：

    这里导入的是以vue.js后缀的，高级版本的资源可能没有。

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>

    这个网站不仅仅有vue的在线资源，还有jQuery，bootstrap...

    vue (v3.3.4) - Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务icon-default.png?t=N7T8https://www.bootcdn.cn/vue/

    第四步：这一步就是开始写代码了。

    案例一，入门使用vue的语法写一个显示到浏览器

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<style type="text/css">
    9. 		#app{
    10. 			background-image: 
    11. 			-webkit-linear-gradient(
    12. 			0deg,
    13. 			yellow,
    14. 			red 10%,
    15. 			green
    16. 			);
    17. 			-webkit-background-clip: text;
    18. 			color: transparent;
    19. 		}
    20. 	style>
    21. 	<body>
    22. 		
    23. 		<div id="app">
    24. 			{{msg}}
    25. 		div>
    26. 		
    27. 		
    28. 		<script type="text/javascript">
    29. 			new Vue({
    30. 				el:"#app",//类似id选择器找到vue的div
    31. 					data(){
    32. 						return {msg:'输入内容，vue会显示!'}//json数据
    33. 					}
    34. 			})
    35. 			
    36. 		script>
    37. 	body>
    38. 	
    39.  
    40. html>

    效果：

    案例二：实现点击显示

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
    6. 	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    7. 		<title></title>
    8. 	</head>
    9. 	<style type="text/css">
    10. 		#app{
    11. 			background-image: 
    12. 			-webkit-linear-gradient(
    13. 			0deg,
    14. 			yellow,
    15. 			red 10%,
    16. 			green
    17. 			);
    18. 			-webkit-background-clip: text;
    19. 			color: transparent;
    20. 		}
    21. 	</style>
    22. 	<body>
    23. 		<!-- vue管理的边界，只有一个节点==》一个div-->
    24. 		<div id="app">
    25. 			{{msg}}
    26. 			<span id="show"></span>
    27. 			<input id="tancontent" type="text" />
    28. 			<button type="button" onclick="tan()">点击弹出</button>
    29. 		</div>
    30. 		
    31. 		<!-- 类似我们学过的jQuery方式，但vue比jQuery方便 -->
    32. 		<script type="text/javascript">
    33. 			new Vue({
    34. 				el:"#app",//类似id选择器找到vue的div
    35. 					data(){
    36. 						return {msg:'输入内容，vue会显示!'}//json数据
    37. 					}
    38. 			})
    39. 			
    40. 			function tan(){
    41. 				var tancontent = $("#tancontent").val();//获取id为tancontent文本
    42. 				$("#show").text(tancontent);//为id为show赋值
    43. 				
    44. 			}
    45. 		</script>
    46. 	</body>
    47. 	
    48.  
    49. </html>

    案例三：实现输入显示

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
    6. 	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    7. 		<title></title>
    8. 	</head>
    9. 	<style type="text/css">
    10. 		#app{
    11. 			background-image: 
    12. 			-webkit-linear-gradient(
    13. 			0deg,
    14. 			yellow,
    15. 			red 10%,
    16. 			green
    17. 			);
    18. 			-webkit-background-clip: text;
    19. 			color: transparent;
    20. 		}
    21. 	</style>
    22. 	<body>
    23. 		<!-- vue管理的边界，只有一个节点==》一个div-->
    24. 		<div id="app">
    25. 			{{msg}}
    26. 			<input v-model="msg">
    27. 			<span id="show"></span>
    28. 			<input id="tancontent" type="text" />
    29. 			<!-- <button type="button" onclick="tan()">点击弹出</button> -->
    30. 		</div>
    31. 		
    32. 		<!-- 类似我们学过的jQuery方式，但vue比jQuery方便 -->
    33. 		<script type="text/javascript">
    34. 			new Vue({
    35. 				el:"#app",//类似id选择器找到vue的div
    36. 					data(){
    37. 						return {msg:'输入内容，vue会显示!'}//json数据
    38. 					}
    39. 			})
    40. 			
    41. 			function tan(){
    42. 				var tancontent = $("#tancontent").val();//获取id为tancontent文本
    43. 				$("#show").text(tancontent);//为id为show赋值
    44. 				
    45. 			}
    46. 		</script>
    47. 	</body>
    48. 	
    49.  
    50. </html>

    案例四：实现弹窗效果

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
    6. 	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    7. 		<title></title>
    8. 	</head>
    9. 	<style type="text/css">
    10. 		#app{
    11. 			background-image: 
    12. 			-webkit-linear-gradient(
    13. 			0deg,
    14. 			yellow,
    15. 			red 10%,
    16. 			green
    17. 			);
    18. 			-webkit-background-clip: text;
    19. 			color: transparent;
    20. 		}
    21. 	</style>
    22. 	<body>
    23. 		<!-- vue管理的边界，只有一个节点==》一个div-->
    24. 		<div id="app">
    25. 			{{msg}}
    26. 			<!-- <input v-model="msg"> -->
    27. 			<span id="show"></span>
    28. 			<input id="tancontent" type="text" />
    29. 			<button v-on:click="tan()">点击弹出</button>
    30. 		</div>
    31. 		
    32. 		<!-- 类似我们学过的jQuery方式，但vue比jQuery方便 -->
    33. 		<script type="text/javascript">
    34. 			new Vue({
    35. 				el:"#app",//类似id选择器找到vue的div
    36. 					data(){
    37. 						return {msg:'输入内容，vue会显示!'};//json数据
    38. 					},
    39. 			methods:{
    40. 				tan(){
    41. 					alert(this.msg);
    42. 				}
    43. 			}
    44. 			})
    45. 		</script>
    46. 	</body>
    47. 	
    48.  
    49. </html>

    以上使用到vue中有的：v-model

            在Vue中，v-model是一个指令用于在表单控件元素上创建双向数据绑定。

    二，Vue的生命周期

    Vue组件具有生命周期钩子函数，它们允许开发者在不同阶段插入自定义代码。以下是Vue的生命周期及其用途：

    1. beforeCreate：在实例刚创建之前被调用。在这个阶段，组件的数据和方法都还未初始化。

    2. created：在实例创建后立即被调用。可以在这个阶段进行一些初始的数据处理、异步请求等操作，但尚未进行DOM渲染。

    3. beforeMount：在挂载开始之前被调用。此时，组件的模板已经编译完成，但尚未渲染到页面。

    4. mounted：在挂载完成后被调用。此时，组件已经被渲染到页面中，并且可以操作DOM。

    5. beforeUpdate：在组件更新之前被调用，即在数据发生改变时。可以在此阶段进行一些准备工作。

    6. updated：在组件更新完成后被调用。此时组件的数据已经被更新，DOM也已重新渲染。

    7. beforeDestroy：在组件销毁之前被调用。可以在此阶段进行一些清理工作，如清除计时器、取消订阅等。

    8. destroyed：在组件销毁后被调用。此时，组件已经被销毁，数据和方法都不可用。

     

    三，总结：

    对于初学的程序员要注意的点：

    1. 理解核心概念：在开始学习Vue之前，确保你对Vue的核心概念有一个清晰的理解，例如组件、模板、指令、数据绑定等。这将为你打下坚实的基础，帮助你更好地理解和运用Vue的各种功能。

    2. 实践驱动学习：Vue是一门实践性很强的技术，只有通过实际的练习来加深理解和熟练运用。尝试使用Vue构建一些简单的项目或小组件，通过实际的实践来巩固所学的知识。

    3. 深入学习官方文档：Vue官方提供了详细的文档，是学习Vue的重要资源。仔细阅读并理解文档中的示例代码和解释，可以帮助你更好地理解Vue的工作原理和用法。

    4. 学习Vue的生态系统：Vue有一个庞大的社区和生态系统，里面有许多有用的第三方库、插件和组件，可以帮助你更高效地开发。花时间了解并学习这些工具和库的使用，将会对你的学习和开发产生积极的影响。

    5. 参与社区交流：加入Vue的社区，参与讨论、提问和回答问题。与其他开发者交流经验和思路，会使你快速成长，并且获取宝贵的帮助和支持。

    6. 不断扩展学习：Vue是一个不断发展和更新的技术，保持对新特性和最佳实践的关注是很重要的。持续学习和不断扩展你的Vue知识，将使你在实际开发中更加得心应手。

  • 相关阅读:
    Harmony mac在DevEco-Studio终端中输入hdc shell命令报错，找不到文件或路径处理方式
    在Espressif-IDE中使用Wokwi仿真ESP32
    npm运行报错：无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本问题解决
    计算圆的周长和面积——python
    超详细SpringMVC 之 JSR303与拦截器
    SpringMVC_第1章
    轻松玩转Windows系统自带远程桌面及如何处理“出现了内部错误““0x4““0x7“等错误提示
    【owt-server】内部传输机制3 ：基础：TransportSession、TransportMessage和 TransportData
    Edge浏览器中常用的20个快捷键
    各种API技术的使用场景
  • 原文地址：https://blog.csdn.net/m0_73647713/article/details/132922471