Vue学习—选项(二)methods

原创 2018年04月16日 11:08:28

1.    methods 将被混入到 Vue 实例中。可以直接通过 app实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () =>this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

2.  在el作用域内部访问构造器外部的方法、在el作用域外部访问构造器外部的方法:

<body>
<h1>methods</h1>
<div id="app">
<p>a:{{a}}</p>
<p>
<button onclick="adds()">内部访问构造器外部的方法</button>
</p>

</div>
<button onclick="app.add()">外部访问构造器内部的方法</button>
<script>
function adds() {
app.a++;
}
var app = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function () {
this.a++;
}
}
})
</script>
</body>

3.    btn是外部构造器构造的组件,它可以是用import引入的模板,此时如果它要访问本地Vue实例里面的方法add,那么要用.native,否则btn的点击事件是无效的。

<body>
<h1>methods</h1>
<div id="app">
<p>a:{{a}}</p>
<p>
<button @click="add(3,$event)">+</button>
</p>
<p>
<btn @click.native="add"></btn>
</p>
</div>

<script>
var btn = {
template: '<button>外部组件</button>'
}
var app = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function (num, event) {
console.log(event);
if (num != "") {
this.a += 3;
} else {
this.a++;
}
}
},
components: {
"btn": btn
}
})
</script>
</body>

4.  关于事件的处理—事件监听:可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})


5.  事件处理方法:许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})


6.  内联处理器中的方法:v-on除了直接绑定到一个方法,也可以在内联js语句中调用方法:

<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})

有时也需要在内联语句处理器中访问原始的 DOM 事件,可以用特殊变量 $event 把它传入方法:  通过event可以获得一个MouseEvent对象,从而得到鼠标点击时所在的位置,以及这个事件触发的后传输的路径等关于这个事件的信息。
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>


methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}


7.  事件修饰符:在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的。

   ※ 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
<!-- 阻止单击事件继续传播(阻止事件冒泡) -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

        Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。 ※ 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你想阻止事件的默认行为。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

8.  按键修饰符:在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

 Vue 为最常用的按键提供了别名:enter、 tab 、delete (捕获“删除”和“退格”键) 、esc 、space 、up 、down 、left 、right,并且可以通过全局 config.keyCodes 对象自定义按键修饰符别名

Vue.config.keyCodes.f1 = 112;

9.  系统修饰符:可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器:.ctrl  .alt  .shift  .meta,注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 ※ 请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCodekeyup.17

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符:这些修饰符会限制处理函数仅响应特定的鼠标按钮:.left  .right  .middle
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79956249

让页面滑动流畅得飞起的新特性:Passive Event Listeners

在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrom...
  • tengxy_cloud
  • tengxy_cloud
  • 2016-10-19 13:46:37
  • 3781

vue事件处理

事件处理 监听事件 监听事件就是直接把事件代码写在v-on:里 &amp;lt;button v-on:click=&quot;count += 1&quot;&amp;gt;add 1&...
  • zqh862735956
  • zqh862735956
  • 2018-03-08 11:13:13
  • 51

vue学习笔记之二(总结一下)

起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,就像引入一个jq框架一样,首先你要下载js文档,然后用script标签把它引进去,然后在之前写一个标签,将你的vue.js...
  • All_Izz_well
  • All_Izz_well
  • 2016-11-15 11:08:53
  • 1893

VUE整理(二)

  • 2017年12月05日 16:52
  • 24KB
  • 下载

better-scroll 源码分析

我们从整体开始一步一步来探究。better-scroll 包装了一个 BScroll 类以提供功能,我们可以在 better-scroll/src/index.js 文件中看到,它的构造器中传入两个参...
  • shunfa888
  • shunfa888
  • 2018-02-25 19:29:47
  • 71

vue计算属性computed和methods的区别

computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。 com...
  • rainbow8590
  • rainbow8590
  • 2017-10-24 15:59:18
  • 355

在vue中methods互相调用的方法

this.$options.methods.delAllOrderList.bind(this)();
  • sinat_39417731
  • sinat_39417731
  • 2017-11-07 21:17:16
  • 2422

[Web性能优化]Chrome 51 引入新特性:Passive event listeners

在 Chrome 的 touch 事件监听器的页面中,80% 的页面都不会调用 preventDefault 来阻止事件的默认行为。在滑动流畅度上,有 10% 的页面增加至少 100ms 的延迟,1%...
  • vCa54Lu0KV27w8ZZBd
  • vCa54Lu0KV27w8ZZBd
  • 2016-12-18 23:09:06
  • 175

解决移动端滑动不流畅问题

//-webkit-overflow-scrolling : touch; 苹果css解决不流畅方法//$('body').on('touchmove', function (event) {even...
  • qq_35458527
  • qq_35458527
  • 2018-03-13 17:31:02
  • 128

vue的 计算属性(computed)、methods、watched三者区别

计算属性 :和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。 原始数据:{{msg}} 改变后的数据:{{changemsg}} var vm=n...
  • seven_an
  • seven_an
  • 2017-06-14 11:39:07
  • 9637
收藏助手
不良信息举报
您举报文章:Vue学习—选项(二)methods
举报原因:
原因补充:

(最多只允许输入30个字)