方法

在methods中写方法，Vue实例可以直接访问其中的方法。方法供事件或者别的方法内部调用，只要能够访问创建的Vue实例就够调用方法。

方法的写法：ES5和ES6的语法都支持

new Vue({
  el:"#app",
  data:{},//数据源	
  methods:{//写方法
      fn1(){console.log("fn1")},//es6方法
      fn2:function(){console.log("fn2")},//es5的方法，函数是定义式
      fn3:()=>{console.log("fn3")},//es5的方法，成员值是es6的箭头函数，箭头函数没有声明式只有定义式，必须要有一个标识符来引用					
    }
})

事件的绑定

事件绑定基础语法

使用< v-on:事件名=函数名>，v-on: 和 @都是绑定事件的指令，@是语法糖，指令后面跟事件类型，值就是methods中的方法。

@click="handleClicks($event,参数)"，参数可选，$event是内置事件对象

//1.不传参
<button v-on:click="fn">Button</button>
//2.可以传入参数
<button @click="fn($event,1,2,3)">eventButton</button>
//3.绑定对象
<button v-on="{click: fn, mousemove: fm}">特殊按钮3</button>

同一个元素绑定相同类型的多个事件

//第1种
<div class="box2" @click.stop="fn2();fn3()">2</div>
//第2种
//对同一个元素绑定多个同类型的事件就是在绑定的事件中调用另外一个函数

第1种：

<style>
        .box1 {
            width: 60px;
            height: 60px;
            background-color: gold;
        }
        .box2 {
            width: 40px;
            height: 40px;
            background-color: rgb(12, 186, 249);
        }
    </style>
    <div id="box">
        <div class="box1" @click="fn1">
            1
            <div class="box2" @click.stop="fn2();fn3()">2</div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#box",
            methods: {
                fn1(){
                    console.log(1);
                },
                fn2(){
                    console.log(2);
                },
                fn3(){
                    console.log("目标源");
                }
            },
        });
    </script>

第2种

<div id="box">
        <div class="box1" @click="fn1">
            1
            <div class="box2" @click.stop="fn2">2</div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#box",
            methods: {
                fn1(){
                    console.log(1);
                },
                fn2(){
                    console.log(2);
                    this.fn3();
                },
                fn3(){
                    console.log("目标源");
                }
            },
        });
    </script>

事件绑定传入参数

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，如果事件绑定函数调用，那么事件对象必须是$event 方式传入。

    <div id="app">
		<!-- 1.普通用法 -->
		<button @click="fn">Button</button>
		<br />
		<!-- 2.传入参数-->
		<button @click="fn1($event,1,2,3)">eventButton</button>
	</div>
	<script>
       var vm = new Vue({
              el:'#app',
              methods:{
              	fn:function(e){
              		console.log(e);
              	},
              	fn1:function(e,e1,e2,e3){
              		console.log(e,e1,e2,e3);
              	}
              }
       })
	</script>

事件的修饰符

1..prevent：阻止事件的默认行为

2、@click.stop：阻止事件向外冒泡，阻止从当前元素经过的所有冒泡行为

3、@click.self：其他元素的事件触发时事件链经过它，无论是捕获还是冒泡阶段都不会触发它的事件，只有它自己是精准对象才会触发事件，虽然它自己不会被别人影响，但是它自己的事件触发的时候还是会生成事件链经过其他元素，并不阻止继续冒泡到其他元素。（只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。）（e.target.value：e.target表示触发事件的该DOM元素节点，e.target.value表示获取该结点的值）

4、.once：绑定的事件只会触发一次，执行后这个事件会解绑，不会再被执行

5、.capture：添加事件时让事件在捕获阶段触发

6、多修饰符一起使用时可以连点，事件多修饰符没有顺序

<a v-on:click.prevent.once="doThat">阻止点击跳转，但是只会阻止第一次</a>

事件中的this

1.方法中的this代表创建的Vue实例
a.方法和ES5的函数中的this是创建的Vue实例
b.ES6的箭头函数中的this就不是创建的Vue实例，箭头函数的this是箭头函数外层作用域的指向==>因此推荐事件的函数采用ES6的对象的方法写方法

2. 操作数据: this.xx="新值" 
这里的修改会执行两步操作: 
a.修改内存data容器中的数据
b.刷新UI==>重新设置innerHTML
只要数据发生改变就会自动刷新页面，数据驱动页面

<div id="app">
		<!-- 1.普通用法 -->
		<button @click="fn">Button</button>
		<br />
		<!-- 2.传入参数-->
		<button @click="fn1(67)">eventButton</button>
	</div>
	<script>
       var vm = new Vue({
              el:'#app',
              data:{
                msg:"数据"
              },
              methods:{
              	fn:function(e){
              		console.log(e);
              	},
              	fn1(num){
                    console.log(this,1111);
                    console.log(this.msg,222);
                    this.msg=num;//操作数据
                    console.log(this.msg,333);
              	}
              }
       })
	</script>

ps:在函数中，要想使用data里面的数据以及操作数据时，一定要加this

鼠标修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：

.left：鼠标左键，只有操作鼠标左键才会执行。
.middle：鼠标中间滚轮，只有操作鼠标中键才会执行。
.right：鼠标右键，只有操作鼠标右键才会执行。

按键别名

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应，控制按下哪个按键时，相对应的事件才会被执行。

常用的按键别名

.delete(捕获删除del和退格键)
.esc退出
.space空格
.up上
.down下
.left左
.right右
.enter回车
.tab换行(特殊，必须配合keydown事件使用，因为当按下就会对当前元素失去焦点)

系统修饰键配合keyup事件使用时需要按下修饰键的同时再按下其他键然后松开其他键事件才会触发。配合keydown事件正常触发

.ctrl
.alt
.shift
.meta（也是win键或者commond）
@keydown：按键按下时就会执行绑定的函数
@keyup：只有按键按下然后再松开时事件才会执行绑定的函数
@keydown.tab：只有tab键触发keydown事件才会执行绑定的函数

在Vue未提供别名的按键，可以使用按键原始的key值按键的名字去绑定，但值得注意的是要转为keydown-case，这种短横线命名以及大写建的原始key是CapsLock需要将其全部转为小写，keydown-capslock

Vue.js的核心思想

Vue.js的核心：数据驱动和组件化开发

响应式页面用数据驱动页面就是创建的Vue实例中数据发生改变就会刷新页面，方法就是操作页面的数据。

方法和事件的绑定

方法