vue入门

最新推荐文章于 2024-08-15 15:54:28 发布
最新推荐文章于 2024-08-15 15:54:28 发布
阅读量135 收藏
点赞数
文章标签： spring java 后端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54067126/article/details/120898874
版权
本文介绍了Vue.js的基本概念，包括其作为渐进式框架的特点、MVVM模式以及与库的区别。详细讲解了Vue的安装、数据绑定、双向数据绑定和事件处理。此外，还概述了Vue组件的生命周期，帮助理解不同阶段的功能和应用。
摘要由CSDN通过智能技术生成

vue入门

文章目录

一.vue简介

  1. Vue.js是什么？
    Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

官网：vue
Vue作者：尤雨溪/中国无锡

前后端分离 React

  1. 库和框架的区别
    2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
    代表：jQuery
    jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

mvc
3. MVVM的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型 虚拟dom

V（修改数据） -> M
M（修改数据） -> V
数据是核心

easyui=jquery+html4

treenodes=
{
	id:1
	text:后勤管理
	children：【
	
	】
}

解析成json对象
将json对象进行遍历
for node in treenodes.children
渲染菜单的功能是操作左侧页面的dom节点

注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

二.vue入门

先安装vue，如果有网络可直接进入cdn找到vue自己所需要的版本导入在线格式
一.边界绑定
让数据显示在浏览器当中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		//这是2.6.101版本的vue
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id='app'> 
		<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript"> 
	// 绑定边界
	new Vue({
		el:'#app',
		//绑定边界的三种方式
			data(){
				return {msg: 'hello word'}
			},
// 		data:{
// 			msg:'json对象'
// 		},
// 		data:function(){
// 	    return {msg: 'hello word'}
// 		}
	})
	</script>
</html>
左侧是显示，右侧是浏览器的查看源码

在这里插入图片描述
二.数据双向绑定 （v-model）
写一个输入框绑定三个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id='app'> 
		//输入框
		<input type="text" v-model="msg" />
		<h3>{{msg}}</h3>
		<h3>{{msg}}</h3>
		<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript"> 
	// 绑定边界
	new Vue({
		el:'#app',
			data(){
				return {msg: 'vue'}
			}
	})
	</script>
</html>

标签中的值随输入框更改
在这里插入图片描述
三.事件
点击按钮获取弹框

		<button v-on:click="getMsg">获取输入框的值</button>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id='app'> 
		<input type="text" v-model="msg" />
		<button v-on:click="getMsg">获取输入框的值</button>
		<h3>{{msg}}</h3>
		<h3>{{msg}}</h3>
		<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript"> 
	// 绑定边界
	new Vue({
		el:'#app',
			data(){
				return {msg: 'vue'}
			},
			//所有的方法都卸载msg里面
			methods:{
				getMsg(){
					alert(this.msg)
				}
			}

	})
	</script>
</html>

在这里插入图片描述

三.vue的生命周期

生命周期图（主要分为四个阶段）

创建 （beforeCreat\created）

挂载（真假DOM的连接）（beforeMount\mounted）

同步（DOM数据的同步）（beforeUpdate\updated）

销毁（beforedestroyed\destroyed）
在这里插入图片描述

