Vue基本指令

最新推荐文章于 2023-01-03 18:02:41 发布
最新推荐文章于 2023-01-03 18:02:41 发布
阅读量5.2k 收藏 19
点赞数 58
分类专栏： Vue 文章标签： vue javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46085790/article/details/112953767
版权

Vue基本指令

     Vue基本模板语法
     Vue绑定类样式和内联样式
     条件渲染指令
     事件绑定





Vue基本模板语法

    1. 文本插值
  1. 使用双大括号{{}} 表示：基本形式
  2. 使用v-once指令实现：只需要渲染一次数据，后续数据变化不再关心时
  3. 使用v-text / v-html 指令实现：v-text可替代{{}}，v-html解析html代码片段
<body>
		<div id="app">
			<p>{{ title}}</p>
			<p v-once>{{ title}}</p>
			<p v-text="title"></p>
			<p v-html="title"></p>
			
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			
			var vm=new Vue({
				el:"#app",
				data:{
					title:'欢迎你'
				}
				
			});
			
		</script>
	</body>

    2. 表达式：各种数值，变量和运算符的综合体 
<body>
		<div id="app">
			<p>{{number+1}}</p>
			<p>{{ok?"yes":"no"}}</p>
			<p>{{message.split("").reverse().join("")}}</p>
			<div v-text="'list-'+id"></div>
			
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			
			var vm=new Vue({
				el:"#app",
				data:{
					number:1,
					ok:true,
					message:"hello world",
					id:"01"
					
				}
				
			});
			
		</script>
	</body>

Vue只支持单个表达式，不支持语句和流程控制，另外，在表达式中，不能使用用户自定义的全局变量，只能使用js的全局变量。
如：Math 和 Date，以下是无效表达式代码
{{ var book=“Vue基本指令”}}
{{ if (ok) return msg }}





Vue绑定类样式和内联样式

Vue绑定类样式
    1. v-bind ：接受一个参数，在指令后以冒号指明
对象语法 
<div v-bind:class="{类样式：绑定数据，...}"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		<style>
			.class1{
 		 		 background: #444;
		 		 color: #eee;
			}
		</style>
	</head>
<body>
	<div id="app">
  		<label for="r1">修改颜色</label>
  		<input type="checkbox" v-model="use" id="r1">
 	 	<br>
  		<div v-bind:class="{'class1': use}">颜色</div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	use:true //使用 class1 类的样式
     		 	use: false //不使用 class1 类的样式
 			 }
		});
	</script>
</body>

数组语法 
<div v-bind:class="[绑定数据1,绑定数据2,...]"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		<style>
			#app{
				width: 600px;
				
				margin: 50px auto;
			}
			
			#app .border{
				width: 300px;
				height: 300px;
				border: solid 2px red;
			}
			
			#app .shadow{
				box-shadow: 0 0 10px gray;
			}
			
			#app .black{
				background: green;
			}
		</style>
	</head>
<body>
	<div id="app">
  		
  		<div v-bind:class="[borderClass,shadowClass,BlackClass]"></div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	borderClass:"border",
     		 	shadowClass:"shadow",
     		 	BlackClass:"black"
 			 }
		});
	</script>
</body>
</html>
内联样式
对象语法 
<div v-bind:style="{样式属性：绑定数据}"></div>
		或者
		<div v-bind:style="styleObject">
			<script>
				var vm=new Vue({
					el:"#app",
					data:{
						styleObject{
							样式属性：样式值,
							....
						}
					}
				})
			</script>
		</div>

数组语法 
<div v-bind:style="[baseStyle,overridingStyle]"></div>

缩写方式v-bind 
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>





条件渲染指令

   指令：Vue中一个重要的特性，主要提供一种机制将数据的变化映射为DOM行为。指令时是带有v- 前缀的特殊属性

    1. v-if （ v-else紧跟在v-if后面）：根据表达式seen的真假来移除或插入 p 元素 
<div id="app">
			<p v-if="seen">现在可看到内容</p>
</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					seen:true //显示内容
					seen:false//不显示内容
					
				}
				
			});
			
		</script>

    2. v-show ：简单的切换元素的css属性display

根据true或false切换时间

<div id="app">
  		<input type="checkbox" v-model="inTheSummer">
 	 	<br>
  		<div id="box">
  			<h3>今天</h3>
  			<div v-show="inTheSummer">
  				8:00
  			</div>
  			<div v-show="!inTheSummer">
  				20:00
  			</div>
  		</div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	inTheSummer:true
 			 }
		});
	</script>





事件绑定

   1. v-on：一个指令以特殊的方式绑定。 
<form v-on:submit.prevent="onSubmit"></form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用
 event.preventDefault()：

使用v-on写计算器
在这里插入图片描述
在这里插入图片描述

   2. 事件修饰符

主要修饰符：

  1. .stop:等同于调用event.stopPropagation()方法。
  2. .prevent: 等同于调用event. preventDefault()方法。
  3. .capture: 使用capture模式添加事件监听器
  4. .sef: 只有当事件是从监听元素本身触发时才触发回调。
  5. .once: 点击事件将只会触发一次。

   3.事件修饰符使用代码 
