【Vue模板语法下】

最新推荐文章于 2021-06-09 17:19:40 发布
最新推荐文章于 2021-06-09 17:19:40 发布
阅读量309 收藏
点赞数
分类专栏： # Vue前端框架 文章标签： Vue 模板语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43943548/article/details/98212502
版权

目录

前言

本章是Vue模板语法的下一个补充内容。

没什么重要知识点。

样式绑定

因为这个超级简单，所以不过多的讲解。

要说的就是 用到的是 v-bind的绑定指令,然后接上自己写好的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>样式绑定</title>
		<style>
			.a{color: red;}
			.b{color: blue;}
			.c{font-size: 36px;}
		</style>
		
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>样式一</h3>
					<div :class="xa">hello</div>
				</li>
				<li>
					<h3>样式二</h3>
					<div :class="xb">hello</div>
				</li>
				<li>
					<h3>样式三</h3>
					<div :class="xc">hello</div>
				</li>
			</ul>
			
		</div>
		
	</body>
	<script type="text/javascript">
		
		new Vue({
			el:"#app",
			data(){
				return {
					msg:'hello world',
					xa:"a",
					xb:"b",
					xc:['a','c']
				};
			}
			
		});
		
	</script>
</html>

在这里插入图片描述

事件处理器

事件修饰符

修饰符就大概就是在某个指令后面加个后缀。

比如： v-on:click.once=“xxx” 只能使用一次xxx方法

一些常见修饰符：

  	  <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

比如下面的两个例子：一个是使用 .stop 来阻止事件的冒泡传递。

和 .once 只能使用一次 ，更多方法大家都可以试试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>事件处理器</title>
		<style>
			div{
				padding: 30px;
			}
			
		</style>

	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>防止事件冒泡</h3>
					<div @click="a" style="width: 300px;height: 300px;background-color: red;">
						<div @click="b" style="width: 200px;height: 200px;background-color: blue;">
							<div @click="c" style="width: 100px;height: 100px;background-color: pink;">
								<div @click.stop="d" style="width: 50px;height: 50px;background-color: green;">


								</div>

							</div>

						</div>

					</div>
				</li>
				<li>
					<h3>事件只能点击一次(模拟聊天信息发送)</h3>
					{{qqmsg}}<input type="text" v-model="msg" @keyup.enter="send" />
					<button @click="send">ok</button>
					<button @click.once="send">只能点一次</button>

				</li>
				
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello world',
					qqmsg: null,
					
				};
			},
			methods: {
				a() {
					alert('a');
				},
				b() {
					alert('b');
				},
				c() {
					alert('c');
				},
				d() {
					alert('d');
				},
				send() {
					this.qqmsg = this.msg;
					this.msg = null;
				}
			}


		});
	</script>
</html>

在这里插入图片描述

表单常见内容

通常来说的话，表单内部比较麻烦的就是复选框和下拉框。

所以就以这两个为题,

其实说起来也比不难，只是我们之前学过的for循环而已，只不过要点是知道了，可是使用的构造比较的麻烦，所以还是得多敲几遍。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>事件处理器</title>
	

	</head>
	<body>
		<div id="app">
			<ul>
				
				<li>
					<h3>表单中的复选框</h3>
					<div v-for="item,index in hobby"  >
						<input type="checkbox" name="hobby" :value="item.id" v-model="checkedId" />{{item.name}}
						<br>
					</div>
					{{checkedId}}

				</li>
				<li>
					<h3>表单中的下拉框</h3>
					<select name="likes" v-model="selectedId"> 
						<option v-for="item,index in hobby" :value="item.id">{{item.name}}</option>
					</select>
					{{selectedId}}
				</li>
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
				
					hobby: [{
						id: "1",
						name: "大大"
					}, {
						id: "2",
						name: "小小"
					}, {
						id: "3",
						name: "哈哈"
					}],
					checkedId:[],
					selectedId:null
				};
			}
			

		});
	</script>
</html>

在这里插入图片描述

