Vue学习—选项(二)methods

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 换用 keyCode：keyup.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