Vue入门

已于 2023-10-16 16:05:16 修改
阅读量558 收藏 2
点赞数 3
文章标签： vue.js 前端 javascript
于 2023-09-18 09:49:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74263417/article/details/132921974
版权

目录

一、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实现

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
		<div id="app">
			{{msg}}
			
		</div>
		<script type="text/javascript"">
			new Vue({
				el:"#app",
				data(){
					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
					}
				})
		</script>
	</body>
</html>

结果如下： 

 4.2 数据弹屏发送

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
		<div id="app">
			{{msg}}
			<span id="show">
				
			</span>
			<input id="content"/>
			<button type="button" onclick="tan()">发送弹屏</button>
		</div>
		<script type="text/javascript"">
			new Vue({
				el:"#app",
				data(){
					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
					}
				})
				function tan(){
					var content = $("#content").val();
					$("#show").text(content);
				}
		</script>
	</body>
</html>

效果如下：

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

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

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

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
		<div id="app">
			{{msg}}
			<input v-model="msg"/>
			<!-- <button type="button" onclick="tan()">发送弹屏</button> -->
		</div>
		<script type="text/javascript"">
			new Vue({
				el:"#app",
				data(){
					return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
					}
				})
		</script>
	</body>
</html>

结果展示如下：

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

4.4 弹窗数据绑定

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
		<div id="app">
			<!-- {{msg}} -->
			<input v-model="msg"/>
			<button type="button" @click="tan()">发送弹屏</button>
		</div>
		<script type="text/javascript"">
			new Vue({
				el:"#app",
				data(){
					return {msg:null}
					},
					methods:{
						tan(){
							alert(this.msg)
						}
					}
				})
		</script>
	</body>
</html>

 结果展示如下：

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

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
		<div id="app">
			<!-- {{msg}} -->
			<input :value="msg"/>
			<button type="button" @click="tan()">发送弹屏</button>
		</div>
		<script type="text/javascript"">
			new Vue({
				el:"#app",
				data(){
					return {msg:3}
					},
					methods:{
						tan(){
							alert(this.msg)
						}
					}
				})
		</script>
	</body>
</html>

 结果如下：

五、Vue的生命周期

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

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

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

图解如下：

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="d1">
			<div>number:{{number}}</div>
			<div>{{detail()}}</div>
			<input type="text" v-model="number" />
		</div>
		<script>
			var data = {
				number:999,
				msg:null
			};
			var vm = new Vue({
				el:'#d1',
				data:data,
				methods:{
					detail:function(){
						return "使用方法来插值："+this.msg;
					}
				},
				beforeCreate:function(){
		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
		            console.log(this.msg)//undefined
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		        },
		        created:function(){
		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
		            this.msg+='!!!'
		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
		        },
		        beforeMount:function(){
		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
		            this.msg+='@@@'
		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		            console.log('接下来开始render，渲染出真实dom')
		        },
		        // render:function(createElement){
		        //     console.log('render')
		        //     return createElement('div','hahaha')
		        // },
		        mounted:function(){ 
		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
		            console.log(document.getElementsByClassName("myp")[0])
		            console.log('可以在这里操作真实dom等事情...')
		
		        //    this.$options.timer = setInterval(function () {
		        //        console.log('setInterval')
		        //         this.msg+='!'  
		        //    }.bind(this),500)
		        },
		        beforeUpdate:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('beforeUpdate:重新渲染之前触发')
		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
		        },
		        updated:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('updated:数据已经更改完成，dom也重新render完成')
		        },
		        beforeDestroy:function(){
		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
		            // clearInterval(this.$options.timer)
		        },
		        destroyed:function(){
		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
		        }
			});
		</script>
	</body>
</html>

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

感谢大家的观看 !

Kissship
关注
Vue快速入门指南
TinaCSDN的博客
11-20 622
0.学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 1.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静
vue生命周期转
浅夏博客
10-20 319
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
vue基础知识
最新发布
qq_71748390的博客
08-09 889
通过监听 DOM 事件和更新数据属性，在 View 和 Model 之间建立了双向数据绑定，从而简化了 MVVM 模式中的数据同步过程。axios.patch(url[, data[, config]]) // 同时支持 data 和 params --用于更新数据（修改），只将修改的数据推送到后端。axios.put(url[, data[, config]]) // 同时支持 data 和 params --用于更新数据（修改），将所有数据都推送到后端。
VUE(入门)
weixin_55376192的博客
05-14 598
Soc原则：关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UIHTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScrip
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
ppt课件-第1章 Vue入门.zip
03-22
本课件“ppt课件-第1章 Vue入门.zip”是针对初学者设计的，旨在帮助学习者快速掌握Vue的基础知识和核心概念。 在Vue.js中，主要知识点包括： 1. **MVVM模式**：Vue采用Model-View-ViewModel架构，提供数据绑定和...
Vue新手入门指南（易懂）
热门推荐
liuzhaoh的博客
03-01 1万+
Vue.js学习心得 前言 对于一名初入编程的新手来说，JavaScript的语法偏向复杂，选择Vue库可以说是一个较为不错的体验。在很多方面，Vue简化了JavaScrip语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。 1. Vue实例和模板语法 <body> <div id="app"> <p>{{message}}</p> </div> <script> new Vue({ el:'#app'
vue 入门 demo
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： ...这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kissship

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值