1.初学Vue

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量157 收藏
点赞数
文章标签： vue js javascript java css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40733968/article/details/107711363
版权

一.Vue入门

1.概述

1.什么是Vue?
	Vue是构建用户界面的渐进式框架,只关注视图层(View)
2.Vue的两个核心点
	双向绑定:当数据发生改变,自动更新视图;当视图发生改变,数据也要改变
	组件视图:划分组件为可重用.可维护.可调试
3.Vue简单了解
	a.每一个使用都必须根据Vue这个构造函数创建根实例获得对象  new Vue();
	b.
	new Vue({
		el:"#box",
		data:{
			数据1,
			数据2,
			..
		},
		methods:方法
	});
	
	注:el表示挂载元素选择器,data表示代理数据,methods表示方法,这些键的名字是固定的,不能改变
		data中的数据以键值对形式写出,可以自定义
		
4.声明式渲染
	声明式:只关注在哪里. 做什么,不关心如何实现
	命令式:以代码关注具体的实现过程以及在哪里和做了什么
		Vue中的声明式渲染:初始化根实例,Vue自动将数据绑定在DOM模板上

2.Vue入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<!-- 	引入vue.js库文件   1.本地引入  2.CDN引入-->
    <!-- 	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 定义一个根标签,作为vue控制的区域 -->
		
		<div id="box">
			<!-- 这里获得的就是msg中的内容 -->
			<h1>{{msg}}</h1>
		</div>
	</body>
</html>

<script type="text/javascript">
	//1.创建vue实例,注意键是规定好的,不能改变
	new Vue({
		//选择器
		el:"#box",
		data:{
			//这里面的键可以随便定义
			msg:"hello vue"
		}
	});
</script>

3.插值表达式

插值表达式是vue提供的语法,{{..}} 插值表达式可以做一些简单的计算,但是不建议在里面做运算,只是在里面展示数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值表达式</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 可以在括号里做一些简单的运算,但是不建议在里面计算,只是用来展示 -->
		<div id="box">
			{{msg}}
			{{"aaa"}}
			{{20+30}}
			{{a=30}}
			{{b=30}}
			{{a}}
			{{b}}
		</div>
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			msg:"hello world"
		}
	});
</script>

二.Vue指令

1.什么是指令

指令是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时相应的将某些行为映射到DOM上
在Vue中,指令以v-开头

2.属性绑定

v-bind:将vue实例对象中的data中的某个属性数据，绑定到根元素内某个元素的属性上，要在属性名前面加上v-bind:。不然，无法绑定实际的数据。其中,v-bind可以省略,简写形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定v-bind</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>

		<!-- <a v-bind:href="url" id="a1">百度一下</a><br> -->
		<!-- 简写形式,省略v-bind -->
		<a :href="url" id="a1">百度一下</a><br>

		<input type="text" id="in" v-bind:value="name" />
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el: "#a1",
		data: {
			'url': "http://www.baidu.com"
		}
	});
	new Vue({
		el: "#in",
		data: {
			'name': "张三",
			'password':"123456"
		}
	})
</script>

3.事件绑定

事件绑定采用v-on,例如:
<button type="button" v-on:click="huanTu()">点击切换图片</button>
 简写形式  省略v-on: 用@符号表示
<button type="button" @click="huanTu()">切换图片</button>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 与data中的数据想绑定 -->
			<img v-bind:src="srcUrl" >
			<button type="button" v-on:click="huanTu()">点击切换图片</button>
			<!-- 简写形式 @ -->
			<button type="button" @click="huanTu()">切换图片</button>
		</div>
	</body>
</html>

<script type="text/javascript">
	const vue=new Vue({
		el:"#box",
		data:{
			
			'srcUrl':'https://cn.vuejs.org/images/logo.png'
		},
		methods:{
			huanTu:function(){
			//this表示Vue对象
			this.srcUrl='https://cn.vuejs.org/images/vehikl.png'
			}
		}
		
	});
</script>

4.绑定表单数据

