v-on 以及v-model的修饰符以及vue的常用指令

最近在使用vue，那么就来总结一下vue其中这两个指令的修饰符

一. v-on

1.stop

阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

2.prevent

提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

修饰符可以串联

<a v-on:click.stop.prevent="doThat"></a>

3.capture

添加事件监听器时使用事件捕获模式，

即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

4.self

只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

5.once

点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

6.passive

事件的默认行为将会立即触发

<div v-on:scroll.passive="onScroll">...</div>

　　还有需要注意的是使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
　　不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

 

 

二. v-model  用于数据的双向绑定

v-model 的三个修饰符，一般用于控制数据同步的时机

1、v-model.trim 自动过滤输入内容最开始 和 最后的 空格，中间的会保留一个空格，多的会被过滤掉

2、v-model.lazy 一般情况下，在input的 v-model是一直在同步 输入的内容与显示的内容，不过再添加上 .lazy后，就会变成：在失去焦点或按回车时才更新数据

3、v-model.number 自动将输入的数据转成 number类型，（ 不设置.number的情况下即使输入的是数字也会被当成字符串处理 ）

 

三.v-bind

v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click

 <a @click="get()">aa</a>

 

四.v-html

我们可以通过v-html指令在标签中添加标签,如：

<div id="app">

<div v-html="vue">

</div>

</div>

<script src="./vue.js"></script>

<script> let app01 = new Vue({ el: "#app", data: { vue: '<h1>Hello Vue!</h1>' } }) </script>

 

 

五.v-text

我们可以通过v-text指令在标签中添加文本,如：

<div id="app">

<div v-text="name">

</div>

</div>

<script src="./vue.js"></script>

<script> let app01 = new Vue({ el: "#app01", data: { name: "dogfa" } }) </script>