VUE用法（一）

最新推荐文章于 2022-07-04 20:15:00 发布
最新推荐文章于 2022-07-04 20:15:00 发布
阅读量202 收藏 1
点赞数
分类专栏： VUE基础用法 文章标签： vue vue.js builder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AimerDaniel/article/details/119140722
版权

一、Vue JS

1、VUE介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、VUE组件说明

在这里插入图片描述

3、Vue优点

  1. 渐进式：构建项目可以由简单到复杂
  2. 体积小 压缩后的文件只有33k
  3. 运行效率更高，采用虚拟机DOM，一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术。 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
  4. 双向数据绑定，让开发者不再去操作DOM,将更多的经历投入到业务中。
  5. 生态丰富，市面上有大量的开源项目基于vue 进行开发，成熟稳定.

4、VUE基本语法

4.1、入门案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		<!-- 
			入门案例步骤:
				1.导入vue.js文件   html下部编辑
				2.指定区域进行渲染  需要准备div vue.js代码
				3.创建VUE.js对象 指定渲染区域 动态调用
		 -->
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 在div中展现msg属性 
				插值表达式: {{key}}
			-->
			<h1>{{msg}}</h1>
		</div>
		
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			/**
			 * 语法:
			 * 		1.const 定义常量的
			 * 		2.let: 作用和var类似, 有作用域的概念
			 * 		3.var 特点:没有作用域
			 */
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//key:value
					msg: "您好VUE"
				}
			})		
		</script>
		
	</body>
</html>

5、数据绑定

命令：
		v-text：如果页面没有渲染完成,则不显示信息
		v-html：直接渲染html标签,，不显示值本身，显示标签结果，解析html的数据
		v-pre：跳过预编译，显示标签体本身
		v-once：只渲染一次
5.1）v-text 指令

作用：直接展现解析数据

	<!-- v-text指令 没有闪动效果 -->
	<h3 v-text="text"></h3>
	<!-- 引入js -->
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				//element 元素
				el: "#app",
				data: {
					hello: "helloVue",
					text: "数据绑定text"
				}
			})
		</script>
5.2）v-html 指令

说明：内容中有html结构会被解析为标签,解析html的数据


<p v-html="html"></p>

< ! -- 引入js -->
<script src=" ../js/vue.js "></script><script type="text/javascript">
const app = new Vue( {
	//element元素
	el: "#app",
	data: {
		hello: "helloVue",
		text:"数据绑定text"
		html: "<h1>html测试数据</h1>"
	}
})
</script>
5.3）v-pre 指令

用法：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!-- v-pre跳过编译效果,显示原始mustache标签-->
<h3 v-pre>{{hello}}</h3>
5.4）v-once 指令

用法：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- v-once用法元素和组件只渲染一次-->
<h3 v-once>{{once}}</ h3>
5.5）测试
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE数据显示</title>
	</head>
	<body>
		
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 特点：如果页面没有渲染完成，则直接展示给用户
							插值表达式需要直接显示
				   注意事项：只有显示时采用，输入操作不可用
				   v-text指令：如果页面没有渲染完成，则不显示信息
			 
			 -->
			<h1>{{msg}}</h1>
			
			<!-- v-text指令：如果页面没有渲染完成，则不显示信息-->
			<h1 v-text="msg"></h1>
			
			<!-- v-html指令：直接渲染html标签 -->
			<h1 v-html="h3Html"></h1>
			
			<!-- v-pre指令：跳过预编译，显示标签原属性 -->
			<h1 v-pre>{{msg}}</h1>
			
			<!-- v-prc指令：只渲染一次 -->
			<h1 v-once >{{once}}</h1>
			
		</div>
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//保持原属性
					//key:value
					
					//设置msg的值
					msg: "您好VUE",
					h3Html:"<h3>我需要html渲染</h3>",//html中的标签
					once:"我只被渲染一次",
				}
			})		
		</script>
		
	</body>
</html>

在这里插入图片描述

6、双向数据绑定

6.1）双向数据绑定代码

双向数据绑定：实现了页面与数据的绑定，页面变数据变 / 数据变页面变.。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 双向数据绑定 v-model
							1.数据端---页面
							2.页面-----数据
			-->
			<input name="msg" v-model="msg"/><br>
			<h1>{{msg}}</h1>

		</div>
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//保持原属性
					//key:value
					
					//设置msg的值
					msg: "数据随时修改",
				}
			})		
		</script>
		
	</body>
</html>
6.2） MVVM设计思想
知识回顾：
	MVC模式 核心思想 **减少代码的耦合性**
			M Model:封装的数据
			V View 视图层: 数据的展现
			C Contro 控制层 程序的流转的过程
	衍生：3层代码的结构 Controller—Service–Mapper/Dao
	针对于：后端服务器.

MVVM思想说明:
	M: Model 封装的数据. 数据层
	V: View 数据的展现 视图层
	VM: viewModel视图数据的控制层 控制数据流转
MVVM设计思想是前端模拟后端为了解耦的一种设计思想
6.3）双向数据绑定原理
原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为，之后通过虚拟DOM对象，第一时间更新Model中的属性.
2.当数据发生变化，由虚拟DOM根据数据绑定的规则，第一事件通知真实的DOM对象，至此页面数据发生变化