表单数据绑定采用v-model

案例一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 这里使用v-model放的是默认值,删除msg的时候,可以看到h1中的内容也在被删除 -->
			姓:<input type="text" class="1" id="" value="" v-model="msg" /><br>
			<h1>{{msg}}</h1>
			名:<input type="text" class="1" id="" value="" /><br>
			全名:<input type="text" class="1" id="" value="" />
		</div>

	</body>
</html>
<script type="text/javascript">
	const vue = new Vue({
		el: "#box",
		data: {
			'msg': "芜湖起飞"
		}
	})
</script>

案例二: 实现输入姓和名时,能自动填入全名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例二: 实现输入姓和名时,能自动填入全名</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
			
			名:<input type="text" class="1" id="" value="" v-model="ming"/><br>
			<!-- 全名:<input type="text" class="1" id="" value="" v-model="fullName"/><br> -->
			全名:<input type="text" class="1" id="" value="" v-model="xing.concat(' '+ming)"/><br>
			
		</div>
	</body>
</html>

<script type="text/javascript">
	const vue=new Vue({
		el:"#box",
		data:{
			xing:"",
			ming:"",
			//fullName:this.xing.concat(" "+this.ming)
		}
	});
</script>

5.计算属性

采用第2种方式,实现输入姓和名时,能自动填入全名

计算属性:
1.第一次初始化会调用一次。
2.当这个函数中使用的属性的值，一发生变化，这个函数就会调用。


计算属性的细化:
	(1).get方法 当这个函数中使用的属性的值，一发生变化，这个get函数就会调用。
	(2).set方法 当fullName属性值一变化，就会执行set方法，会拿到fullName变化之后的值
	浏览器一般会自带get方法,set方法需要自己手动去设置


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
			
			名:<input type="text" class="1" id="" value="" v-model="ming"/><br>
			
			名:<input type="text" class="1" id="" value="" v-model="fullName"/><br>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			'xing':"",
			'ming':""
		},
		//计算属性:
		/* 1.第一次初始化会调用一次。
		2.当这个函数中使用的属性的值，一发生变化，这个函数就会调用。 */
		computed:{
			fullName:function(){
				console.log("第一次初始化的时候，就会调用一次。");
				console.log("当这个函数中使用的属性的值，一发生变化，这个函数就会调用。");
				var name=this.xing.concat(" "+this.ming);
				return name;
			}
		}
	})
</script>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
			名:<input type="text" class="1" id="" value="" v-model="ming" /><br>
			全名:<input type="text" class="1" id="" value="" v-model="fullName" /><br>
		</div>
	</body>
</html>
<script type="text/javascript">
	const vue = new Vue({
		el: "#box",
		data: {
			'xing': "",
			'ming': ""
		},
		//计算属性
		computed: {
			//1.第一次初始化会调用一次。
			//2.当这个函数中使用的属性的值，一发生变化，这个函数就会调用。
			fullName:{
				get:function(){
					console.log("get 方法：当这个函数中使用的属性的值，一发生变化，这个get函数就会调用。");
					var name=this.xing.concat(" "+this.ming);
					return name;
				},
				//set 方法 可以监听fullName 属性值变化,即更改fullName会引起上面两项的变化
				set:function(newValue){
					//newValue 就是fullName变化之后的值
					console.log("set 方法:当fullName属性值一变化，就会执行set方法，会拿到fullName变化之后的值"+newValue);
					var arr=newValue.split(" ");
					this.xing=arr[0];
					this.ming=arr[1];
				}
				
			}
		}
	});
</script>

6.属性值变化的监听

watch 可以监听属性值的变化


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
			名:<input type="text" class="1" id="" value="" v-model="ming" /><br>
			全名:<input type="text" class="1" id="" value="" v-model="fullName" /><br>
		</div>
	</body>
