Vue学习(3)

临近期末 准备复习 长篇。


1. Vue—事件

1.1 鼠标点击事件

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-123是一个容器,这个容器要在vue中被引入-->
<div id="vue-123">
<h1>事件</h1>
<button v-on:click="add">加一岁</button>
<button v-on:click="sub">减一岁</button>
<p>my age is {{age}}</p>
</div>
<!--将123.js链接-->
<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
el:"#vue-123",
data:{
age:19
},
methods:{
add: function(){
this.age++;
},
sub: function(){
this.age--;
}
}
});
/*
* el:全称为element,后面为需要从html中抓获到的元素名称,而且必须是根容器的元素
* data: 数据的储存,类似于定义变量
* methods:用来储存各种方法
*/

v-on 表示监听DOM事件,并且在触发时运行一些js代码,比如上面代码中v-on一个鼠标单击事件(click),并且会触发vue中相应的方法(add和sub)。调用方法格式为v-on:事件="方法名"。方法名也可以加括号,在没有传参的情况下括号可以参略,但需要传参时要在括号内有相应的参数,比如:

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-123是一个容器,这个容器要在vue中被引入-->
<div id="vue-123">
<h1>事件</h1>
<button v-on:click="add(1)">加一岁</button>
<button v-on:click="sub(1)">减一岁</button>
<button v-on:dblclick="add(10)">加十岁</button>
<button v-on:dblclick="sub(10)">减十岁</button>
<p>my age is {{age}}</p>
</div>
<!--将123.js链接-->
<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
el:"#vue-123",
data:{
age:19
},
methods:{
add: function(a){
this.age += a;
},
sub: function(a){
this.age -= a;
}
}
});
/*
* el:全称为element,后面为需要从html中抓获到的元素名称,而且必须是根容器的元素
* data: 数据的储存,类似于定义变量
* methods:用来储存各种方法
*/

1.2 鼠标移动事件

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#cs {
width: 600px;
height: 100px;
padding:200px 20px;
text-align: center;
border: 1px solid black; }
</style>
</head>
<body>
<!--vue-123是一个容器,这个容器要在vue中被引入-->
<div id="vue-123">
<h1>事件</h1>
<button v-on:click="add(1)">加一岁</button>
<button v-on:click="sub(1)">减一岁</button>
<button v-on:dblclick="add(10)">加十岁</button>
<button v-on:dblclick="sub(10)">减十岁</button>
<p>my age is {{age}}</p>
<div id="cs" v-on:mousemove="dataXY">
({{x}},{{y}})
</div>
</div>
<!--将123.js链接-->
<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
new Vue({
el:"#vue-123",
data:{
age:19,
x:0,
y:0
},
methods:{
add: function(a){
this.age += a;
},
sub: function(a){
this.age -= a;
},
dataXY:function(event){
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
}
});
/*
* el:全称为element,后面为需要从html中抓获到的元素名称,而且必须是根容器的元素
* data: 数据的储存,类似于定义变量
* methods:用来储存各种方法
*/

实现一个鼠标位置确定,监听一个鼠标移动的值,然后在console.log() 中查找到坐标的参数,然后赋值给x和y。

event是一个特殊变量,表示访问原始DOM事件

官方文档:

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法


Vue—事件修饰符

官方文档

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 阻止单击事件继续传播 -->
<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>
  • .once

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。

鼠标按钮修饰符:

  • .left
  • .right
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。


Vue-键盘事件与键值修饰符

官方:

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

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-123是一个容器,这个容器要在vue中被引入-->
<div id="vue-123">
<label>姓名:</label>
<input type="text" v-on:keyup.enter="name">
</div>
<!--将123.js链接-->
<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
el:"#vue-123",
data:{

},
methods:{
name:function(name){
alert("你正在输入名字");
}
}
});
/*
* el:全称为element,后面为需要从html中抓获到的元素名称,而且必须是根容器的元素
* data: 数据的储存,类似于定义变量
* methods:用来储存各种方法
*/

使用v-on监听keyup键入,然后在后面加了一个.enter修饰符,表示在回车按下时触发name这个方法。

按键修饰符

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

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

Vue-双向数据绑定

双向数据绑定一定是和 表单中<input><textarea><select>元素有关的操作

官方文档:

你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

  • text 和 textarea 元素使用 value 属性和 input 事件;
  • checkbox 和 radio 使用 checked 属性和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

简单来说,就是使用v-model可以直接实现双向数据绑定,不需要调用方法,直接从data中先绑定数据,如果先前data中已经有数据,那会直接出现在输入框中。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-123是一个容器,这个容器要在vue中被引入-->
<div id="vue-123">
<label>姓名:</label>
<input type="text" v-model:keyup="name">
<span>{{name}}</span>
<label>学号:</label>
<input type="text" v-on:keyup.enter="number">
</div>
<!--将123.js链接-->
<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
el:"#vue-123",
data:{
name:"haha"
},
methods:{
number:function(){
alert("你正在输入学号");
}
}
});
/*
* el:全称为element,后面为需要从html中抓获到的元素名称,而且必须是根容器的元素
* data: 数据的储存,类似于定义变量
* methods:用来储存各种方法
*/

Vue-Computde 计算属性

计算属性将白了就是在当处理大量数据或搜索时,需要改变大量的数据,才会使用计算属性,因为当methods执行函数,如果其内的数值发生改变,不管与它有没有瓜系,它都会执行一遍改函数,造成性能上的问题。计算属性很好的优化了这一问题,当有数据改变时,不会影响其他方法函数的调用。

官方:

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

1
2
3
4
><div id="example">
> {{ message.split('').reverse().join('') }}
></div>
>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性

基础例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
><div id="example">
> <p>Original message: "{{ message }}"</p>
> <p>Computed reversed message: "{{ reversedMessage }}"</p>
></div>
>var vm = new Vue({
> el: '#example',
> data: {
> message: 'Hello'
> },
> computed: {
> // 计算属性的 getter
> reversedMessage: function () {
> // `this` 指向 vm 实例
> return this.message.split('').reverse().join('')
> }
> }
>})
>

结果:

Original message: “Hello”

Computed reversed message: “olleH”

这个可以暂时忽略

0%