【4858美高梅】js学习笔记之修饰符详解,安装及常用命令介绍

By admin in 4858美高梅 on 2019年3月27日

 前言

上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的行使办法,本文介绍一下v-on绑定事件的一些质量的选拔形式。

本篇将简单介绍常用的修饰符。

本文为转发,原版的书文:Vue学习笔记入门篇——安装及常用命令介绍

本篇将简单介绍常用的修饰符。

在上一篇中,介绍了  class=”cnblogs【4858美高梅】js学习笔记之修饰符详解,安装及常用命令介绍。_code”>v-model 和  class=”cnblogs_code”>v-on 不难用法。除了健康用法,这一个指令也支持特别措施绑定方法,以修饰符的主意贯彻。经常都以在命令前面用小数点“.”连接修饰符名称。

v-on绑定指令属性

在上一篇中,介绍了 v-model 和 v-on
简单用法。除了常规用法,那个指令也补助尤其措施绑定方法,以修饰符的点子贯彻。平日都以在命令前边用小数点“.”连接修饰符名称。

介绍

Vue.js是当时非常火的二个JavaScript
MVVM库,它是以多少驱动和组件化的考虑营造的。比较于Angular.js,Vue.js提供了特别简洁、更便于理解的API,使得大家可以相当的慢地上手并利用Vue.js。

 

      .stop属性

截留单击事件继续前行传播(不难点说正是不让父节点及父节点以上的节点事件触发),本示例假设没有stop属性,父节点和祖父节点事件将会接触,并在支配台出口内容,示例代码和演示结果如下:

4858美高梅 14858美高梅 2

 1  1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

4858美高梅 3

若是添加stop属性,则不会触发父节点和四伯节点事件,不会在支配台出口相应事件始末,示例代码和演示结果如下:

4858美高梅 44858美高梅 5

 1 1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

4858美高梅 6

壹 、v-model的修饰符

安装

① 、v-model的修饰符

 v-model 是用以在表单表单成分上创设双向数据绑定的通令。在 <input> 和 <textarea> 上,私下认可通过监听成分的 input 事件来更新绑定的属性值。

为了能明显的看出绑定属性值的成形,供给在Chrome浏览器中安装Vue
Devtools增加程序。当查看Vue开发的页面时,按F12就足以在开发者工具里观望Vue页签。那里需求注意,唯有在引用Vue的开发版本文件,即vue.js文件时,Vue
Devtools工具才能寻常使用。

.lazy

率先在 vm 对象中追加内需绑定的属性

1 var vm = new Vue({
2     el: "#app",
3     data: {
4         input_lazy: ""
5     }
6 });

在页面中的 input 的要素上丰裕指令

1 <div class="row">
2     <h2>v-model.lazy</h2>
3     <input type="text" v-model.lazy="input_lazy" />
4 </div>

开辟页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化

4858美高梅 7

当在文本框输入内容,并且光标宗旨没有偏离文本框时,属性值没有实时爆发变化

4858美高梅 8

而当难题离开文本框时,属性值产生了转移并与文本框内容保持一致。从这些事例能够观看 .lazy 修饰符延迟了一块儿立异属性值的火候。即将原本绑定在 input 事件的联名逻辑变化为绑定在 change 事件上。

4858美高梅,.number

该修饰符用来将输入内容自动转换来数值。

在 vm 对象里增加二个天性,暗中同意为空字符串

1 var vm = new Vue({
2     el: "#app",
3     data: {
4         input_number: ""
5     }
6 });

在页面包车型的士 input 成分上添加指令

1 <div class="row">
2     <h2>v-model.number</h2>
3     <input type="text" v-model.number="input_number" />
4     <hr />
5 </div>

打开页面,在文本框内输入内容,查看绑定属性值的变型

4858美高梅 9

当起先输入数字时,属性值将实时更新成Number类型的数值。数字后输入任何非数字的字符,属性值将不再变化。

4858美高梅 10