</html>
<script type="text/javascript">
	const vue = new Vue({
		el: "#box",
		data: {
			'xing': "",
			'ming': "",
			'fullName':""
		},
		//watch 可以监听属性值的变化
		watch: {
			xing: function(newValue,oldValue) {
				console.log("xing:属性值变化了  "+"新值:"+newValue+"旧值:"+oldValue);
				this.fullName=newValue+" ";
			},
			ming: function(newValue, oldValue) {
				console.log("ming:属性值变化了"+"  新值"+newValue+" 旧值"+oldValue)
				this.fullName = this.fullName.concat(' ').concat(newValue);
			},
			fullName:function(newValue, oldValue){
				//console.log(oldValue);
				var arr=newValue.split(" ");
				this.xing=arr[0];
				this.ming=arr[arr.length-1];
				this.fullName=this.xing+" "+this.ming;
			}
		}
	});
</script>

米和千米的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			米<input type="text" class="class" id="" value="" v-model="mi"/><br>
			千米<input type="text" class="class" id="" value="" v-model="qianmi"/><br>	
		</div>
			
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			mi: "",
			qianmi:"" 
		},
		watch:{
			mi:function(newValue){
				this.qianmi=newValue/1000;
			},
			qianmi:function(newValue){
				this.mi=newValue*1000;
			}
		}
	});
</script>

7.class属性的绑定

class是特殊属性,绑定的方式与其他属性不同


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aClass {
				color: blue;
			}

			.bClass {
				font-size: 200px;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- <h1 class="aClass">传统写法改变样式</h1> -->
			<!-- :class="'aClass'"  当你使用vue绑定了class属性 类型选择器名称 要用单引号引起来-->
			<h1 :class="'aClass'">采用Vue的方式改变样式</h1>

			<!-- 绑定多个类选择器 使用[] 让他成为一个数组。 -->
			<h1 :class="['aClass','bClass']">芜湖起飞</h1>
			<!--让绑定的属性成为变量 -->
			<h1 :class="a">一行标题444444444</h1>

			<h1 :class="[a,b]">一行标题55555</h1>
			<!-- 绑定class属性的值是一个JSON对象  
						  类选择器名:true        true 表示选择器生效，false表示选择器不生效。
						{'aClass':true,'bClass':true}
			-->

			<h1 :class="{'aClass':true,'bClass':true}">一行标题55555</h1>
			<!-- true 和 false 不写死 而是写出变量 -->
			<h1 :class="{'aClass':aflag,'bClass':bflag}">一行标题55555</h1>

		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {
			'aflag': true,
			'bflag': false
		}
	});
</script>

案例:点击图片切换样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击图片切换样式</title>
		<style type="text/css">
			.aClass {
				height: 200px;
				width: 400px;
				border: 1px black solid;
				background-color: red;
			}
			
			
			.bClass {
				height: 400px;
				width: 800px;
				border: 2px black solid;
				background-color: blue;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div id="" :class="{'aClass':a,'bClass':b}" @click="change()">

			</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {
			'a': true,
			'b': false
		},
		methods: {
			change() {
				this.a = !this.a
				this.b = !this.b
			}
		}
	});
