VUE3|VUE3 入门

1. 概述
老话说的好:没有别人混的好,是因为自己能力欠佳,因此越是混的差,越要努力提升自己。

言归正传,现在 jquery 用的越来越少,大部分公司都使用 VUE 技术,今天我们也来聊聊 VUE3。

2. 安装开发工具 Visual Studio Code
前端页面通常使用 Visual Studio Code 工具进行开发。
可以到官网进行下载并安装:https://code.visualstudio.com/
VUE3|VUE3 入门
文章图片


3. VUE3 入门
3.1 引入 VUE3
在 HTML 页面引入即可。

title


3.2 在元素中追加内容


在 id 为 myDiv 的元素中,追加 hello 追风人!

VUE3|VUE3 入门
文章图片




3.3 元素绑定数据


增加按钮元素,在按钮中使用 v-on:click 为按钮增加 onClick 事件,在 methods 中增加事件方法,事件方法中修改数据 content 的值,元素中 {{content}} 的值会同步变化

点击按钮前:
VUE3|VUE3 入门
文章图片



点击按钮后:
VUE3|VUE3 入门
文章图片




3.5 动态隐藏或显示元素


v-for="item of list" 是从list数据中循环取出元素,放到item中,下标放到 index 中
VUE3|VUE3 入门
文章图片




3.7 获得input元素的值


通过 v-model="数据",绑定数据和input元素

VUE3|VUE3 入门
文章图片



VUE3|VUE3 入门
文章图片




4. 综述
今天聊了一下 VUE3 入门,希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 :)
关注追风人聊Java,每天更新Java干货。

5. 个人公众号
追风人聊Java,欢迎大家关注
VUE3|VUE3 入门
文章图片

【VUE3|VUE3 入门】

    推荐阅读