在这里插入图片描述

7、事件绑定

7.1）v-on指令

语法：

规范：
	v-on:click="函数/直接进行计算"
简化写法：
	@click="函数/直接进行计算"

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 
				需求：实现数据的自增操作
				语法： v-on:click="函数/直接计算"
						简化写法  v-on:	可以简化为@
			-->
			<h1 >
				<div>
					数值：<div v-text="num"></div>
				</div>
			</h1>
			<button v-on:click="num++">自增</button>
			<button @click="num--">简化自减</button>
			<button @click="addNum()">函数自增</button>
			
			<!-- 方法中没有参数,()可以省略 -->
			<button @click="jianNum">函数自减，函数省略括号</button>
			

		</div>
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					num:1
				},
				methods:	{
					//key方法名: value方法体 
					addNum: function(){
						this.num++
					},
					//定义方法简化写法 js脚本支持
					jianNum(){
						this.num--
					},
					
					
				}
			})		
		</script>
		
	</body>
</html>

事件绑定，传递参数
<button @click=“addNum2($event)”>传递event对象
在这里插入图片描述

8、按键触发机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				 语法:	
					1.v-on:keydown="" 按下触发
					2.v-on:keyup=""   弹起来触发
					3.v-on:keypress="" 小键盘触发
				 按键支持:
					.enter  .tab
					.delete (捕获“删除”和“退格”键)
					.esc   .space
					.up .down .left .right
				 
				 需求:用户通过输入 按特殊的键位触发函数 
				 要求1. 按钮实现加法操作 num = num + num2
				 要求2. 用户按回车按钮实现触发 
				 要求3. 用户按空格键实现触发 
			-->
			<h3>用户数据:{{num}}</h3><br>
			<!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
			<input type="text" v-on:keyup.space="addNum" v-model="num2" />
			<button @click="addNum">计算</button>
			
			
		</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 100,
					num2: 0
				},
				methods: {
					addNum(){
						//this.num = this.num + this.num2
						//将字符串转化为数值类型
						this.num +=   parseInt(this.num2) 
					}
				}
			})
		</script>	
	</body>
</html>

9、计算器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 要求
				1.准备两个文本输入框 num1/num2
				2.要求准备一个按钮 "计算" 当点击按钮时实现
				  count=num1+num2
				  将得到的结果通过 总数输出count
				3.当输入num2时可以通过回车按键 计算.
				注意事项: input框默认是字符串
			 -->
			 
			 数值1: <input type="text" v-model="num1" /><br>
			 数值2: <input type="text" v-model="num2" 
				@keyup.enter="addNum"
			 /><br>
			 总数:  {{count}} <br>
			 <button @click="addNum">计算</button>
			
		</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num1: 0,
					num2: 0,
					count: 0
				},
				methods: {
					addNum(){
						this.count = 
							parseInt(this.num1) +  parseInt(this.num2)
					}
				}
			})
		</script>	
	</body>
</html>

10、事件修饰符/按键修饰符

10.1）阻止冒泡 .stop
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 难点: 元素可能需要嵌套,事件可能嵌套
				 说明: 如果事件嵌套则必然带来事件的冒泡.
				 解决方案: 阻止事件冒泡  .stop属性
			 -->
			数值: {{num}}
			<div @click="num++">
				嵌套结构
				<button @click.stop="num++">计算</button>
			</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 0
				},
				methods: {
					
				}
			})
		</script>	
	</body>
</html>
10.2）阻止默认行为 @click.prevent
			<!-- 需求2:
				 a标签作用中的href的跳转是默认规则
				 要求: 用户点击a标签 不跳转页面,同时触发事件
				 解决: 阻止标签的默认行为  @click.prevent	
			 -->
			<a href="http://baidu.com" @click.prevent="aClick">百度</a>
			
			<!-- 用途: prevent阻止页面跳转  a标签/form表单 action同步请求 -->