</script>
pigpigpi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Com.Vue学习内容
01-25
Vue.js是一种用于构建用户界面的JavaScript框架。它是一个渐进式框架，这意味着你可以逐步引入Vue，而不必一次性完成所有设置。Vue的设计目的是用来构建高性能的单页应用，但实际上，它也非常适合创建各种类型的UI...
2024.1.5 使用vue编写hello world
01-10
标题“2024.1.5 使用vue编写hello world”指的是使用Vue.js框架进行基础的“Hello, World!”程序的编写。这是一个传统的编程入门练习，用来快速展示如何在特定环境中输出文本。在Vue中，这个过程通常涉及到创建一个...
启动vue项目
pig_0101的博客
05-30 93
-legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。用 npm install --legacy-peer-deps下载依赖。
pig-ui的运行环境小札
qq_29308413的博客
11-26 1570
一.环境准备 1.1 node下载         Node下载地址：https://nodejs.org/en/download/         1.2 node安装     双击.exe进行安装就好 1.3 node验证 1.4 npm 镜像切换  众所周知的原因，国外的很多东西国内的网无法直接访问，为了能够下载下来，需要使用淘宝镜像 //切换淘宝镜像 n...
[pig框架源码分析] 02 - 不打开后端程序，轻量的前端开发
kinghzking的专栏
01-27 1845
[pig框架源码分析] 02 - 不打开后端程序，轻量的前端开发
基于 KubeSphere 的开源微服务开发平台 Pig 最佳实践
KubeSphere
11-01 2100
作者：何昌涛，北京北大英华科技有限公司高级 Java 工程师，云原生爱好者。 前言 近年来，为了满足越来越复杂的业务需求，我们从传统单体架构系统升级为微服务架构，就是把一个大型应用程序分割成可以独立部署的小型服务，每个服务之间都是松耦合的，通过 RPC 或者是 Rest 协议来进行通信，可以按照业务领域来划分成独立的单元。但是微服务系统相对于以往的单体系统更为复杂，当业务增加时，服务也将越来越多，服务的频繁部署、监控将变得复杂起来，尤其在上了 K8s 以后会更加复杂。那么有没有一款全栈的容器云平台来帮我
1.初学vue.js,使用vue-cli脚手架搭建项目
至情相遇的博客
08-07 1424
最近一段时间,通过官网API教程,视频,博客等资料学习了vue.js,发现真的很好用,参考别人写的博客,自己也想来记录一下所学的知识. 介绍 1.0 Vue.js是一套构建用户界面的渐进式框架。 2.0 Vue 只关注视图层，采用自底向上增量开发的设计。 3.0 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 安装Node.js 使用vue.js之前,我...
Vue.js初学
weixin_45747080的博客
11-19 8630
Vue.js从零开始 1、简单认识Vue.js Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2、Vue.js安装 CDN引入 直接下载然后引入，script方式引用 npm方式安装 注意开发环境版本（vue.js）和生产环境版
初学vue
weixin_51719919的博客
02-13 531
第一步：安装vue sudo npm install -g @vue/cli（没有权限问题不需要写sudo） 第二步：选择配置 Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint) 第三步：依次输入下图命令即可启动vue项目，我的项目叫做 newstart 报错 Parsing error: x-invalid-end-tag vue/no-parsing-error 网上查到解决方案： 方法一： vscode里面选择 设置 搜索
初学vue前台系统创建过程问题
h1443862503的博客
06-12 912
第一次引入element-plus表单验证时报错： Vue3。
初学者vue3.0语法
03-13
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue 3.0 是 Vue 的最新版本，带来了许多改进和优化，旨在提升性能、简化代码并增强可维护性。在这个初学者指南中，我们将深入探讨Vue 3.0的一些关键...
Vue.js devtools
04-18
Vue.js devtools是一款专为Vue.js开发者设计的强大工具，它作为一个浏览器扩展，可以在Chrome和Firefox等主流浏览器上...无论是初学者还是经验丰富的开发者，都应该熟练掌握Vue.js devtools的使用，以提升开发体验。
the.majesty.of.vue.js_vue.js_vuejs_
10-01
Vue.js，作为一款轻量级的前端JavaScript框架，由尤雨溪（Evan You）创建，已经在开发社区中获得了广泛的认可。...无论你是初学者还是经验丰富的开发者，Vue.js都能提供一套高效且优雅的解决方案。
pig-ui使用记录（貌似是全网第一篇？）-基于Spring Cloud 2021、Spring Boot 2.6、OAuth2 的 RBAC权限管理系统前端
coderYYY的博客
05-03 3351
pig-ui使用记录
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 721
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 969
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 773
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 973
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
Vue.js初学者入门教程：渐进式JavaScript框架解析
"这篇教程是针对初学者的Vue.js入门指南，旨在介绍Vue.js的基本概念、学习资源、发展历史以及与其他前端框架的对比。" Vue.js是一个流行的渐进式JavaScript框架，适合用来构建用户界面，尤其适用于开发单页面应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值