而当起始输入非数字的字符串时,因为Vue不可能将字符串转换来数值,所以属性值将实时更新成相同的字符串。固然前边输入数字,也将被作为字符串。

.trim

该修饰符用来机关过滤字符串前后的空字符。

在 vm 对象中加进2本品质,默许为空字符串

1 var vm = new Vue({
2     el: "#app",
3     data: {
4         input_trim: ""
5     }
6 });

在 input 上助长指令

1 <div class="row">
2     <h2>v-model.trim</h2>
3     <input type="text" v-model.trim="input_trim" />
4     <hr />
5 </div>

开辟页面,在文本框输入内容,并在内容前后添加多少个空格

4858美高梅 11

Vue会自动过滤掉前后的四个空格,最后属性值是内外没有空字符的字符串。

 

.prevent属性

该方法将公告 Web
浏览器不要执行与事件波及的默许动作(假诺存在这样的动作),注意就算 伊芙nt
对象的 cancelable 属性是
fasle,那么就从未默许动作,也许不可能阻挡暗许动作,无论哪一类意况,调用该属性都未曾意义。

归纳示例如下,在页面from表单中<input
type=””/> 固然 type 属性是 “submit”

假使没有点名prevent,点击事件自动触发from表单action跳向钦点的网站,示例代码和实例结果如下:

4858美高梅 124858美高梅 13

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("页面重新加载了");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

4858美高梅 14

假若钦赐prevent,点击事件则不会触发from表单action跳向钦点的网站,示例代码和实例结果如下:

4858美高梅 154858美高梅 16

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("去不了百度吧");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

4858美高梅 17

 v-model 是用以在表单表单成分上创设双向数据绑定的授命。在 <input>
和 <textarea> 上,暗中同意通过监听成分的 input
事件来更新绑定的属性值。

CDN

https://unpkg.com/vue,
会保持和 npm 公布的流行的本子一样。能够在
https://unpkg.com/vue/
浏览 npm 包能源。代码中央直机关接引用以下代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

二 、v-on的修饰符

绑定的事件修饰符可以变动事件的触及方式。

.stop

该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

在 vm 对象里添加八个事件

 1 var vm = new Vue({
 2     el: "#app",
 3     methods: {
 4         div_click: function () {
 5             console.log("div click...");
 6         },
 7         stop_click: function () {
 8             console.log("stop_click...");
 9         }
10     }
11 });

将地点四个格局绑定到一组具有父子关系的因素上

1 <div class="row">
2     <h2>v-on.stop</h2>
3     <div @click="div_click">
4         <button type="button" @click.stop="stop_click">StopPropagation</button>
5     </div>
6     <hr />
7 </div>

打开页面,并点击按钮,查看控制台打印结果

4858美高梅 18

根据事件冒泡原理,点击按钮时,从脚下接触的要素初始,沿着它的父成分一向到根成分,都会挨个触发 click 事件。不过使用了 .stop 修饰符后,将只会触发当前成分的 click 事件,并阻止事件向上冒泡。

.prevent

该修饰符会阻止当前风云的暗中同意行为。同理于调用 event.preventDefault() 方法

在 vm 对象里添加2个测试方法

1 var vm = new Vue({
2     el: "#app",
3     methods: {
4         form_submit: function () {
5             console.log("form submit!");
6         }
7     }
8 });

页面添加2个 form 表单,并绑定表单的交付事件

1 <div class="row">
2     <h2>v-on.prevent</h2>
3     <form @submit.prevent="form_submit">
4         <button type="submit">Submit</button>
5     </form>
6     <hr />
7 </div>

当点击提交按钮时,会接触绑定的轩然大波,并且阻止表单提交并刷新当前页面包车型客车默许行为。

.self

该指令只当事件是从事件绑定的因素自身触发时才触发回调

修改上边 .stop 的例证,在父成分 div 上添加样式

1 <div class="row">
2     <h2>v-on.self</h2>
3     <div @click.self="div_click" style="display:inline-block; width: 200px; background-color:red;">
4         <button type="button" @click="stop_click">Button</button>
5     </div>
6     <hr />
7 </div>