<!--阻止单击事件继续传播-->
<a v-on:click.stop="doThis"></a>

<!--阻止表单默认提交事件-->
<form v-on:submit prevent="onSubmit"> </form>

<!--阻止默认提交事件且阻止冒泡-->
<form v-on:submit.stop. prevent="onSubmit"> </form>

<!--也可以只有修饰符，并不绑定事件-->
<form v-on:submit. prevent> </form>

<!--添加事件监听器时使用事件捕获模式-->
<!--即元素自身触发的事件先在此处理，然后才交由内部元素进行处理-->
<div v-on:click.capture="doThis">... </div>


<!--只有在event.target是当前元素自身时才触发处理函数，即事件不是从内部元素触发的-->
<div v-on:click.self="doThat">... </div>

<!--点击事件将只会触发一次-->
<a v-on:click.once="doThis"> </a>
溪斜山遮
关注
专栏目录
Vue基础与常见指令
Jinx_baobao的博客
03-21 1233
1、Vue简介 1.1 什么是Vue Vue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1.2 Vue的特点是什么 1、组件化，清晰的文档结构 2、声明渲染，数据渲染视图（页面） <body> <!-- 写视图层，我们要展示的内容 --&
vue基础指令——六大类指令
m0_61631823的博客
01-12 1159
vue的基础语法中有六大类指令，分别为：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令 1.内容渲染指令：常用的有三个 v-text:直接跟在元素后面，例如<p v-text="username"></p>,username是指参数，需要在vue实例中data中定义。这个指令有一个缺点，如果p标签中有内容，但在vue实例中又定义了，就会将原来的内容覆盖 {{ }}: 插值表达式，在实际开发中运用最多，它是一个内容占位符，不会覆盖原有拥有的内容
vue基本指令
chen1042246612的博客
04-10 558
<!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-Co...
vue练习demo（1）——使用vue基本指令实现切换菜单栏效果
qq_44860114的博客
11-22 936
这篇文章最后的小demo大家解决了吗？ 我来更新代码了哦！ 实现效果的方式有很多种，我这只是其中一种方法， 如果大家有什么不同的意见可以相互讨论。 需要实现的效果： 菜单栏+与菜单相对应的内容区域 点击菜单栏的时候添加样式 点击不同的菜单，显示对应的内容区域 核心代码如下： <style> li{ list-style: none; display: inline-block; padding: 10px 30px; margin: 0
【Vue基本指令】一.什么是Vue；二.Vue开发的方式；三.Vue的基本指令（重点）
weixin_44892365的博客
01-03 1807
【Vue基本指令】一.什么是Vue;二.Vue开发的方式;三.Vue的基本指令（重点）
VUE3基本指令
znhyXYG的博客
07-04 4004
vue基础指令
vue内置指令详解
08-27
Vue 内置指令详解 Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-...
Vue的基本指令
12november的博客
03-10 286
v-cloak解决屏幕闪动 <!DOCTYPE html> <html> <head> <title>v-cloak解决插值屏幕闪动</title> <script src="../vue.js"></script> <body> <div id="app" v-cloak> &l...
vue的基本指令
m0_46322755的博客
05-11 524
Vue指令之-插值表达式 v-cloak v-text v-html v-bind v-on v-model v-for v-if v-show
Vue基础指令
又一个四季在轮回
03-27 217
v-text <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-html 相当于 innerHTML ，可以识别元素。有点组件的感觉 <div id="app"> <h2 v-html="message"></h2>...
Vue.js基本指令
删库跑路
05-24 947
这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 有时候指令太多会造成记错、记混的问题，所以本文在记忆的时候会采用穿插记忆的方式，交叉比对，不易出错。本文主要讲了一下六个指令：v-if v-show v-else v-for v-bind v-onv-if 条件渲染指令，
vue语法 基本指令
ling_xy的博客
08-01 472
文章目录一.目录及几个主要文件说明二.vue语法vue基本指令1.数据绑定指令2.元素属性绑定 v-bind3.元素显示隐藏4.条件语句指令5.集合绑定 v-for6.类别绑定 class style7.元素的事件绑定 一.目录及几个主要文件说明 目录结构： build文件：打包之后的项目文件 config：配置目录（包括端口之类） node_modules：依赖包文件 src：开发目录文件【开发只使用这个】 包括： assets：放置一些图片（如logo） components：放置组件文件。可以不用
Vue常用基本指令
weixin_45637035的博客
04-06 150
导入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项/属性 }) vue实例的选项 el 用于挂载元素，定义该vue对象的作用范围 data 用于定义变量属性 methods 用于定义函数 computed 计算属性，与methods类似
【实践题】综合使用Vue基本指令实现【简易计算器】功能
最新发布
06-06
好的，让我们来综合使用Vue基本指令实现一个简易计算器功能。 首先，我们需要在HTML中添加一个输入框和一些按钮： ```html <button v-on:click="add">+ <button v-on:click="subtract">- * ...
评论 112
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值