Vue3快速入门教程「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。
学某个新技能时,大多数人倾向于：一开始就从头到尾完整学一遍；甚至有人翻来覆去重复学很多遍也达不到熟记于心, 我个人认为，这不是最好的办法~ 我的建议的是:
面向需求or面向问题来学习. 最开始你可能不了解你要实现的效果会涉及哪些技术知识点, 那么你可以像产品经理那样先列出PRD, 再根据PRD来一步一步地实现 当你最终完成了整个作品时, 你会发现, 你已经通过这些”点”逐步形成”面”, 对于Vue的学习就达到了事半功倍的效果~
从需求点入手去学习知识点
- 02: 我想做一个动态style, 随机切换div的颜色
- 1.v-on实际演练: *点一下按钮, msg增加1*
- 03:我想做一些条件判断,减少代码量
- 0X:当你逐步深入vue时, 就会有些需求要用到钩子, 先不管什么是钩子, 先测试钩子的作用, 自然就可以理解~
01:我想做一个类似广告显示屏一样的东西, 支持动态修改, 以便我可以随时控制它的内容
Data Property模板, 俗称: 变量模板
- 第一种: 在<>内的,属于HTML attribute
- 第二种: 普通的Mustache语法 : 双大括号-> { {number}} 的文本
1.模板实际演练: 每秒改变1次msg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态模板01</title>
</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种访问方式, 同样用定时器例子来说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态模板02</title>
</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的名称了, 而不是写死它 完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态id</title>
</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的吧?
– 没错, 下一步我们改个样式玩玩?
02: 我想做一个动态style, 随机切换div的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的动态style</title>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学学Vue的v-on</title>
</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>03:我想做一些条件判断,减少代码量
还有一些常用的v-指令:
1.v-if实际演练:
<p v-if="seen">现在你看到我了</p>
//这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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>0X:当你逐步深入vue时, 就会有些需求要用到钩子, 先不管什么是钩子, 先测试钩子的作用, 自然就可以理解~
1.比如想在初始化时附带帮你做一些事
下图是Vue3官方的生命周期图
在这里插入图片描述
创建vm实例时, 常用的钩子函数有:
created(){}
mounted(){}//TODO 未完待续发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136823.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月4，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
