Vue3快速入门教程

木法星人

已于 2022-03-10 11:58:36 修改

阅读量1.3w

点赞数 14

分类专栏：测试开发工程师文章标签：前端 Vue3 vue vuejs 测试开发

于 2020-12-29 02:22:23 首次发布

本文链接：https://blog.csdn.net/qq_42183962/article/details/111828760

版权

测试开发工程师专栏收录该内容

31 篇文章 9 订阅

订阅专栏

学某个新技能时,大多数人倾向于：一开始就从头到尾完整学一遍；甚至有人翻来覆去重复学很多遍也达不到熟记于心, 我个人认为，这不是最好的办法~
我的建议的是: 面向需求 or 面向问题来学习. 最开始你可能不了解你要实现的效果会涉及哪些技术知识点, 那么你可以像产品经理那样先列出PRD, 再根据PRD来一步一步地实现
当你最终完成了整个作品时, 你会发现, 你已经通过这些"点"逐步形成"面", 对于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 未完待续

木法星人

关注

14
点赞
踩
57

收藏

觉得还不错? 一键收藏
打赏
8
评论
Vue3快速入门教程

Data Property模板在<>内的,属于HTML attribute普通的Mustache语法 : 双大括号-> {{number}} 的文本v-bind和v-on的使用创建vm实例时对常用的几个钩子函数的使用方法created(){}mounted(){}以下示例: 每秒改变1次msg<!DOCTYPE html><html lang="en"><head> <meta charset="U..
复制链接

扫一扫