Vue入门

目录

Vue简介

Vue是什么

 有什么用

 Vue的特点

Vue的入门案列

下载地址：

放代码

BootCDN 

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

 案例二：实现点击显示

案例三：实现输入显示 

案例四：实现弹窗效果 

Vue生命周期

​编辑 

Vue的生命周期及用途@

---

Vue简介

Vue是什么

JavaVue是一种将Java和Vue.js框架结合在一起使用的技术组合。Java是一种广泛使用的编程语言，主要用于构建后端服务器和业务逻辑。而Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和交互。通过将Java和Vue.js结合使用，开发人员可以同时利用Java的强大后端功能和Vue.js的灵活前端特性。

使用JavaVue，开发人员可以通过使用Java构建后端API，并使用Vue.js创建响应式的前端用户界面。Java提供了稳定、高效的后端支持，可以处理数据逻辑、数据库操作和业务流程等。而Vue.js提供了易于使用和强大的前端工具，可以实现快速、动态的用户界面开发。通过JavaVue，开发人员可以实现前后端的无缝集成，为用户提供更加友好和高效的应用体验。

总的来说，JavaVue技术组合可以提供一个全面的解决方案，同时充分利用Java和Vue.js的优势。它使开发人员能够在一个项目中同时处理前后端需求，并提供高效的开发和交付过程。

 有什么用

Vue.js是一种流行的前端JavaScript框架，用于构建交互式的用户界面。Vue.js具有以下几个重要的用途：

1. 构建用户界面：Vue.js提供了一套灵活的工具和组件，使开发人员能够轻松地构建各种类型的用户界面。它支持声明式的模板语法和组件化开发，使开发人员能够更有效地创建可重用、模块化的UI组件。

2. 数据驱动：Vue.js采用了响应式数据绑定的概念，当数据发生变化时，相应的视图会自动更新。这种数据驱动的机制使开发人员能够更轻松地管理和维护UI与数据的同步。

3. 组件化开发：Vue.js鼓励开发人员将UI拆分为独立的组件，每个组件包含自己的模板、逻辑和样式。这种组件化开发的方式使代码更加可读、可维护，并且提高了开发效率。

4. 路由和状态管理：Vue.js提供了官方支持的路由和状态管理库（Vue Router和Vuex），使开发人员能够更轻松地管理页面之间的切换和应用程序的状态。这些工具能够帮助开发人员构建复杂的单页面应用（SPA）。

5. 插件和扩展性：Vue.js具有丰富的插件生态系统，开发人员可以借助这些插件来扩展Vue.js的功能。同时，Vue.js也提供了强大的自定义能力，使开发人员能够根据项目需求进行灵活的定制。

总的来说，Vue.js在前端开发中有着广泛的应用，可以帮助开发人员构建交互性强、高效、易于维护的用户界面。它的简洁语法和灵活性使得它成为了很多开发人员的首选框架。

 Vue的特点

1. 渐进式框架：Vue.js是一个渐进式框架，可以根据需要逐步引入和使用其功能。它可以作为一个简单的库来使用，也可以作为完整的框架来构建复杂的单页面应用（SPA）。

2. 响应式数据绑定：Vue.js采用了响应式数据绑定的机制，可以将数据与视图进行实时的双向绑定。当数据发生变化时，视图会自动更新，大幅简化了操作DOM的流程。

3. 组件化开发：Vue.js鼓励开发人员将UI拆分为独立的、可复用的组件，每个组件包含自己的模板、逻辑和样式。这种组件化的开发方式使得代码更加清晰、可维护性更高，并且可以提高开发效率。

4. 虚拟DOM：Vue.js通过使用虚拟DOM（Virtual DOM）来优化性能。每当数据发生变化时，Vue.js会基于虚拟DOM计算出最小量的DOM操作，并将其应用于实际DOM中，从而大幅提高了页面的渲染效率。

5. 简洁优雅的语法：Vue.js采用了简洁灵活的模板语法，使开发人员能够以声明式的方式编写模板。它的语法易于理解，从而降低了学习成本，并且有助于提高代码的可读性。

6. 丰富的生态系统：Vue.js有一个活跃的插件和工具生态系统，开发人员可以根据项目的需求选择适合的插件和扩展。它还提供了官方支持的路由和状态管理库（Vue Router和Vuex），以及其他许多常用的第三方库和工具。

总的来说，Vue.js具有简单、高效、灵活、可维护等特点，使得它成为前端开发中备受欢迎的框架之一。它非常适合构建现代化的、交互性强的用户界面。

Vue的入门案列

首先我们要用到我们的HBuilderX

下载地址：

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

放代码

首先我们先创建一个html.xml文件

导入.js

BootCDN 

CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。

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

	
		
		
		
	
	
		

			{{msg}}
		
		
	

效果 

 

 案例二：实现点击显示

	
		
	
	
		
	
	
		

			{{msg}}
			
			
			点击弹出
		
		
		
	

效果

案例三：实现输入显示 

	
		
	
	
		
	
	
		

			{{msg}}
			
			
1		
		
	
	
 

效果

案例四：实现弹窗效果 

	
		
	
	
		
	
	
		

			
			
			发送弹屏
		
		
	
	
 

效果

Vue生命周期

 

Vue的生命周期及用途@

Vue.js 是一个用于构建用户界面的 JavaScript 框架，它拥有一套完整的生命周期钩子函数，用于在组件的不同阶段执行特定的操作。下面是 Vue.js 组件的生命周期钩子函数及其用途：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件/watcher 事件配置之前被调用。在这个阶段，实例的数据、方法和计算属性都还没有被初始化或者设置。

2. created：实例已经完成数据观测(data observer)，属性和方法的运算，但是对 DOM 还没有进行编译和挂载。在这个阶段可以进行一些异步操作、数据初始化的操作。

3. beforeMount：在挂载开始之前被调用。在这个阶段，模板编译完成并准备好替换 DOM 结构，但是还没有开始真正的 DOM 挂载。

4. mounted：在挂载完成之后被调用。在这个阶段，Vue.js 实例已经被创建，模板已经编译完成，组件已经被挂载到 DOM 中。

5. beforeUpdate：在数据更新时，在重新渲染之前被调用。在这个阶段，可以在更新之前访问到更新之前的真实 DOM。

6. updated：在数据更新时，在重新渲染之后被调用。在这个阶段，DOM 已经被更新，可以执行依赖于 DOM 的操作。

7. beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用，可以执行一些清理操作。

8. destroyed：在实例销毁之后被调用。在这个阶段，实例已经被销毁，所有的事件监听器和子实例都已经被移除。

除了以上钩子函数，Vue.js 还提供了一些其他的常用钩子函数，如 activated 和 deactivated（用于 Vue-router 的 keep-alive 组件）以及 errorCaptured（用于捕获子孙组件的任何错误）。这些钩子函数提供了灵活的操作和扩展能力，可以在不同的生命周期阶段执行相应的逻辑。