浅谈Vue中的参数，动态参数和修饰符

总所周知，Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

并且Vue.js提供了完全的 JavaScript 表达式支持，能够对所有的属性键值或数据进行绑定。所以简单来说它可以实现HTML+JS的大部分方法和功能，功能非常强大。

这里要说的Vue也有专门的数据绑定方式，这就是插值语法中的指令元素，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。它的类型也很多样，如“v-if”，“v-for”，“v-model”，“v-on”，“v-bind”等等，其中的具体内容在其他文档中有细说，这里就不赘述了。

首先在我们使用这些指令时，首先需要将其与参数关联起来才能实现我们所需的功能。

参数

一些指令能够接收一个参数，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute，并通过“url”这个参数来控制a标签的不同链接。

		<div id="app">

			<div><a v-bind:href="url">这是一个链接</a></div>

		</div>

我们可以在data中定义“url”的不同数据来测试数据更新的效果。如下：

<script>
			var vm = new Vue({
				el: '#app',
				data: {
					url: 'baidu.com',
				},
				methods: {
				}
			})
</script>

这就是一个指令中的简单参数，它能够在既有的功能上做出我们所需的各种改变，但是却无法做功能上的变化，就如上面所说v-bind绑定的href只能作为a标签的链接，为了解决这个问题，我们可以使用动态参数。

动态参数

自 2.6.0 版本之后，可以用方括号（[ ]）括起来的 JavaScript 表达式作为一个指令的参数，以动态的实现功能。

示例如下：

<div id="app">
			<div><a v-model:[href]="url">这是一个链接</a></div>

			<div><a v-on:[things]="doSomething">事件</a></div>
</div>

<script>
			var vm = new Vue({
				el: '#app',
				data: {
					href: 'href',
					things: 'mouseover',
					url: 'baidu.com',
					contents: "doSomething"
				},
				methods: {
					doSomething: function() {
						alert('已被触发！')
					}
				}
			})
		</script>

这里需要注意的一点是：

可以看到这里并没有给v-on中的“doSomething”动态绑定数据，而是直接使用的固定值，这是因为当值为方法名时，无法为其绑定一个字符串用来动态更改方法名！！！

当然，为了简便开发，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写，简写如下：

<div id="app">
			<div><a :[href]="url">这是一个链接</a></div>

			<div><a @[things]="doSomething">事件</a></div>
		</div>

代码中我们给参数和Attribute分别赋了值，实现了在一个指令元素中随心所欲的绑定我们想要的功能的效果。

不过，这样的写法要求我们对表达式和值都需要有一定的约束，不然会出现错误无法显示。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如下面的写法：

		<div id="app">
		
			<div><a :[href+ "s" ]="url">这是一个链接</a></div>
			
		</div>

此时就算给hrefs绑定值也是无效的，因为在HTML attribute不支持此种写法。常用的解决办法便是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式，简单来说就是将字符串计算拼接之后再放入方括号内，可以完美解决这个问题。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，又可以说其是对参数绑定后的方法拓展。

以下给出几个常用的修饰符方法：

lazy这个修饰符会在光标离开input框才会更新数据

<input type="text" v-model.lazy="value">

trim是输入框过滤首尾的空格

<input type="text" v-model.trim="value">

number的功能是先输入数字就会限制输入只能是数字

<input type="text" v-model.number="value">

stop是阻止事件冒泡

<button @click.stop="test">test</button>

prevent 阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件

<a @click.prevent="test">test</a>

self 只有元素本身触发时才触发方法，就是只有点击元素本身才会触发

<div @click.self="test"></div>

once 只能用一次，无论点击几次，执行一次之后都不会再执行

<div @click.once="test"></div>

大家直接在事件后面添加上使用就可以。

以上就是全部内容，看过给个关注吧。