• Vue入门

    目录

    一、Vue简介

    1.1 定义

    1.2 核心思想

    1.3 应用领域及用法

    二、Vue.js

    2.1 简介

    2.2 核心功能

    2.3 特性

    三、MVVM的介绍

    3.1 主要组件

    3.2 特点和优势

    四、Vue入门

    4.1 HelloWorld实现

     4.2 数据弹屏发送

    4.3 v-model的使用(双向绑定)

    4.4 弹窗数据绑定

    4.5 :value的使用(单向绑定)

    五、Vue的生命周期

    一、Vue简介

    1.1 定义

    在Java编程语言中，Vue是一个前端JavaScript框架，用于构建用户界面。它被设计成一个渐进式框架，可以用于构建单页面应用（SPA）或多页面应用（MPA）。Vue提供了丰富的工具和库，使开发者能够通过组件化的方式构建可复用的代码，并且能够灵活地管理应用的状态。

    总的来说，Vue是一种在Java编程语言中使用的前端JavaScript框架，用于构建可复用、响应式的用户界面。它提供了丰富的工具和库，使开发者能够以组件化的方式构建应用程序，并通过声明式的模板语法和响应式系统来简化开发流程。

    1.2 核心思想

    Vue的核心思想是将用户界面抽象为一系列的组件，并以组件化的方式构建应用。以下是Vue的核心思想的几个关键点：

    1. 组件化：Vue将用户界面划分为独立的组件，每个组件具有自己的状态和行为。这种组件化的结构使得应用程序更易于理解、维护和扩展，同时也促进了代码的可复用性。

    2. 声明式渲染：Vue使用基于HTML的模板语法，使开发者可以以声明式的方式描述组件的结构和行为。通过在模板中绑定数据，Vue能够自动追踪数据的变化并更新相应的视图，使开发者可以专注于描述组件的样式和交互，而不必关注底层的DOM操作。

    3. 响应式系统：Vue采用了响应式的数据绑定机制，通过建立数据与视图之间的关联，实现了数据的双向绑定。当数据发生变化时，视图会自动更新，反之亦然。这种响应式的特性让应用程序的状态管理更加简洁和高效。

    4. 虚拟DOM：Vue引入了虚拟DOM的概念，通过在内存中构建虚拟的DOM树，减少了对实际DOM的直接操作。通过对虚拟DOM进行比较，Vue能够高效地计算出最小的DOM变更，并将其应用到实际的DOM上，提高了性能和渲染的效率。

    5. 组件通信：Vue提供了多种通信方式，使组件之间能够方便地进行数据的传递和交互。包括props和events用于父子组件之间的通信，还有Vuex作为全局状态管理库，以及provide和inject等高级通信方式，满足不同场景下组件之间的需求。

    综上所述，Vue的核心思想是以组件化为基础，通过声明式渲染、响应式系统、虚拟DOM和灵活的组件通信方式，使开发者能够以简洁、高效和可维护的方式构建现代化的用户界面应用程序。

    1.3 应用领域及用法

    Vue广泛应用于前端开发的各个领域，从简单的静态页面到复杂的单页面应用程序（SPA），都可以使用Vue来构建。下面是Vue的一些常见应用领域及用法的示例：

    1. 网页开发：Vue可以用于构建各种类型的网页，包括静态网页、多页应用（MPA）和单页面应用（SPA）。通过Vue的组件化思想和模板语法，开发者可以更高效地创建交互性、动态且可维护的网页。

    2. 移动应用开发：Vue可以与配套的移动开发框架（如Vue Native、Weex）结合使用，用于开发跨平台的移动应用。这些框架允许开发者使用Vue的语法和组件模型来构建原生移动应用，同时兼顾开发效率和性能。

    3. 桌面应用开发：借助Electron等桌面应用开发环境，Vue也可以用于构建桌面应用程序。将Vue与底层的Node.js和Chromium结合，开发者可以使用Web技术构建跨平台的桌面应用程序。

    4. 后台管理系统：Vue在开发后台管理系统方面非常流行。Vue的组件化和响应式系统使得开发者能够快速搭建复杂的管理界面，并实现数据的展示、交互和状态管理等功能。同时，Vue生态系统中丰富的第三方库和组件库，如Element UI、Ant Design Vue等，为后台管理系统的开发提供了丰富的解决方案。

    5. 嵌入式应用：Vue可以应用于嵌入式领域，用于构建嵌入式的用户界面。例如，在物联网（IoT）设备、智能家居系统或嵌入式控制面板中，开发者可以使用Vue来开发用户界面，监控设备状态和实现用户交互等功能。

    补充说明的是，Vue作为前端框架，主要关注于用户界面的构建和交互，多与后端服务进行数据交互。在实际应用中，Vue通常与其他工具和库（如Vue Router、Vuex、Axios等）结合使用，以满足不同场景的需求。

    无论是简单的静态页面还是复杂的应用程序，Vue都提供了灵活的工具和库，支持开发者构建高质量、可维护的前端应用。

    二、Vue.js

    2.1 简介

    Vue.js是一个流行的JavaScript前端框架，用于构建用户界面。它是一个开源项目，由尤雨溪（Evan You）于2014年创建并维护。Vue.js旨在简化Web应用程序开发，通过提供一套灵活的工具和库，帮助开发者构建交互性强、高性能的单页面应用（SPA）和可复用组件。

    Vue.js采用了基于组件的开发模式，将应用程序拆分为多个可复用的组件，每个组件负责管理自己的视图、逻辑和状态。这种组件化开发的方式提高了代码的可维护性和可复用性，并且使得团队协作更加高效。

    Vue.js具有许多重要特性，包括响应式数据绑定、虚拟DOM、模板语法、计算属性、指令等。它还提供了丰富的生态系统，涵盖了路由管理、状态管理、构建工具等方面的库和插件，使得开发者可以根据项目需求进行选择和扩展。

    总的来说，Vue.js是一个简洁、易学、灵活和高性能的前端框架，广泛应用于构建现代化的Web应用程序，无论是个人项目还是大型企业应用都能受益于它的优势。

    2.2 核心功能

    Vue.js的核心功能主要包括以下几个方面：

    1. 响应式数据绑定：Vue.js提供了一个响应式的数据绑定系统，可以将数据与视图进行关联。当数据发生变化时，视图会自动更新，反之亦然。这使得开发者可以轻松地管理和更新应用程序的状态，而无需手动操作DOM。

    2. 组件化开发：Vue.js鼓励使用组件化的方式构建用户界面。一个组件由自己封装的HTML模板、CSS样式和JavaScript逻辑组成，可以实现更高级别的复用性和可维护性。组件可以嵌套和组合，使得界面的构建更加模块化和灵活。

    3. 模板语法：Vue.js使用基于HTML的模板语法，允许开发者通过插值、指令和表达式将数据绑定到模板中。模板语法使开发者可以以声明式的方式描述视图与数据的关系，提高了代码的可读性和可理解性。

    4. 虚拟DOM：Vue.js采用了虚拟DOM的概念，通过虚拟DOM的比对算法来高效地更新实际DOM。当数据发生变化时，Vue会生成一个虚拟DOM树，然后与上一次的虚拟DOM树进行比对，找出需要更新的部分，最后只更新这些部分的实际DOM，避免了不必要的DOM操作，提高了性能。

    5. 路由管理：Vue.js通过Vue Router插件提供了路由管理功能，可以实现前端路由的配置和管理。Vue Router可以帮助开发者构建单页面应用（SPA），实现页面之间的无刷新切换和动态加载组件。

    6. 状态管理：对于大型应用程序，状态管理是一个重要的方面。Vue.js提供了Vuex插件，用于集中管理应用程序的状态。Vuex提供了一个全局的状态管理器，让不同组件之间可以共享和响应这些状态的变化。

    除了以上核心功能，Vue.js还支持许多其他特性和插件，例如过渡动画、自定义指令、过滤器等。总之，Vue.js的核心功能使得前端开发更加简单、高效且可维护，适用于各种类型的Web应用开发。

    2.3 特性

    Vue.js具有以下一些主要的特性：

    1. 响应式数据绑定：Vue.js采用了数据劫持和观察的机制，在数据变化时自动更新相关的视图。这样，当应用状态改变时，Vue.js能够智能地更新DOM，保持视图和数据的同步。

    2. 组件化开发：Vue.js支持组件化开发，通过将一个应用拆分成多个小组件，可以实现更好的代码复用和可维护性。每个组件都有自己的模板、逻辑和样式，组件之间可以通过Props和Events进行通信。

    3. 渐进式框架：Vue.js是一个渐进式框架，可以根据项目的需求选择逐步采用Vue.js的特性，而不是一次性全部引入。这使得在现有项目中引入Vue.js更加方便，并且可以逐步优化和加强现有功能。

    4. 虚拟DOM：Vue.js使用虚拟DOM来提高性能。通过将变化前后的DOM树进行比对，Vue.js能够准确地找出需要更新的部分，从而避免了不必要的DOM操作，提高了渲染的效率。

    5. 模板语法：Vue.js使用基于HTML的模板语法，使得开发者可以更直观地编写模板。模板语法支持插值、指令和表达式等功能，使得数据绑定和逻辑处理变得更加简单和易于理解。

    6. 独立性：Vue.js为开发者提供了独立性，可以很容易地集成到现有的项目中，而不需要对整个项目进行重构。同时，Vue.js也提供了完整的构建工具和开发环境，方便开发者进行开发、构建和调试。

    7. 生态系统：Vue.js拥有强大而丰富的生态系统，提供了一系列官方和第三方的扩展库、插件和工具，可以满足各种不同的需求。例如，Vue Router用于路由管理，Vuex用于状态管理，Vue CLI用于项目的构建和开发等。

    三、MVVM的介绍

    MVVM（Model-View-ViewModel）是一种软件架构模式，用于将应用程序的用户界面（View）与业务逻辑（Model）分离，并引入一个独立的视图模型（ViewModel）来连接两者

    3.1 主要组件

    MVVM模式的三个主要组件如下：

    1. Model（模型）：表示应用程序的业务数据和业务逻辑。它负责处理数据的获取、存储、验证以及与底层系统的交互，例如数据库、网络请求等。

    2. View（视图）：表示应用程序的用户界面。它负责展示数据、处理用户输入和向用户呈现可视化元素等，通常是由HTML、CSS和用户交互事件组成。

    3. ViewModel（视图模型）：作为View和Model之间的中间层，它连接了视图和模型，负责处理视图的交互逻辑和数据绑定。ViewModel将业务数据从Model中获取，并将其转换为视图所需的格式，然后通过数据绑定机制将数据传递给View。ViewModel还能够监听View的用户交互事件，并将其处理转发给Model，从而实现与模型的交互。

    3.2 特点和优势

    MVVM模式的特点和优势包括：

    • 解耦和可维护性：MVVM模式将视图和业务逻辑分离，使得它们能够独立开发和测试。这种解耦性提高了代码的可维护性，减少了代码间的依赖。

    • 双向数据绑定：MVVM模式利用数据绑定机制实现了视图和视图模型之间的双向数据同步。当数据发生变化时，视图会自动更新，而用户的交互操作也会反映在视图模型和数据模型中。

    • 可复用的视图和视图模型：由于视图和视图模型的分离，可以更方便地复用它们。同一个视图模型可以被不同的视图使用，而一个视图模板也可以绑定到不同的视图模型上。

    • 提高开发效率：通过数据绑定和命令绑定等机制，MVVM模式降低了开发者编写大量手动DOM操作和事件处理的工作，提高了开发效率。

    MVVM模式被广泛应用于各种前端框架和库中，例如Vue.js、Angular和Knockout等。它能够提供清晰的架构和良好的可维护性，使得开发和维护复杂的应用程序变得更加简单和可靠。

    四、Vue入门

    4.1 HelloWorld实现

    代码如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Vue入门title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			{{msg}}
    13. 			
    14. 		div>
    15. 		<script type="text/javascript"">
    16. 			new Vue({
    17. 				el:"#app",
    18. 				data(){
    19. 					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
    20. 					}
    21. 				})
    22. 		script>
    23. 	body>
    24. html>

    结果如下： 

     4.2 数据弹屏发送

    代码如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Vue入门title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			{{msg}}
    13. 			<span id="show">
    14. 				
    15. 			span>
    16. 			<input id="content"/>
    17. 			<button type="button" onclick="tan()">发送弹屏button>
    18. 		div>
    19. 		<script type="text/javascript"">
    20. 			new Vue({
    21. 				el:"#app",
    22. 				data(){
    23. 					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
    24. 					}
    25. 				})
    26. 				function tan(){
    27. 					var content = $("#content").val();
    28. 					$("#show").text(content);
    29. 				}
    30. 		script>
    31. 	body>
    32. html>

    效果如下：

    4.3 v-model的使用(双向绑定)

    在Vue中，v-model是一个指令，用于实现双向绑定。

    v-model常用于表单元素（如input、select、textarea）中，将表单元素的值与Vue实例中的数据进行双向绑定，这样当表单元素的值改变时，Vue实例中的数据也会随之改变，反之亦然。

    代码如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Vue入门title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			{{msg}}
    13. 			<input v-model="msg"/>
    14. 			
    15. 		div>
    16. 		<script type="text/javascript"">
    17. 			new Vue({
    18. 				el:"#app",
    19. 				data(){
    20. 					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
    21. 					}
    22. 				})
    23. 		script>
    24. 	body>
    25. html>

    结果展示如下：

    需要注意的是，v-model只能在支持value属性的表单元素中使用。对于自定义组件，如果想要实现类似的双向绑定，需要手动实现一个value属性，并在组件中使用该属性来监听变化。

    4.4 弹窗数据绑定

    代码如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Vue入门title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			
    13. 			<input v-model="msg"/>
    14. 			<button type="button" @click="tan()">发送弹屏button>
    15. 		div>
    16. 		<script type="text/javascript"">
    17. 			new Vue({
    18. 				el:"#app",
    19. 				data(){
    20. 					return {msg:null}
    21. 					},
    22. 					methods:{
    23. 						tan(){
    24. 							alert(this.msg)
    25. 						}
    26. 					}
    27. 				})
    28. 		script>
    29. 	body>
    30. html>

     结果展示如下：

    4.5 :value的使用(单向绑定)

    代码如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Vue入门title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			
    13. 			<input :value="msg"/>
    14. 			<button type="button" @click="tan()">发送弹屏button>
    15. 		div>
    16. 		<script type="text/javascript"">
    17. 			new Vue({
    18. 				el:"#app",
    19. 				data(){
    20. 					return {msg:3}
    21. 					},
    22. 					methods:{
    23. 						tan(){
    24. 							alert(this.msg)
    25. 						}
    26. 					}
    27. 				})
    28. 		script>
    29. 	body>
    30. html>

     结果如下：

    五、Vue的生命周期

    Vue组件的生命周期分为以下八个阶段：

    1. beforeCreate：在实例被创建之初，数据观测和初始化事件还未开始。
    2. created：实例创建完成，已经完成了数据观测和初始化事件。
    3. beforeMount：在挂载开始之前被调用，即将开始编译模板并将其挂载到页面上。
    4. mounted：挂载完成后调用，此时组件已经显示在页面上。
    5. beforeUpdate：在数据更新之前调用，可以在此时对数据进行操作。
    6. updated：数据更新完成后调用，组件已经重新渲染完成。
    7. beforeDestroy：在实例销毁之前调用，此时实例仍然可以被操作。
    8. destroyed：实例销毁后调用，此时所有的指令和事件监听器都已经被移除，组件已经从页面中删除。

    需要注意的是，在组件中，生命周期钩子函数可以作为方法进行定义，也可以作为属性进行定义。定义为方法时需要在方法内部执行相应的任务，定义为属性时需要直接定义相应的任务函数。

    图解如下：

     Vue生命周期具体详解如下(附代码)：

    1.  
    2. html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8" />
    6. 		<title>title>
    7. 		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="d1">
    11. 			<div>number:{{number}}div>
    12. 			<div>{{detail()}}div>
    13. 			<input type="text" v-model="number" />
    14. 		div>
    15. 		<script>
    16. 			var data = {
    17. 				number:999,
    18. 				msg:null
    19. 			};
    20. 			var vm = new Vue({
    21. 				el:'#d1',
    22. 				data:data,
    23. 				methods:{
    24. 					detail:function(){
    25. 						return "使用方法来插值："+this.msg;
    26. 					}
    27. 				},
    28. 				beforeCreate:function(){
    29. 		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
    30. 		            console.log(this.msg)//undefined
    31. 		            console.log(document.getElementsByClassName("myp")[0])//undefined
    32. 		        },
    33. 		        created:function(){
    34. 		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
    35. 		            this.msg+='!!!'
    36. 		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
    37. 		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
    38. 		        },
    39. 		        beforeMount:function(){
    40. 		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
    41. 		            this.msg+='@@@'
    42. 		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
    43. 		            console.log(document.getElementsByClassName("myp")[0])//undefined
    44. 		            console.log('接下来开始render，渲染出真实dom')
    45. 		        },
    46. 		        // render:function(createElement){
    47. 		        //     console.log('render')
    48. 		        //     return createElement('div','hahaha')
    49. 		        // },
    50. 		        mounted:function(){ 
    51. 		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
    52. 		            console.log(document.getElementsByClassName("myp")[0])
    53. 		            console.log('可以在这里操作真实dom等事情...')
    54. 		
    55. 		        //    this.$options.timer = setInterval(function () {
    56. 		        //        console.log('setInterval')
    57. 		        //         this.msg+='!'  
    58. 		        //    }.bind(this),500)
    59. 		        },
    60. 		        beforeUpdate:function(){
    61. 		            //这里不能更改数据，否则会陷入死循环
    62. 		            console.log('beforeUpdate:重新渲染之前触发')
    63. 		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
    64. 		        },
    65. 		        updated:function(){
    66. 		            //这里不能更改数据，否则会陷入死循环
    67. 		            console.log('updated:数据已经更改完成，dom也重新render完成')
    68. 		        },
    69. 		        beforeDestroy:function(){
    70. 		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
    71. 		            // clearInterval(this.$options.timer)
    72. 		        },
    73. 		        destroyed:function(){
    74. 		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
    75. 		        }
    76. 			});
    77. 		script>
    78. 	body>
    79. html>

    最后Vue入门就到这里，祝大家在敲代码的路上一路通畅!

    感谢大家的观看 !

  • 相关阅读:
    Docker从入门到精通，一文详解
    ElasticSearch--优化写入速度的方法--单个索引的操作
    大数据毕业设计选题推荐-旅游景点游客数据分析-Hadoop-Spark-Hive
    read-after-write consistency 写后读一致性的解决方法
    【ES6】Promise.race的用法
    优化改进YOLOv5算法之添加DCNv3模块，有效提升目标检测效果
    面试复习题-- JUC
    R语言颜色细分
    网络协议之:socket协议详解之Datagram Socket
    python selenium 点击表格中的一系列按钮并输出弹窗内容到csv
  • 原文地址：https://blog.csdn.net/weixin_74263417/article/details/132921974