开拓页面

4858美高梅 19

因为父成分比它的子成分要长,所以右边会有局地革命的父成分呈现出来。分别点击按钮和革命区域,查看控制台打字与印刷结果

4858美高梅 20

因为 div_click 事件被修饰符绑定,唯有在一向点击到父成分 div ,即青黄区域内,事件才会被触发。

哪怕点击了它的子元素触发了子成分的事件,依据事件冒泡原理,父成分的风云应该被触发,不过因为事件的触发源并不是事件绑定的因素自个儿,所以父成分事件不会被触发。

.one

该修饰符表示绑定的事件只会被触发3遍

在 vm 对象中添加叁个测试方法

1 var vm = new Vue({
2     el: "#app",
3     methods: {
4         once_click: function () {
5             console.log("once click...");
6         }
7     }
8 });

页面添加3个按钮,绑定事件

1 <div class="row">
2     <h2>v-on.once</h2>
3     <button type="button" @click.once="once_click">Button</button>
4     <hr />
5 </div>

开拓页面,数十次点击按钮。只有在第①回点击时,事件才会接触。

键值修饰符

该修饰符能够用来监听键盘事件

在 vm 对象中添加一个测试方法

1 var vm = new Vue({
2     el: "#app",
3     methods: {
4         enter_click: function () {
5             console.log("enter click...");
6         }
7     }
8 });

页面扩充一个 input 成分,监听键盘事件

1 <div class="row">
2     <h2>键值修饰符</h2>
3     <input type="text" @keyup.13="enter_click" />
4     <hr />
5 </div>

开辟页面,在文本框输入内容,并按回车,查看控制台打字与印刷结果

4858美高梅 21

透过 keyup.keyCode 的艺术来监听键盘特定按键的轩然大波。也足以由此按键名称来监听

1 <input type="text" @keyup.enter="enter_click"/>

也得以自定义按键名称

1 // 自定义按键名称
2 Vue.config.keyCodes.ent = 13;
3 
4 // 页面引用
5 <input type="text" @keyup.ent="enter_click"/>

 

 .capture属性

加上事件监听器时选取事件捕获格局,即成分自己触发的风云先在此随处理,然后才交由在那之中因素实行处理,当点击最底部成分<div>触发事件时,先物色带有监听器的成分,依据节点优先级先触发带有该修饰符的因素,然后触发本人事件,最终发惹祸变冒泡。

本示例中先触发打字与印刷伯公节点,然后触发打字与印刷父节点,然后打字与印刷自身节点,最后触发打字与印刷曾外祖父节点,示例代码和结果如下:

4858美高梅 224858美高梅 23

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.capture="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click.capture="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 24

为了能显著的观望绑定属性值的更动,须要在Chrome浏览器中装置Vue
Devtools扩张程序。当查看Vue开发的页面时,按F12就足以在开发者工具里看看Vue页签。那里供给注意,唯有在引用Vue的费用版本文件,即vue.js文件时,Vue
Devtools工具才能健康使用。

NPM

在用 Vue.js 营造大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack
或 Browserify 模块打包器合作使用。 Vue.js
也提供配套工具来支付单文件组件。

npm install vue

.self属性

只当在event.target是眼下成分本人时接触处理函数,即事件不是从内部因素触发的。通俗点说唯有点击成分自己的时候接触事件,当点击父成分触发事件还是点击子元素发惹祸件冒泡时并不触发成分本人事件。
本示例点击父节点照旧子节点时并不打字与印刷本身成分事件,示例代码和实例结果如下:

4858美高梅 254858美高梅 26

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.self="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 27

.lazy

Hellow World示例

<div id="app">
    <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el:'#app',
    data:{
        message:'Hello word'
    }
})

运维结果:

4858美高梅 28

中间app为Vue对象,el钦点功效在html的要素,即例子中<div
id=’app’></div>,data是多少对象,数据绑定最广大的款型就是使用
“Mustache” 语法(双大括号)的文本插值。

