1. 全栈程序员必看首页

Vue3快速入门教程「建议收藏」

全栈程序员-用户IM • • 未分类

Vue3快速入门教程「建议收藏」DataProperty模板在<>内的,属于HTMLattribute普通的Mustache语法:双大括号->{{number}}的文本v-bind和v-on的使用创建vm实例时对常用的几个钩子函数的使用方法created(){}mounted(){}以下示例:每秒改变1次msg<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”U..

大家好，又见面了，我是你们的朋友全栈君。

学某个新技能时,大多数人倾向于：一开始就从头到尾完整学一遍；甚至有人翻来覆去重复学很多遍也达不到熟记于心, 我个人认为，这不是最好的办法~
我的建议的是: 面向需求 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 未完待续
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/136823.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号