迟早嘚秃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
java实现ioc的参数传递_Spring源码分析之IOC的三种常见用法及源码实现（一）
weixin_39837105的博客
02-24 87
1.ioc核心功能bean的配置与获取api有以下四种(来自精通spring4.x的p175)常用的是前三种第一种方式xmlns="http://www.springframework.org/schema/beans"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework....
[转]Spring IoC有什么好处呢？
喜欢前端的后端 MelodyJerry
09-10 553
引子 比如这个例子： ① B{ A a=new Aimpl(); //其他代码 } ② B{ A a; //其他代码 public void setA(A a) { this.a = a; } } 第一个是直接合成使用A，第二个是用控制反转进行管理。 书上只讲理论，我现在都不能体会Spring的IoC和不用相比有什么好处，能具体说一下么？由spring托管有什么好处呢？我现在感觉用spring 的set注入就是看起来代码牛逼点，完全不理解到底有什么优势啊…… 正解 以下内容摘自知乎，保存
SpringIOC参数详解及其使用
it白白的博客
01-24 205
重点： IOC实现原理： 在初始化一个Spring容器时，Spring会去解析指定的xml文件，当解析到其中的&lt;bean&gt;标签时，会根据该标签中的class属性指定的累的全路径名，通过反射创建该类的对象，并将该对象存入内置的Map中管理。其中键就是该标签的id值，值就是该对象。   由此可得： 多次获取同样一个id的bean，得到的是同一个对象。即使是同一个类，如果配置过多个...
Spring
hundersmile的博客
09-08 109
Spring框架—控制反转（IOC） 1 Spring框架概述 1.1 什么是Spring 1.2 Spring的优点 1.3 Spring的体系结构 2 入门案例:（IoC） 2.1导入jar包 2.2目标类 2.3 配置文件 2.4测试 3 入门案例：DI 3.1 目标类 3.2 dao 3.3 service 3.4 配置文件 3.5 测试 4 依赖注入装配Bean 基于xml 4.1属性依赖注入 4.1.1 构造方法 4.1.2 setter方法 4.2 集合依赖注入 5 依赖注入装配Bean 基于
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
spring4学习IOC之注入参数（四）
newbeedaly的博客
06-01 211
依赖注入之注入参数 1.编写People和Dog类 package com.newbeedaly.entity; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.List; import java.util.Map; import java...
IOC容器如何向没有默认构造方法的类中传值
weixin_45104211的博客
02-27 174
上代码： app.xml <!--app.xml --> <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ...
Spring学习：Spring的IOC注解
给时光以文明
06-29 229
文章目录一、简介二、IOC注解（一）常用的注解（二）扫描包（三）数据装配（四）其他情况三、生命周期四、Bean实例化的时机 一、简介 Spring提供了一系列的注解来替代 xml 中的配置，而在实际开发中，建议使用：注解+配置 的形式。 二、IOC注解 （一）常用的注解 注解名称 说明 @Component 定义Bean组件，添加到IoC容器中，不区分组件类型 @Repository 表示Dao组件（区分组件） @Service 表示Service组件（区分组件） @Contro
Spring学习——Spring IOC注解
Yiky的博客
07-04 204
文章目录Spring IOC注解1.开启注解功能2.常用的注解2.2 bean的定义2.3 bean 的作用域2.4 bean 的生命周期2.5加载第三方资源2.6 加载资源文件和注入2.7 引用数据类型注入2.8 引用数据类型注入22.9 纯注解格式3.Spring和mybatis整合3.1 创建项目和结构3.2 引入依赖3.3 编写数据库连接配置类3.4 编写mybaits配置类3.5 编写Spring配置类3.6 完成各层的注解3.7测试 Spring IOC注解 1.开启注解功能 <!..
IOC依赖注入（各种类型的传值）
Blooming death的博客
07-01 295
Spring中依赖注入的如何传值 大部分： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans
关于构造函数传递参数的理解
热门推荐
文龙的博客
03-02 1万+
一、什么是构造方法?     构造方法是一个方法名和类名一致、没有返回值的方法。一个类中没有写构造方法，其默认为无参数的构造方法。 在创建类对象后，自动调用该方法。如果一个类写了有参数的构造方法，默认无参数的构造方法将不存在，一个类可以有多个构造方法， 但是创建对象只能使用一个构造方法，具体看创建对象的参数而定。创建对象时，自动调用一个构造方法，因此可以将常用的属性放入构造方法中定义。
SpringIOC注解总结
持之以恒，方得始终
03-25 466
1.组件添加相关注解 1.1 @Configuration 作用在类上，告诉Spring这是一个配置类。 相当于一个xml配置文件 1.2 @Bean 作用在方法上，告诉Spring这是一个需要管理的Bean，id默认为方法名，也可以在注解内配置value值作为Bean的id。 相当于xml配置文件中的<Bean>标签 1.3 @ComponentScan ...
dubbo和springcloud有什么异同？
最新发布
yszbrzdd的博客
08-15 267
Dubbo主要关注于高效的 RPC 调用和服务治理。提供了一个综合的微服务解决方案，涵盖了从服务注册到配置管理的广泛功能。它们可以根据具体需求和现有技术栈选择使用，也可以结合使用，例如在 Spring Cloud 环境中集成 Dubbo 作为 RPC 框架。
vue 入门 demo
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： ...这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值