.once属性

点击事件将只会接触2次,通俗点说正是因素自个儿事件只好使用一次,第三回点击成分时候并不接触事件,可是不阻碍事件冒泡。
本示例中首先次点击时打字与印刷子节点和父节点,第②次点击时并不打字与印刷子节点,如故打字与印刷父节点及以上节点,示例代码和实力结果如下:

4858美高梅 294858美高梅 30

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click.once="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 31

首先在 vm对象中加进内需绑定的性质

常用命令

Vue.js的授命是以v-初始的,它们功用于HTML成分,指令提供了有个别独特的性状,将指令绑定在要素上时,指令会为绑定的目的成分添加一些优秀的一言一行,大家得以将指令看作特殊的HTML天性(attribute)。
Vue.js提供了一部分常用的放权指令,接下去我们将介绍以下几个放置指令:

.passive属性

滚动事件的暗中认可行为 (即滚动行为)
将会立刻触发,而不会等待onScroll实现,那里面涵盖event.preventDefault()的景观

总括:关于终极壹性格子passive小编也不是很熟稔,假诺供给请大家再度查阅资料。

 var vm = new Vue({
   el: "#app",
   data: {
     input_lazy: ""
   }
 });

v-model

在表单控件恐怕零部件上创立双向绑定
修饰符:

.lazy – 取代 input 监听 change 事件
.number – 输入字符串转为数字
.trim – 输入首尾空格过滤

以身作则代码:

<div id="app-model">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
var app_model = new Vue({
    el:'#app-model',
    data:{
        message:''
    }
})

在输入框输入内容时,其上方同步展现输入内容:

4858美高梅 32

在页面中的 input 的因素上丰硕指令

v-if

v-if是条件渲染指令,它依据悉明式的真伪来删除和插入成分,它的主干语法如下:

v-if="expression"

expression是三个重返bool值的表明式,表达式能够是3个bool属性,也能够是二个回来bool的运算式,如以下代码:

<div id="app-if">
    <p v-if="seen">你可以看见我</p>
</div>

    var app_if = new Vue({
        el:'#app-if',
        data:{
            seen:true
        }
    })

运转结果如下:

4858美高梅 33

比方您在控制台设置 app_if.seen=false 则”你能够望见我”字样就会烟消云散不见

 <div class="row">
   <h2>v-model.lazy</h2>
   <input type="text" v-model.lazy="input_lazy" />
 </div>

v-show

v-show也是标准渲染指令,和v-if指令不相同的是,使用v-show指令的因素始终会被渲染到HTML,它只是简短地为要素设置CSS的style属性。例如:

<div id="app-show">
    <p v-show="age > 25">Age:{{age}}</p>
</div>

    var app_show = new Vue({
        el:'#app-show',
        data:{
            age:28
        }
    })

运维结果如下:

4858美高梅 34

一律,假若在控制台修改app_show.age的值,如若age>25的结果为false的话,界面中的文本也会流失不见。

开辟页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化

v-else

能够用v-else指令为v-if或v-show添加一个“else块”。v-else成分必须马上跟在v-if或v-show成分的前边——不然它无法被识别。
演示代码:

<div id="app-else">
    <p v-if="age > 18">{{name}}的年龄是{{age}}岁,已成年</p>
    <p v-else>{{name}}的年龄是{{age}}岁,未成年</p>
</div>

    var app_else = new Vue({
        el:'#app-else',
        data:{
            name:'chain',
            age:17
        }
    })

运转结果如下:

4858美高梅 35

4858美高梅 36

v-for

v-for指令基于一个数组渲染3个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是二个数组,item是近来被遍历的数组元素。例如:

<div id="app-for">
    <ul v-for="item in items">
        <li>{{item}}</li>
    </ul>
</div>
var app_for = new Vue({
    el:'#app-for',
    data:{
        items:[
            'Vue',
            'Angular',
            'React'
        ]
    }
})

