Vue.js实战——内置指令（二）

参考《Vue.js实战》梁灏

Vue内置指令第一部分：Vue.js实战——内置指令（一）

1 方法与事件

1.1 基本用法

直接上代码，这样最实在：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>方法与事件的基本用法</title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">点击次数：{{ counter }}<button type="button" @click="counter++">加1</button></div><script type="text/javascript">var app = new Vue({el:"#app",data:{counter:0}});</script></body>
</html>

上面的例子略low，来个用methods的：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>methods</title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">点击次数：{{ counter }}<!-- handleAdd()变为handleAdd，然后 console.log(count); --><button type="button" @click="handleAdd()">+ 1</button><button type="button" @click="handleAdd(10)">+ 10</button></div><script type="text/javascript">var app = new Vue({el:"#app",data:{counter:0},methods:{handleAdd:function(count){// console.log(count);count = count || 1;//this指向当前Vue实例 appthis.counter += count;}}});</script></body>
</html>

一个特殊变量$event，用于访问原生的DOM事件：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>$event来了</title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><a href="http://www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a></div><script type="text/javascript">var app = new Vue({el:"#app",data:{},methods:{handleClick(message,event){event.preventDefault();//这下，链接打不开了吧，嘿哈window.alert(message);}}});</script></body>
</html>

1.2 修饰符

.stop
.prevent
.capture
.self
.once

<!--阻止单击事件冒泡-->
<a @click.stop="handle">链接</a>
<!--提交事件不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent="handle"></form>
<!--添加事件监听器时使用事件捕获模式-->
<div @click.capture="handle"></div>
<!--只有当事件在该元素本身（而不是子元素）触发时触发回调-->
<div @click.slef="handle">...</div>
<!--只触发一次，组件同样适用-->
<div @click.once="handle">...</div>

还可以进行键盘事件监听

<!--只有在keyCode为13时，调用事件-->
<input @keyup.13="submit" />

也可以自定义按键：

Vue.config.keyCodes.f1=112
//全局定义后，就可以使用@keyup.f1

Vue还提供了一些快捷名称：

.enter
.tab
.delete (捕获删除和退格键)
. esc
.space
.up
.down
.left
.right

还可以组合使用

.ctrl
.shift
.alt
.meta（Command for Mac，window for Windows）

<!--Shift + S-->
<input @keyup.shift.83="handleSave" >
<!--Ctrl + Click-->
<div @click.ctrl="doSomething">Do something</div>

Vue.js实战——内置指令（二）相关推荐

Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...
Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
Vue常用的内置指令的底层细节分析
上一篇文章我们知道了指令的实现原理,接下来我们来研究下Vue提供的一些默认指令的实现原理. v-text 使用案例 <div v-text="'value'" 实现逻辑先来 ...
[Vue.js]实战 -- 电商项目(二)
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
Vue.js入门 0x2 内置指令（1）
基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 常和 css的 display: none:配合使用. <div id= ...

Vue.js实战——内置指令（二）

1 方法与事件

1.1 基本用法

1.2 修饰符

Vue.js实战——内置指令（二）相关推荐

最新文章

热门文章