Vue3快速入门教程
学某个新技能时,大多数人倾向于一开始就从头到尾完整学一遍, 甚至有人来来去去学了很多遍想达到熟记于心的目的, 我个人认为这没太大必要.
我的建议的是:面向需求or面向问题来学习. 最开始你想实现什么效果你可能暂时不太了解会涉及到哪些知识点, 那么先列出你的PRD吧, 就像产品经理那样, 下一步才是根据PRD寻找解决方法, 完成你的作品, 最后你会发现, 你已经通过这些"点"逐步形成"面", 学Vue达到了事半功倍的效果~
---------本次我们就用这种方式一起来看看Vue3
目录
-
-
- PRD-01:我想做一个类似广告显示屏一样的东西, 支持动态修改, 以便我可以随时控制它的内容
-
- Data Property模板, 俗称: 变量模板
-
- 1.模板实际演练: 每秒改变1次msg
- 2.模板实际演练: 例如把`id`做成动态的
- PRD-02: 我想做一个动态style, 随机切换div的颜色
-
-
- 1.v-on实际演练: *点一下按钮, msg增加1*
-
- PRD-03:我想做一些条件判断,减少代码量
- PRD-NN:用Vue用的越深入时, 就会有一些需求要用到钩子, 什么是钩子我们先不管, 先看作用, 知道作用之后自然就理解了~
-
- 比如想在她初始化的时候就附带帮你做好一些事
-
- 汇总一下, 我们在创建vm实例时, 常用的钩子函数有:
-
PRD-01:我想做一个类似广告显示屏一样的东西, 支持动态修改, 以便我可以随时控制它的内容
Data Property模板, 俗称: 变量模板
- 第一种: 在<>内的,属于HTML attribute
- 第二种: 普通的Mustache语法 : 双大括号-> { {number}} 的文本
1.模板实际演练: 每秒改变1次msg
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态模板01title>
head>
<body>
<div id="app">
<span>Message: {
{ msg }}span>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
Vue.createApp({
data() {
return {
msg: 0}
},
methods: {
add() {
this.msg++;
console.log(this.msg);
}
},
mounted() {
//在生命周期走完mounted之后, 开始执行: 每秒刷新一次msg值
setInterval(this.add, 1000);
}
}).mount('#app')
script>
body>
html>
msg有2种访问方式, 同样用定时器例子来说明:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态模板02title>
head>
<body>
<div id="app">
<span>Message: {
{ msg }}span>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
const app = Vue.createApp({
data() {
return {
msg: 1}
}
})
const vm = app.mount('#app')
//用原生JS定时器执行: 2种方式修改msg的值
setInterval(function () {
vm.$data.msg = 10
}, 500);
setInterval(function () {
vm.msg = 20
}, 1000);
script>
body>
html>
script>
body>
html>
2.模板实际演练: 例如把id做成动态的
下面是一个普通的带id的div, 做过UI自动化的铁子不陌生吧? 常常会用元素的id来做Xpath定位
<div id="Lee">div>
那么, 从开发的角度来看, 可以使用v-bind来"动态定义"元素的id
<div v-bind:id="dynamicId">div>
Vue官方推荐-------将
v-bind省略掉,简约又美观, 所以上面这句html中的v-bind去掉就变成
<div :id="dynamicId">div>
那么在控制逻辑里就可以设置id的名称了, 而不是写死它
完整代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态idtitle>
head>
<body>
<div id="app" style="text-align: center;">
<div :id="dynamicId">
<button @click.once="modify_div_id" >{
{msg}}button>
div>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
Vue.createApp({
data() {
return {
dynamicId: "test",msg:"点我,然后F12查看一下父级div的id"}
},
methods: {
//click触发id变更
modify_div_id() {
this.dynamicId = "prd";
this.msg = "修改已触发! 父级div的id变更为'prd'";
}
}
}).mount('#app')
script>
body>
html>
此时你可能觉得, 这有啥用, 没什么需求会涉及到动态id的吧?
– 没错, 下一步我们改个样式玩玩?
PRD-02: 我想做一个动态style, 随机切换div的颜色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态styletitle>
head>
<body>
<div id="app" style="text-align: center;">
<div :style="default_style">
目标div
div>
<button v-on:click="modify_class_color">点我换个心情button>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
Vue.createApp({
data() {
return {
default_style: {
"background-color": "rgba(21, 199, 100, 0.408)",
"fontSize": '50px'
},
}
},
methods: {
//click触发执行这个class修改函数
modify_class_color() {
this.default_style["background-color"] = this.randomColor();
},
//随机生成一个rgba颜色
randomColor() {
let color = "#";
for (let i = 0; i < 8; i++) color += parseInt(Math.random() * 16).toString(16);
console.log(color)
return color;
}
}
}).mount('#app')
script>
body>
html>
怎么样, 找到黄色 了吗? ๑乛◡乛๑ 手动滑稽~
在PD-01章节你已经学会了用按钮控制style了, 以此类推, 如果你也想给某个东西设置一个开关, 当你触发开关时才做某些事, 也很简单
1.v-on实际演练: 点一下按钮, msg增加1
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的v-ontitle>
head>
<body>
<div id="app">
<button v-on:click="add">Message: {
{ msg }}button>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
Vue.createApp({
data() {
return {
msg: 0}
},
methods: {
//click触发执行add函数, 即可将msg自增1
add() {
this.msg++
}
}
}).mount('#app')
script>
body>
html>
Vue官方推荐-------将
v-on缩写为@简约又美观, 所以上面案例里的html中button可以改为
<button @click="add">Message: {
{ msg }}button>
PRD-03:我想做一些条件判断,减少代码量
还有一些常用的v-指令:
1.v-if实际演练:
<p v-if="seen">现在你看到我了p>
//这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<p v-for="(item,i) in list">数据是{
{item}},它在数组里的下标是{
{i}}p>
div>
<script src="https://unpkg.com/vue@next">script>
<script>
Vue.createApp({
data() {
return {
list:[1,2,3,4,5]}
}
}).mount('#app')
script>
body>
html>
PRD-NN:用Vue用的越深入时, 就会有一些需求要用到钩子, 什么是钩子我们先不管, 先看作用, 知道作用之后自然就理解了~
比如想在她初始化的时候就附带帮你做好一些事
下图是Vue3官方的生命周期图
汇总一下, 我们在创建vm实例时, 常用的钩子函数有:
created(){}
mounted(){}
//TODO 未完待续