这里也有完整的表单案列：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>vue表单</p>
					<label>姓名：</label><input v-model="uname" /><br />
					<label>密码：</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>年龄：</label><input v-model.number="age" /><br />
					<label>性别：</label>
					<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
					<label>爱好：</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>类别：</label>
					<select v-model="type">
						<option value="-1">===请选择===</option>
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>备注：</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					upwd: null,
					age: 10,
					sex: 1,
					hobby: [{
						id: 1,
						name: '篮球'
					}, {
						id: 2,
						name: '足球'
					}, {
						id: 3,
						name: '象棋'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: 'A'
					}, {
						id: 2,
						name: 'B'
					}, {
						id: 3,
						name: 'C'
					}],
					type: null,
					mark: '学生备注',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				doSubmit: function() {
					console.log('doSubmit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age+10,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

组件

组件可以说是vue里面最为重要的，

许多的结构都是围绕着组件而动。因为他的大抵功能就是可以自主制定html标签，并且使用。

基础组件

比如这个创建一个my-button的标签，来进行使用。

有了这个标签就相当于在html中引用了

<button @click="doxxx">自定义按钮，被ll点击了多少下{{n}}</button>

所以反过来说的话也可以节省代码量。

重点在于：components

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue 组件</title>

	</head>
	<body>
		<div id="app">
			<ul>
				
				<li>
					<h3>局部vue 组件</h3>
					<my-button></my-button>

				</li>
				
			</ul>

		</div>

	</body>
	<script type="text/javascript">
	
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello world'

				};
			},
			components: {
				'my-button': {
					data() {
						return {
							n: null
						};
					},
					template: '<button @click="doxxx">自定义按钮，被zs点击了多少下{{n}}</button>',
					methods: {
						doxxx() {
							this.n++;
						}
					}
				}
			}


		});
	</script>
</html>

在这里插入图片描述

在这后面我再简单的说一下父组件，和子组件。

在组件外面的，也就是包裹着组件components的就是父组件，

当然下面能有多个子组件；

父传子值

我们可以看到父组件中传进了一个变量为m的值

而子组件中是通过**props:[‘m’]**来接收m值
所以就可以通过 {{m}} , 或 this.m来使用m了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue 组件</title>

	</head>
	<body>
		<div id="app">
			<ul>
				
				<li>
					<h3>局部vue 组件(父传子值)</h3>
					<my-button m="坤坤"></my-button>

				</li>
				
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		

		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello world'

				};
			},
			components: {
				'my-button': {
					props: ['m'],
					data() {
						return {
							n: null
						};
					},
					template: '<button @click="doxxx">自定义按钮，被{{m}}点击了多少下{{n}}</button>',
					methods: {
						doxxx() {
							this.n++;
							
						}
					}
				}
			}


		});
	</script>
</html>

子传父值

而在子组件中传值到外面的话，就有点麻烦，因为我们要创建一个指令来给外界传值。

this.$emit(‘tree-click’, this.n, ‘liwangwang’, ‘描述’);

根据上面我们就能知道创建了一个tree-click 的一个指令，
所以在使用的时候，@tree-click="dosss"的时候就能够获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue 组件</title>

	</head>
	<body>
		<div id="app">
			<ul>
				
				<li>
					<h3>局部vue 组件(子传父值)</h3>
					<my-button @tree-click="dosss"></my-button>
				</li>
				
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello world'

				};
			},
			components: {
				'my-button': {
					data() {
						return {
							n: null
						};
					},
					template: '<button @click="doxxx">自定义按钮，被zs点击了多少下{{n}}</button>',
					methods: {
						doxxx() {
							this.n++;
							this.$emit('tree-click', this.n, 'liwangwang', '描述');
						}
					}
				}
			},
			methods: {
				dosss(a, b, c) {
					alert(b);
					alert(c);
				}
			}


		});
	</script>
</html>

全局 vue组件

全局vue,相对于局部组件而已的话，范围的话就广了一些，
在其他的页面，也可以对其使用这个全局vue组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue 组件</title>

	</head>
	<body>
		<div id="app">
			<ul>
				
				<li>
					<h3>全局vue 组件(子传父值)</h3>
					<my-button2 @tree-click="dosss"></my-button2>
				</li>
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		Vue.component('my-button2', {
			props: ['m'],
			data() {
				return {
					n: null
				};
			},
			template: '<button @click="doxxx">自定义按钮，被{{m}}点击了多少下{{n}}</button>',
			methods: {
				doxxx() {
					this.n++;
					this.$emit('tree-click', this.n, 'liwangwang', '描述');
				}
			}

		})

		
	</script>
</html>

总结

Thanks♪(･ω･)ﾉ希望对大家有所帮助

么卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
vue提交事件阻止属性prevent
weixin_45587504的博客
04-19 480
vue提交事件阻止属性prevent
vue指令之v-on事件绑定指令
weixin_44374938的博客
03-06 1371
可以用v-on指令监听DOM事件，便在触发时运行一些javaScript代码。 //v-on指令可以简写为@ <div id="example1"> <button v-on:click='counter+=1'>数值：{{counter}}</button> //在实际中，js代码多是放在外面的 所以js函数通常放在Vue对象的methods中 而且可以通过传参执行函数 <button v-on:click="greet('abc')">Gree
Vue 基本语法
qq_35574727的博客
07-26 339
Vue优点： 灵活、易用、高效； 用于构建用户界面的渐进式框架、自底向上逐层应用； Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。 当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统；数据和 DOM被建立了关联，所有东西都是响应式的。 ...
vue：v-on:submit.prevent
cxy的博客
09-11 7646
form v-on:submit.prevent="addNewTodo" **v-on:submit.prevent ==》指在该表单中的任何提交按钮都可以触发该事件**
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue 3模板语法.pdf
最新发布
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
【Vue记录】事件修饰符
qq_28304961的博客
07-18 173
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .stop .prevent .captu...
v-on指令修饰符大全
桃花扇的博客
07-28 5062
目录 1.事件修饰符 1）.stop 2）.prevent 3）.capture 4）.self 5）.once 6）.passive 2.按键修饰符 3.系统修饰键 4.鼠标按钮修饰符 1.事件修饰符 1）.stop 作用：调用event.stop，阻止事件冒泡 <div id="app"> <div @click="fatherClick"> <button @click.stop="childClick">cli
Vue初识
初心不改，事在人为
07-02 283
一,Vue 的demo 1.创建一个web+ maven工程archtype_webapp 2.创建js文件夹，加入js文件，在html中引入 {{message+“大大”}} 3.{{message+“大大”}} 可以使用三元运算符 {{message ？ “aaa” : “bbb”}} 不能绑定赋值表达式和多个语句 二v-on用于监听dom事件 (v-on:事件名称 @事件名称)...
Vue 入门
Julie的博客
06-20 209
一、Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下： var vm = new Vue({   // 选项 }) 第一个实例： &lt;div id="vue_det"&gt; &lt;h1&gt;site : {{site}}&lt;/h1&gt; &lt;h1&gt;url : {{url}}&lt;/h1&gt; &lt;h1&gt;{{de
vue修饰符
weixin_30340745的博客
03-23 60
事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 ...
vue常用修饰符
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-26 493
转载 原文：https://blog.csdn.net/qq_42238554/article/details/86592295
vue2.0click点击事件修饰符stop阻止单击事件冒泡prevent阻止默认事件
热门推荐
iceking66的博客
10-16 2万+
事件修饰符 在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。 为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？
Vue.js 学习日志——修饰符（七）
不会爬树的程序猿
07-10 330
Vue.js 修饰符 事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> &lt...
Vue阻止form表单的默认提交行为@submit.prevent
qq_40685439的博客
06-09 6335
<form v-on:submit.prevent> <div> <input type="search" name="search" required v-model='inputVaule'> </div> <div> <input type="submit" name="submit" @click='search' value="提交"> </div&..
jQuery事件
weixin_42952665的博客
09-13 302
一、浏览器事件 .error() .resize([[data],fn]) .scroll() 二、文档加载事件 .ready() 三、鼠标事件 .click([[data],fn]) .contextmenu() dblclick([[data],fn]) .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() ....
vue基础中的模板语法
04-02
Vue.js的模板语法是用来描述组件的渲染输出的。它使用的是一种基于HTML的模板语言，可以通过一些特定的指令来绑定数据和事件，实现动态数据绑定和交互效果。以下是Vue.js模板语法的基本用法： 1. 插值表达式{{}}：用于绑定数据，可以直接在模板中插入JavaScript表达式，如 {{message}} 2. 指令v-bind：用于动态绑定HTML属性，如 <a v-bind:href="url"> {{linkText}} </a> 3. 指令v-model：用于双向绑定表单元素和组件的数据，如 <input v-model="message"> 4. 指令v-if、v-else、v-else-if：用于条件渲染，如 <div v-if="isShow">显示内容</div> 5. 指令v-for：用于循环渲染，如 <li v-for="item in list"> {{item}} </li> 6. 指令v-on：用于绑定事件，如 <button v-on:click="handleClick">点击我</button> 除了以上基本用法，Vue.js的模板语法还具有非常丰富的功能，如计算属性、监听器、过滤器等，可以灵活地满足各种需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值