Vue3.0入门实战
1、Vue3开发环境准备
1.1 学习vue你需要的前置知识
- HTML的基础知识，你需要达到中级水平，写前端页面的结构代码完全没有问题。
- CSS的基础知识，最好做过半年以上的切图和布局，最好了解CSS3的知识。
- JavaScript的基础知识，对基础语法掌握。
- node.js初级知识，只需要会npm的使用和项目初始化就可以了。
下载Vue2.0的两个版本：
官方网站：https://vuejs.org/
1.2 VSC 安装设置
Visual Studio Code 有两个比较重要的文件，一个是 setting.json （基本设置），另一个是 keybindings.json（配置快捷键文件）。它们 分别在【文件】-【首选项】-【设置】和【文件】-【首选项】-【键盘快捷方式】。
1.3 Window 上安装Node.js
你可以采用以下方式来安装。
1、Windows 安装包(.msi)
目前Node.js的最新版本是12.13.x。首先，从Node.js官网下载对应平台的安装程序，网速慢的国内镜像。
查看版本：
1.4 live-server使用
1
| npm install live-server -g
|
因为npm需要访问外网，速度很缓慢，经常导致安装失败，建议先使用npm安装cnpm工具
安装cnpm，输入以下命令：
1
2
| npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install live-server -g #国内镜像
|
###2、 Vue第一个案例
在Vue3.0中，每个Vue应用都是通过用createApp函数创建一个新的应用实例开始的，这种统一的应用方式。学习Vue3.0，就是对其生命周期的中函数，有的放矢，加加减减，或独立或联合。
生命周期图
Vue库的引入：
CDN方式：推荐用< script src=”http://unpkg.com/vue@next" >< /script>，就是引用CDN的方式。
传统方式：就是直接下载vue.global.js文件到本地，然后再要用Vue的HTML文件中引用就好了
先用第一个框图中的createApp和mount搞个样例，让代码先飞一会。
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myfirst vue app</title>
<style>
.hello_div {
border: 1px solid darkgreen;
border-radius: 15px;
width: 850px;
line-height: 50px;
text-align: center;
}
</style>
<script src="vue.min.js"></script>
</head>
<body>
<div id="hello" class="hello_div">
大家好，{{ msg }}
</div>
<script>
const vue = Vue.createApp({
data() {
return {
msg: "this is my first vue app"
}
}
})
vue.mount("#hello")
</script>
</body>
</html>
|
总结:应用Vue3.0，可按三步骤进行，
- 是定义将要赋予元素的数据。
- 是声明Vue实例。
- 是将数据和元素进行绑定。
定下这个基调之后，后面就是学习它的语法（模板、条件和组件等）和生命周期函数的应用了。
2、学习Vue常用的指令
2.1 数据绑定
数据绑定最常见的形式就是使用双大括号{ { } }的文本插值，如果你要用不常见的，那可用
< span v-text=””></ span>的方式。在Vue中，带有v-前缀的特殊属性，称为指令。
无论选择哪一个插值方式绑定到组件上（HTML标签上），在组件实例上的值发生了改变，插值处的内容都会更新，这便是数据驱动的方式。
2.1.1 文本插值
v-text指令
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<input id="name" v-model="msg" placeholder="输入文本内容"/>
<p>用双大括号实现文本插值：{{ msg }}</p>
<p>用v-text指定实现插值：<span v-text="msg"></span></p>
</div>
<script>
Vue.createApp({
data() {
return {
msg: ''
}
}
}).mount("#app")
</script>
</body>
</html>
|
v-html指令
在开发过程中，有时候会输出有格式的动态内容，比如输出带颜色文本。如果用插值的方式，输出的为文本内容，显然满足不了要求。这时就要用到v-html指令了。
温馨提醒：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
XSS攻击：通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页中。
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>v-text&v-html案例</h2>
<hr>
<div id="app">
<p v-text="message">hello</p>
<span v-html="msgHtml">abc
</span>
</div>
<script>
var app = Vue.createApp({
data(){
return {
message:'hello vue',
msgHtml:'<h2 >wellcome to <font color="red">vue </font>world!</h2>'
}
}
})
.mount("#app")
</script>
</body>
</html>
|
2.1.2 v-if指令
简单的v-if和v-else
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if指令</title>
<script src="assets/js/vue.global.js"></script>
</head>
<body>
<h2>v-if指令和v-else指令的使用</h2>
<hr>
<div id="app">
<p>此时isLogin的值为:{{isLogin}}</p>
<span v-if="isLogin">你好，欢迎您</span>
<span v-else>请你先登录</span>
</div>
<script>
Vue.createApp({
data(){
return{
isLogin:false
}
}
}).mount("#app")
</script>
</body>
</html>
|
v-show指令
如果你要实现业务方面的条件判断，用v-if指令就可以了；如果只是想切换一下CSS的内容，那你可以用v-show指令。v-show只是简单地切换元素的CSS属性值，不支持v-else，也不支持< template>元素，它常用于隐藏或显示某个元素。
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="assets/js/vue.global.js"></script>
<title>v-if & v-show & v-else</title>
</head>
<style>
.show {
margin-top: 20px;
width: 600px;
height: 50px;
background: rgb(248, 244, 26);
}
</style>
<body>
<div id="app">
<input type="button" value="按下就点亮了" v-on:click="show()"> <br/>
<div class="show" v-show="report">点亮啦~~~</div>
</div>
<script>
Vue.createApp({
data() {
return {
report: false
}
},
methods: {
show() {
this.report = true;
}
}
}).mount("#app")
</script>
</body>
</html>
|
2.1.3 v-for指令
索引和值
数据列表在表格输出时，常常需要用到序号。v-for指令支持输出下标，将下标+1，即可获得序号。为了更接近 JavaScript 迭代器的语法，Vue3.0支持用of替代in作为分隔。
简单的v-for输出
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/js/vue.global.js"></script>
<title>v-for指令</title>
</head>
<style>
.lang{
border: 1px solid darkcyan;
width: 600px;
height: 200px;
}
</style>
<body>
<h2>v-for案例</h2>
<hr>
<div class="lang">
<ul id="program">
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script>
Vue.createApp({
data(){
return{
items:[10,88,7,26,48,26,97,5]
}
}
}).mount("#program")
</script>
</body>
</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
33
34
35
36
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for 输出</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<style>
.lang {
border: 1px solid darkcyan;
width: 600px;
height: 200px;
}
</style>
<body>
<h2> v-for案例</h2>
<div class="lang">
<ul id="program">
<li v-for="(item,i) in items">
{{i}}:{{ item }}
</li>
</ul>
</div>
<script>
Vue.createApp({
data() {
return {
items:[10,88,7,15,20,30,55,87]
}
}
}).mount("#program")
</script>
</body>
</html>
|
嵌套v-for
v、k、i 这几个字符可以自己定义，分别表示每次循环内容的值、键、序号。
- v: 循环中每条数据的值 小鱼、20、如花
- k: 循环中每天数据的键 username、age、girl
- i: 循环的序号，从0开始
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="assets/js/vue.global.js"></script>
</head>
<style>
.lang {
border: 1px solid darkcyan;
width: 600px;
height: 200px;
}
</style>
<body>
<h2>v-for案例 嵌套输出</h2>
<div class="lang">
<ur>
<li v-for="student in students">
<span v-for="(v,k,i) in student">
{{i+1}}---{{k}}---{{v}} <br/>
</span>
</li>
</ur>
</div>
<script>
Vue.createApp({
data(){
return{
students:[
{
name:'xiaoxiang',
age:20
},
{
name:'xiaoming',
age:23
}
]
}
}
}).mount(".lang")
</script>
</body>
</html>
|
v-for与-v-if混合
由于当v-if和v-for处于同一节点时，v-if的优先级比v-for更高，这意味着v-if将没有权限访问v-for里的变量，就是说不可以将v-if和v-for放在同一个元素里。
1
2
3
4
|
<li v-for="item in items" v-if="item==true">
{{ good }}
</li>
|
为了解决v-for和v-if同一水平的问题，你可以把v-for移动到 标签中进行修正。就是将v-if放到v-for内部去的意思。
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/js/vue.global.js"></script>
<title>v-for和v-if混合</title>
</head>
<style>
h1{
text-align: center;
color: darkorange;
}
table{
width: 600px;
margin:0 auto;
text-align: center;
height: 200px;
}
td,th{
border: 1px solid #bcbcbc;
padding: 5px 10px;
}
th{
background: #42b983;
font-weight: 400;
font-size: 1.2rem;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(odd){
background:#fff;
}
tr:nth-of-type(even){
background:#eee;
}
</style>
<body>
<h1>项目规划完成进度</h1>
<table id="program">
<thead>
<tr>
<th>序号</th>
<th>2021年度任务</th>
<th>完成情况</th>
</tr>
</thead>
<template v-for="(okr,index) in okrs">
<tr>
<td>
{{index+1}}
</td>
<td>
{{okr.name}}
</td>
<td>
<span v-if="okr.todo==1">
已完成
</span>
<span v-else-if="okr.todo==2">
实践进行中
</span>
<span v-else>
将启动
</span>
</td>
</tr>
</template>
</table>
<script>
Vue.createApp({
data(){
return{
okrs:[
{name: '项目需求',todo:1},
{name: '需求分析', todo: 2},
{name: '团队建设', todo: 3},
{name: '框架建设', todo: 3},
{name: '功能细化', todo: 2},
{name: '分配工作', todo: 2},
{name: '团队协作', todo: 2}
]
}
}
}).mount("#program")
</script>
</body>
</html>
|
运行结果：
2.1.4 属性绑定
v-model
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>v-model 双向数据绑定</h2>
<hr/>
<div id="app">
<pre>
第一个数：{{num1}}
第二个数：{{num2}}
计算结果：{{result}}
</pre>
<hr/>
number1：<input type="text" name="num1" id="num1" v-model="num1"/><br>
number2：<input type="text" name="num2" id="num2" v-model="num2"/><br>
计算：<button v-on:click="plus">加</button>
</div>
<script>
Vue.createApp({
data(){
return {
num1:10,
num2:20,
result:30
}
},
methods:{
plus:function(){
this.result = parseInt(this.num1) + parseInt(this.num2) ;
}
}
})
.mount("#app")
</script>
</body>
</html>
|
单选按钮绑定数据
1
2
3
4
5
6
| <h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
|
多选绑定一个数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div>
<h2>多选绑定一个数组</h2>
<p>{{hobbys}}</p>
<hr>
<p>
hobby:
<input type="checkbox" value="basketball" id="hb1" v-model="hobbys"/>
<label for="hb1">篮球</label>
<input type="checkbox" value="vollerball" id="hb2" v-model="hobbys"/>
<label for="hb2">排球</label>
<input type="checkbox" value="football" id="hb3" v-model="hobbys"/>
<label for="hb3">足球</label>
</p>
</div>
|
v-bind
我们知道插值表达式是不能写在html的标签的属性内的，那如果一定要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定。
在Vue中，对HTML属性的绑定，采用v-bind(可缩写为”:”)指令
< a v-bind:href=”url”>xxx
< a :href=”url”>xxx
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>html属性绑定-a:href</h2>
<hr/>
<a v-bind:href="link">百度搜素</a>
<img :src="image" />
</div>
<script>
Vue.createApp({
data() {
return {
link:'http://www.baidu.com',
image:'../assets/images/logo.png'
}
}
}).mount("#app")
</script>
</body>
</html>
|
在html中我们用v-bind:href=”link”的动态绑定了link的值；同样，我们使用 :src =”image” 动态绑定了image的值 ；这两个值是在vue构造器里的data属性中找到的。
CSS样式绑定
在工作中常有动态切换class的需求，我们经常使用Vue用v-bind:class(简写为:class)指令来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1
| <div :class="className">1、绑定classA</div>
|
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
1
| <div :class="{classA:isOk}">2、绑定class中的判断</div>
|
3、绑定class中的数组
1
| <div :class="[classA,classB]">3、绑定class中的数组</div>
|
4、绑定class中使用三元表达式判断
1
| <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
|
5、绑定style
1
| <div :style="{color:red,fontSize:font}">5、绑定style</div>
|
6、用对象绑定style样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div :style="styleObject">6、用对象绑定style样式</div>
。。。。
<script>
Vue.createApp({
data(){
return :{
styleObject:{
fontSize:'24px',
color:'green'
}
}
}
}).mount(“#app”)
</script>
|
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
| <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法-多样式绑定</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<style>
.b {
font-weight: bold;
}
.big-text {
font-size: 60px;
}
.error {
color: red;
}
</style>
<body>
<div id="app">
<h2>css样式绑定-多样式</h2>
<hr/>
<p class="b" :class="[fontSize, errorInfo]">
Java程序员<br/>
除了会后端编程之外，还会什么？<br/>
当然是敲前端代码了，特别是Vue。
</p>
</div>
<script>
Vue.createApp({
data() {
return {
fontSize: 'big-text',
errorInfo: 'error'
}
}
}).mount("#app")
</script>
</body>
</html>
|
2.2 事件绑定
在JavaScript语言中，当用户与UI组件交互时，UI组件能够激发一个相应事件。例如，用户按动按钮、滚动文本、移动鼠标或按下按键等，都将产生一个相应的事件。
Vue3.0使用v-on指令(缩写为@符号)来监听DOM事件，并在触发事件时执行一些 JavaScript函数。语法为 v-on:click=”函数名” 或@click=”函数名”。
2.2.1. 事件参数
关于事件，要把握好三个步骤：设参、传参和接参。
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>v-event1 事件绑定--参数传递</h2>
<hr/>
<div id="app">
<pre>
第一个数：{{num1}}
第二个数：{{num2}}
计算结果：{{result}}
</pre>
<hr/>
number1：<input type="text" name="num1" id="num1" v-model="num1"/><br>
number2：<input type="text" name="num2" id="num2" v-model="num2"/><br>
计算：<button v-on:click="cal('+')">加</button>
<button v-on:click="cal('-')">减</button>
<button v-on:click="cal('*')">乘</button>
<button v-on:click="cal('/')">除</button>
</div>
<script>
Vue.createApp({
data(){
return {
num1:10,
num2:20,
result:30
}
},
methods:{
cal:function(flag){
switch(flag){
case '+':{
this.result = parseInt(this.num1) + parseInt(this.num2) ;
break;
}
case '-':{
this.result = parseInt(this.num1) - parseInt(this.num2) ;
break;
}
case '*':{
this.result = parseInt(this.num1) * parseInt(this.num2) ;
break;
}
default:{
this.result = parseInt(this.num1) / parseInt(this.num2) ;
}
}
}
}
})
.mount("#app")
</script>
</body>
</html>
|
2.2.2.事件来源
如果界面上有多个按钮或表单，你想根据用户的不同操作，响应不同的事件，这时你可以通过监听事件源的方式进行处理。在软件系统中，我们常常见到的打开、保存、导出、打印等多个按钮在同一个功能菜单时，就可以用这种方式。
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法-事件绑定</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>v-event2 事件绑定--事件来源</h2>
<hr/>
<div id="app">
<button name="save" @click="opt">保存</button>
<br/> <br/>
<button name="open" @click="opt">打开</button>
<br/> <br/>
<button name="print" @click="opt">打印</button>
</div>
<script>
Vue.createApp({
data(){
},
methods:{
opt(event) {
let opt = event.target.name;
let src = event.target.tagName;
alert('知道你点了 ' + opt + ' ' + src + ',我马上处理.');
}
}
})
.mount("#app")
</script>
</body>
</html>
|
执行结果：
2.2.3.多事件处理
一个操作，多个函数响应，这便是多事件也。在Vue3.0中，这些函数都放在@click里并用逗号分隔即可。
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0核心语法</title>
<script src="../assets/js/vue.global.js"></script>
</head>
<style>
.menu {
border: 1px solid darkgreen;
width: 100px;
height: 150px;
padding-top: 20px;
padding-left: 20px;
}
</style>
<body>
<h2> 事件绑定--多事件绑定</h2>
<div id="app" class="menu" >
<button @click="ding(),duang()">放个二踢脚</button>
</div>
<script>
Vue.createApp({
data() {
return {
msg: ''
}
},
methods:{
ding(){
alert("呲。。。。。叮");
},
duang(){
alert("啾。。。。啪");
}
}
}).mount("#app")
</script>
</body>
</html>
|
2.2.4.事件修饰符
不知你在用键盘输入多项内容之后，是否有按下回车键的习惯，如果没有，那证明你打字很慢，如果有，那证明你不是程序员，而是打字员。
在较完善的系统中，当用户按下回车键(或其他键)时，都会有响应的。为了解决这个问题，Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。
Vue为最常用的键提供了.enter(回车) 、.tab 、 .delete (捕获“删除”和“退格”键)、.esc(取消) 、.up(上)、.down(下)、.left(左)、.right(右)等。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="assets/js/vue.global.js"></script>
</head>
<body>
<h2>事件修饰符</h2>
<div id="app">
<input @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="del" @keyup.esc="esc">回车
</div>
<script>
Vue.createApp({
data(){
},
methods:{
enter(){
alert("点击了enter事件");
},
del(){
alert("触发了delete事件");
},
tab(){
alert("触发了tab事件");
},
esc(){
alert("点击了esc事件")
}
}
}).mount("#app")
</script>
</body>
</html>
|