运营结果:

4858美高梅 37

当在文本框输入内容,并且光标大旨没有距离文本框时,属性值没有实时发生变化

v-bind

v-bind指令可以在其名目后边带1个参数,中间放二个冒号隔开分离,那些参数日常是HTML成分的表征(attribute),例如:v-bind:class

v-bind:argument="expression"

修饰符:

.prop – 被用来绑定 DOM 属性。(what’s the difference?)
.camel – (2.1.0+) 将 kebab-case 天性名转移为 camelCase. (从 2.1.0
初始支持)
.sync (2.3.0+) 语法糖,会扩张成3个翻新父组件绑定值的 v-on 侦听器。
示范代码:

<div id="app-bind">
    ![](img_url)
</div>
var app_bind = new Vue({
    el:'#app-bind',
    data:{
        img_url:'https://cn.vuejs.orglogo.png'
    }
})

运营结果:

4858美高梅 38

4858美高梅 39

v-on

绑定事件监听器。事件类型由参数钦点。表明式能够是三个主意的名字或二个内联语句,借使没有修饰符也得以省略。可缩写为@

用在一般成分上时,只可以监听 原生 DOM
事件。用在自定义成分组件上时,也能够监听子组件触发的自定义事件。

在监听原生 DOM
事件时,方法以事件为唯一的参数。假如利用内联语句,语句能够访问二个$event 属性: v-on:click=”handle(‘ok’, $event)”
修饰符:

.stop – 调用 event.stopPropagation()。
.prevent – 调用 event.preventDefault()。
.capture – 添加事件侦听器时使用 capture 格局。
.self – 只当事件是从侦听器绑定的因素本人触发时才触发回调。
.{keyCode | keyAlias} – 只当事件是从特定键触发时才触发回调。
.native – 监听组件根成分的原惹祸件。
.once – 只触发3次回调。
.left – (2.2.0) 只当点击鼠标左键时接触。
.right – (2.2.0) 只当点击鼠标右键时接触。
.middle – (2.2.0) 只当点击鼠标中键时触发。
.passive – (2.3.0) 以 { passive: true } 形式加上侦听器

以身作则代码:

<div id="app-on">
    <p>{{message}}</p>
    <button @click="setMessage">Set Message</button>
</div>
var app_on = new Vue({
    el:'#app-on',
    data:{
        message:''
    },
    methods:{
        setMessage:function () {
            this.message='hello world';
        }
    }
})

点击按钮后,结果如下:

4858美高梅 40

而当难题离开文本框时,属性值爆发了变动并与文本框内容保持一致。从那个事例能够看到.lazy修饰符延迟了联合创新属性值的机会。即将原本绑定在input事件的同步逻辑变化为绑定在
change事件上。

原创博文,转载请注脚出处
回来目录
下一节:Vue学习笔记入门篇——数据及DOM

.number

该修饰符用来将输入内容自动转换来数值。

vm对象里增添2个天性,默许为空字符串

 var vm = new Vue({
   el: "#app",
   data: {
     input_number: ""
   }
 });

在页面包车型地铁 input 成分上添加指令

 <div class="row">
   <h2>v-model.number</h2>
   <input type="text" v-model.number="input_number" />
   <hr />
 </div>

开拓页面,在文本框内输入内容,查看绑定属性值的变型

4858美高梅 41

当起头输入数字时,属性值将实时更新成Number类型的数值。数字后输入任何非数字的字符,属性值将不再变化。

4858美高梅 42

而当开端输入非数字的字符串时,因为Vue不大概将字符串转换来数值,所以属性值将实时更新成相同的字符串。尽管前边输入数字,也将被看做字符串。

.trim

该修饰符用来机关过滤字符串前后的空字符。

vm对象中扩充叁天品质,私下认可为空字符串

 var vm = new Vue({
   el: "#app",
   data: {
     input_trim: ""
   }
 });

input上丰裕指令

 <div class="row">
   <h2>v-model.trim</h2>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>

