您的位置:时时app平台注册网站 > web前端 > Vue学习之路8-v-on指令学习轻易事件绑定之性质【

Vue学习之路8-v-on指令学习轻易事件绑定之性质【

2019-11-02 01:15

      .stop属性

阻止单击事件继续向上传播(简单点说就是不让父节点及父节点以上的节点事件触发),本示例如果没有stop属性,父节点和爷爷节点事件将会触发,并在控制台输出内容,示例代码和示例结果如下:

彩世界网址 1彩世界网址 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

彩世界网址 3

如果添加stop属性,则不会触发父节点和爷爷节点事件,不会在控制台输出相应事件内容,示例代码和示例结果如下:

彩世界网址 4彩世界网址 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

彩世界网址 6

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。可缩写为@

用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性: v-on:click="handle('ok', $event)"
修饰符:

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.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';
        }
    }
})

点击按钮后,结果如下:

彩世界网址 7

彩世界网址 8

 .capture属性

添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理,当点击最底层元素<div>触发事件时,先查找带有监听器的元素,按照节点优先级先触发带有该修饰符的元素,然后触发自身事件,最后发生事件冒泡。

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

彩世界网址 9彩世界网址 10

 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

彩世界网址 11

本文为转载,原文:Vue学习笔记入门篇——安装及常用指令介绍

.trim

.passive属性

滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待onScroll完成,这其中包含event.preventDefault()的情况

总结:关于最后一个属性passive小编也不是很熟悉,如果需要请大家另行查阅资料。

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

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

 前言

上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法。

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:''
    }
})

在输入框输入内容时,其上方同步显示输入内容:

彩世界网址 12

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

.self属性

只当在event.target是当前元素自身时触发处理函数,即事件不是从内部元素触发的。通俗点说只有点击元素本身的时候触发事件,当点击父元素触发事件或者点击子元素发生事件冒泡时并不触发元素本身事件。
本示例点击父节点或者子节点时并不打印本身元素事件,示例代码和实例结果如下:

彩世界网址 13彩世界网址 14

 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

彩世界网址 15

NPM

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

npm install vue

vm对象里添加一个测试方法

.once属性

点击事件将只会触发一次,通俗点说就是元素自身事件只能使用一次,第二次点击元素时候并不触发事件,但是不阻止事件冒泡。
本示例中第一次点击时打印子节点和父节点,第二次点击时并不打印子节点,仍然打印父节点及以上节点,示例代码和实力结果如下:

彩世界网址 16彩世界网址 17

 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

彩世界网址 18

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'
    }
})

运行结果:

彩世界网址 19

其中app为Vue对象,el指定作用在html的元素,即例子中<div id='app'></div>,data是数据对象,数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。

.lazy

.prevent属性

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作),注意如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作,无论哪种情况,调用该属性都没有作用。

简单示例如下,在页面from表单中<input type=''"/> 如果 type 属性是 "submit"

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

彩世界网址 20彩世界网址 21

 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

彩世界网址 22

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

彩世界网址 23彩世界网址 24

 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

彩世界网址 25

v-for

v-for指令基于一个数组渲染一个列表,它和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'
        ]
    }
})

运行结果:

彩世界网址 26

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

v-on绑定指令属性

CDN

https://unpkg.com/vue, 会保持和 npm 发布的最新的版本一致。可以在 https://unpkg.com/vue/ 浏览 npm 包资源。代码中直接引用以下代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <div class="row">
   <h2>v-on.stop</h2>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </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
        }
    })

运行结果如下:

彩世界网址 27

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

在页面的 input 元素上添加指令

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
        }
    })

运行结果如下:

彩世界网址 28

.stop

安装

首先在 vm对象中增加需要绑定的属性

常用指令

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:

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

v-bind

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是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 ) 语法糖,会扩展成一个更新父组件绑定值的 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'
    }
})

运行结果:

彩世界网址 29

彩世界网址 30

介绍

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

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

v-if

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式,如以下代码:

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

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

运行结果如下:

彩世界网址 31

如果你在控制台设置 app_if.seen=false 则"你可以看见我"字样就会消失不见

彩世界网址 32

在上一篇中,介绍了 v-model 和 v-on 简单用法。除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。

您可能感兴趣的文章:

  • vue事件修饰符和按键修饰符用法总结
  • Vue input控件通过value绑定动态属性及修饰符的方法
  • 如何理解Vue的.sync修饰符的使用
 var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听

为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时,按F12就可以在开发者工具里看到Vue页签。这里需要注意,只有在引用Vue的开发版本文件,即vue.js文件时,Vue Devtools工具才能正常使用。

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

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

将上面两个方法绑定到一组具有父子关系的元素上

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

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

在页面中的 input 的元素上添加指令

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

 <div class="row">
   <h2>v-model.number</h2>
   <input type="text" v-model.number="input_number" />
   <hr />
 </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>
 <div class="row">
   <h2>v-model.trim</h2>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>

input上添加指令

也可以自定义按键名称

vm对象中增加一个属性,默认为空字符串

键值修饰符

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

即使点击了它的子元素触发了子元素的事件,按照事件冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是事件绑定的元素本身,所以父元素事件不会被触发。

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

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

 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值。

.self

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

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

打开页面,多次点击按钮。只有在第一次点击时,事件才会触发。

二、v-on的修饰符

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

而当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值,所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。

彩世界网址 33

vm对象里添加两个事件

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

.one

彩世界网址 34

修改上面.stop的例子,在父元素 div上添加样式

当开始输入数字时,属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符,属性值将不再变化。

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

.number

绑定的事件修饰符可以改变事件的触发方式。

该修饰符会阻止当前事件的默认行为。同理于调用event.preventDefault()方法

一、v-model的修饰符

按照事件冒泡原理,点击按钮时,从当前触发的元素开始,沿着它的父元素一直到根元素,都会依次触发 click 事件。但是应用了 .stop 修饰符后,将只会触发当前元素的 click 事件,并阻止事件向上冒泡。

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

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

打开页面

彩世界网址 35

彩世界网址 36

而当焦点离开文本框时,属性值发生了变化并与文本框内容保持一致。从这个例子可以看出.lazy修饰符延迟了同步更新属性值的时机。即将原本绑定在input事件的同步逻辑转变为绑定在 change事件上。

当点击提交按钮时,会触发绑定的事件,并且阻止表单提交并刷新当前页面的默认行为。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

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

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

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

vm对象里增加一个属性,默认为空字符串

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

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

该修饰符可以用来监听键盘事件

该修饰符用来自动过滤字符串前后的空字符。

页面增加一个 input 元素,监听键盘事件

彩世界网址 37

.prevent

彩世界网址 38

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

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

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

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

本文由时时app平台注册网站发布于web前端,转载请注明出处:Vue学习之路8-v-on指令学习轻易事件绑定之性质【

关键词: