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 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 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%