开拓页面,在文本框输入内容,并在剧情前后添加四个空格

4858美高梅 43

Vue会自动过滤掉前后的多少个空格,最终属性值是前后没有空字符的字符串。

贰 、v-on的修饰符

绑定的风浪修饰符能够更改事件的触发情势。

.stop

该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation()方法

vm对象里添加四个事件

 var vm = new Vue({
   el: "#app",
   methods: {
     div_click: function () {
       console.log("div click...");
     },
     stop_click: function () {
       console.log("stop_click...");
     }
   }
 });

将地方七个章程绑定到一组具有父子关系的因素上

 <div class="row">
   <h2>v-on.stop</h2>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </div>

打开页面,并点击按钮,查看控制台打字与印刷结果

4858美高梅 44

奉公守法事件冒泡原理,点击按钮时,从脚下触及的成分初叶,沿着它的父成分平素到根成分,都会相继触发
click 事件。不过使用了 .stop 修饰符后,将只会触发当前成分的 click
事件,并拦截事件向上冒泡。

.prevent

该修饰符会阻止当前风云的暗中同意行为。同理于调用event.preventDefault()方法

vm目的里添加多个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     form_submit: function () {
       console.log("form submit!");
     }
   }
 });

页面添加2个 form 表单,并绑定表单的交付事件

 <div class="row">
   <h2>v-on.prevent</h2>
   <form @submit.prevent="form_submit">
     <button type="submit">Submit</button>
   </form>
   <hr />
 </div>

当点击提交按钮时,会触发绑定的风浪,并且阻止表单提交并刷新当前页面包车型大巴暗中同意行为。

.self

该指令只当事件是从事件绑定的成分自己触发时才触发回调

修改下面.stop的事例,在父成分 div上加上样式

 <div class="row">
   <h2>v-on.self</h2>
   <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
     <button type="button" @click="stop_click">Button</button>
   </div>
   <hr />
 </div>

开辟页面

4858美高梅 45

因为父成分比它的子成分要长,所以右边会有一对湖蓝的父成分显示出来。分别点击按钮和月光蓝区域,查看控制台打字与印刷结果

4858美高梅 46

因为 div_click 事件被修饰符绑定,唯有在直接点击到父元素 div
,即金黄区域内,事件才会被触发。

就是点击了它的子成分触发了子成分的风浪,依照事件冒泡原理,父成分的轩然大波应该被触发,但是因为事件的触发源并不是事件绑定的要素本人,所以父成分事件不会被触发。

.one

该修饰符表示绑定的风浪只会被触发一遍

vm对象中添加三个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     once_click: function () {
       console.log("once click...");
     }
   }
 });

页面添加1个按钮,绑定事件

 <div class="row">
   <h2>v-on.once</h2>
   <button type="button" @click.once="once_click">Button</button>
   <hr />
 </div>

打开页面,多次点击按钮。惟有在首先次点击时,事件才会接触。

键值修饰符

该修饰符能够用来监听键盘事件

vm目的中添加三个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

页面扩展一个 input 成分,监听键盘事件

 <div class="row">
   <h2>键值修饰符</h2>
   <input type="text" @keyup.="enter_click" />
   <hr />
 </div>

开拓页面,在文本框输入内容,并按回车,查看控制台打印结果

4858美高梅 47

经过 keyup.keyCode
的法子来监听键盘特定按键的事件。也能够透过按键名称来监听

 <input type="text" @keyup.enter="enter_click"/>

也足以自定义按键名称

 // 自定义按键名称
 Vue.config.keyCodes.ent = 13;

 // 页面引用
 <input type="text" @keyup.ent="enter_click"/>

上述正是本文的全体内容,希望对我们的就学抱有协助,也可望大家多多援救脚本之家。

您可能感兴趣的篇章:

  • vue事件修饰符和按键修饰符用法计算
  • Vue
    input控件通过value绑定动态属性及修饰符的法门
  • 怎么着晓得Vue的.sync修饰符的利用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有