AimerDaniil
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue指令（三）
jianggeye7485的博客
08-17 2674
一、指令的概念 用于辅助开发者渲染页面的基本架构。 指令分为6大类： ①属性绑定 ②时间绑定 ③内容绑定 内容渲染指令主要用来渲染DOM元素的文本内容。常用有3个 Ⅰ、v-text 例子：把username对应的值，渲染到第一个p标签中,v-text指令会覆盖元素内默认的值 <p v-text="username"></p> <!-- 米玛被password中的值(密码)覆盖--> <p v-text="password">米玛</p> <
Vue事件的处理
honey_xi的博客
04-12 405
事件绑定 <body> <div id="app"> <!-- 使用表达式完成事件的处理 --> <h1>点击次数：{{count}}</h1> <button type="button" @click="count+=1">点击</button> <!-- 获取事件对象 --&g...
vue基础之事件v-onclick=”函数”用法示例
12-01
本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考，具体如下： v-on:click/mouseout/mouseover/dblclick/mousedown….. 事件: v-on:click=”函数” v-on:click/mouseout/mouseover/dblclick/mousedown….. new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} }
vue之基础语法
weixin_59196705的博客
05-12 512
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 语法格式: 使用方式：v-bind:class="expression" expr
怎么在vue的@click里面直接写js_【转】为 Node.js 贡献你的力量 ———— 调试代码
weixin_39958025的博客
11-22 4280
原文作者：百万扩散性甜面包 himself65 原文链接：为 Node.js 贡献你的力量 ———— 调试代码​www.himself65.comNode.js 作为一个世界级的项目，能为它贡献源代码当然是很开心的事情。但如果，在给 Node.js 写了新代码后，不知道如何测试代码的正确性， 将会是非常头疼的事情。本文会着重介绍 Debug Node.js 源代码，方便你为 Node.js 献一...
vue中destroyed方法的使用说明
10-15
`destroyed` 方法是Vue组件生命周期中的一个重要钩子，它在组件实例被销毁之前调用。理解并正确使用`destroyed`方法可以帮助我们优化应用性能，避免资源浪费，并解决某些特定场景下的问题。 ### Vue组件的生命周期 ...
VUE脚手架具体使用方法
10-16
Vue.js脚手架，即Vue CLI（Command Line Interface），是一个官方提供的强大构建工具，它简化了基于Webpack的项目...通过掌握Vue CLI的使用方法，你可以快速搭建起一个功能完善的Vue项目，并享受到现代前端开发的便利。
详解vue中localStorage的使用方法
12-09
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在Vue应用中，有时我们需要在用户关闭浏览器后仍能保存一些数据，这时候Web Storage API中的localStorage就派上了用场。localStorage相比传统的Cookie，...
VUE中使用MUI方法
12-08
VUE中如何使用MUI 1、第一步：下载MUI 百度搜索MUI进入其官网点击右上角github地址，下载MUI文件  2、第二步：拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css...
Vue表单验证插件Vue Validator使用方法详解
08-30
在本文中，我们将深入探讨Vue Validator的使用方法及其核心特性。 首先，为了使用Vue Validator，我们需要在项目中引入Vue.js和Vue Validator的库文件。在示例代码中，引用了Vue 1.0.24和Vue Validator 2.1.3的CDN...
JavaScript
qq_34816935的博客
06-17 429
JavaScrip 作用：跟用户进行交互，对网页进行增删改查的操作 JavaScript的三种样式： 1.行内样式 < body> <input type=“button” value=“我是按钮01” οnclick=“alert(1111)；” </ body> 2.内部样式     2.1在< script >标签里面定义方法    < script type=“text/javascr
vue实现九九乘法表 (还没有实现横向输出) 求助一下，知道的告知一下
weixin_34072159的博客
04-21 1245
<!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-U...
Vue笔记
rsrucdhh的博客
04-18 915
Vue学习笔记
Vue @click 绑定的函数，同时传入事件对象和自定义参数
Mr_Bobcp的博客
11-26 1万+
虽然是从Vue.js中了解到的，但是挺多地方也是适用的。 一、仅仅传入事件对象 HTML <div id="app"> <!-- 不写任何参数 --> <button @click="click">click</button> </div> JS new Vue({ el: '#app', 　　methods: { 　　　　click: function(event){ // 事件对象会自动传入第一个参数 　　　　　　console
Vue教程(三)click 事件
yuan_xw的专栏
08-07 7311
03.【vue】click 事件 click 事件属性 新的属性: methods,该属性用于在 Vue 对象中定义方法。 新的指令:@cick,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法方法通常是 methods 中定义的方法) 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>03_clic
Vue学习--事件绑定
MrWangisgoodboy的博客
07-04 1313
Vue学习--事件绑定
vue——@click的事件命令以及修饰符
chunchun1230的博客
09-29 1万+
1、@click.stop 阻止事件冒泡 //只弹出“noclick” <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .
vue @click的常用方法
蠢蠢欲动的猫
12-10 1万+
点击事件的常用方法 **v-on click 简写是@click** **点击事件的常见的几种使用方法(在vue中)：** ​ 1.prevent：阻止默认事件（常用）； ​ 2.stop：阻止事件冒泡（常用）； ​ 3.once：事件只触发一次（常用）； ​ 4.capture：使用事件的捕获模式； ​ 5.self：只有event.target是当前操作的元素时才触发事件； ​
vue中 @click 绑定点击事件 方法传递参数 typescript(通用)
热门推荐
刘振兴的博客
09-03 4万+
话不多说还是直接上图 简单明了 <template> <div id="header"> <img src="../../assets/logo.jpeg" /> <div v-for="(item,i) in navList" v-bind:key="i" :to="item.path" @click.stop="show(ite...
vue qrcode使用方法
最新发布
03-06
Vue QRCode是一个用于生成二维码的Vue组件。使用Vue QRCode可以轻松地在Vue项目中生成二维码。 使用步骤如下： 1. 安装Vue QRCode： 你可以使用npm或者yarn来安装Vue QRCode。在终端中运行以下命令： ``` npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

AimerDaniil

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

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

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

打赏作者

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

抵扣说明：

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

余额充值