19-前端核心技术-VUE基础使用
- 掌握VUE安装和基本使用
- 掌握VUE条件渲染
- 掌握VUE列表渲染
VUE 简介
Vue.js 是一套构建用户界面的 渐进式框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
官网地址：https://v3.cn.vuejs.org/
Vue3相比Vue2提升点
- 性能比Vue2.x快1.2~2倍
- diff方法优化
vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patchflag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容 - 静态提升
vue2无论元素是否参与更新，每次都会重新创建然后再渲染
vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可 - 事件侦听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可 - ssr服务端渲染
在服务器段完成渲染后再将整个html页面返回到浏览器，页面的加载时间就会加快很多
- 组合API（类似react hooks）
- 将数据和业务逻辑放在setup中一起处理，而不是像vue2，将数据放在data中，业务逻辑分别放在methods，watch，computed中等
- 按需编译，体积比vue2.x更小
- 更好的Ts支持
VUE 环境搭建
下载源码
如果仅仅只是在项目或者某个文件中简单的使用vue，就可以直接在html中引入如下链接
1
2
3
<script src="https://unpkg.com/vue@next">script>
或者
<script src="https://unpkg.com/vue@3">script>
可以复制上面的地址到浏览器打开源代码，并复制全部源代码，保存为本地文件js文件，加入到项目中就可以使用了
创建项目
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
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>VUE3title>
<script src="vue.global.js">script>
head>
<body>
<div id="app">
Counter: {{ counter }}
div>
body>
<script>
const App = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(App).mount('#app')
script>
html>
VUE 语法
静态数据 data
参数类型：Object | Function，组件的定义只接受 function
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
案例01
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
33
34
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">来自 data 的属性值 = {{ count }}div>
body>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return { count: 4 };
},
});
const vm = app.mount("#app");
console.log(vm.$data.count); // => 4
console.log(vm.count); // => 4
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5;
console.log(vm.$data.count); // => 5
// 反之亦然
vm.$data.count = 6;
console.log(vm.count); // => 6
script>
html>
js中的数据直接展示到页面山给，不需要再通过bom对象来获取和设置页面元素的内容，使用非常方便
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性不会起作用
动态数据 computed
参数类型：{ [key: string]: Function | { get: Function, set: Function } }
和data一样，向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
不同的是computed允许动态属性计算，所以一般都是用方法。
computed接受一个具有 get 和 set 函数的对象，可以单独设置读写的方式。
1
2
3
4
5
6
7
8
9
10
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0
案例02
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
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<div>从vue传过来的数据：<b>{{ count }}b>div>
<div>库存是否足够：<b>{{ isCount }}b>div>
div>
body>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return { count: 4 }
},
computed: {
isCount() {
// this 指向 vue 对象实例
return this.count > 0 ? 'Yes' : 'No'
}
},
});
const vm = app.mount("#app");
script>
html>
输出渲染 v-text & v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。类似v-text
为了输出真正的 HTML，需要使用 v-html 指令：
案例03
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
33
34
35
36
37
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<div>{}类似与使用v-text绑定的：<b v-text="text">{{count}}b>div>
<div>使用v-html绑定的可以识别html标签：<p v-html="text">{{isCount}}p>
<p>v-html 和 v-text 优先级高于 {} p>
div>
div>
body>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
count: 4,
text: '132456'
}
},
computed: {
isCount() {
// this 指向 vue 对象实例
return this.count > 0 ? 'Yes' : 'No'
}
},
});
const vm = app.mount("#app");
script>
html>
绑定属性 v-bind
普通语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind 指令：如：v-bind:id、v-bind:class、v-bind:src、v-bind:align等。
语法：v-bind:attribute
案例04
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
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8">script>
head>
<style>
.active {
background-color: darkcyan;
}
.error {
color: red;
}
style>
<body>
<div id="app">
<div :class="{active: clas.isActive,'error': clas.hasError}">
v-bind:id="id"相当于setAttribute方法设置id属性值
div>
<p>v-bind:id="id"可以省略为 :idp>
div>
body>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
clas: {
isActive: false,
hasError: true
}
}
},
});
const vm = app.mount("#app");
script>
html>
绑定事件 v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
v-on 指令 (通常缩写为 @ 符号) 。用法为 v-on:click="methodName" 或 `@click=“methodName”
语法：v-on:event.修饰符
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button @click="warn('自定义参数', $event)">Submitbutton>
js部分
1
2
3
4
5
6
7
8
9
methods: {
warn(message, event) {
// 现在可以访问到原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
}
多事件绑定
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
1
2
3
4
<button @click="one($event), two($event)">
Submit
button>
js部分
1
2
3
4
5
6
7
8
9
// ...
methods: {
one(event) {
// 第一个事件处理器逻辑...
},
two(event) {
// 第二个事件处理器逻辑...
}
}
案例05
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8">script>
head>
<style>
.active {
background-color: darkcyan;
}
.error {
color: red;
}
style>
<body>
<div id="app">
<button v-on:click="doClick('按钮已经被点击')">点击事件button>
<br>
<input type="text" @keyup="doKeyup" />
<span>{{showtext}}span><span>{{inputcount}}span>
div>
body>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
showtext: '',
inputcount: 0
}
},
methods: {
//event：被触发的事件对象
doClick: function (me) {
//this：当前Vue对象
this.showtext = '字数:';
event.target.innerText = me;
},
doKeyup: function () {
this.inputcount = event.target.value.length;
}
}
});
const vm = app.mount("#app");
script>
html>
事件修饰符
在事件处理程序中调用 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
<a @click.stop="doThis">a>
<form @submit.prevent="onSubmit">form>
<a @click.stop.prevent="doThat">a>
<form @submit.prevent>form>
<div @click.capture="doThis">...div>
<div @click.self="doThat">...div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：
1
2
<input @keyup.enter="submit" />
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input @keyup.page-down="onPageDown" />
案件 kebab-case的参考地址：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
Vue 为最常用的键提供了别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta
如：
1
2
3
4
5
<input @keyup.alt.enter="clear" />
<div @click.ctrl="doSomething">Do somethingdiv>
.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
如：
1
2
3
4
5
6
7
8
<button @click.ctrl="onClick">Abutton>
<button @click.ctrl.exact="onCtrlClick">Abutton>
<button @click.exact="onClick">Abutton>
鼠标按钮修饰符鼠标按钮修饰符
.left.right.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮
双向绑定 v-model
可以用 v-model 指令在表单 、