Vue3 学习-初识体验-helloworld
在数据分析中有一个最重要的一环就是数据可视化, 数据报表的开发. 从我从业这几年的经历上看, 经历了从业务系统导表格数据, 到Excel+PPT, 再是开源报表工具, 再是主流商业BI产品(低/零代码平台), 最后又回归到数据产品开发.这些过程在不同场景仍然是交替应用着.对我而言, 基于移动端的商业数据BI还是我的刚需,要达到用户体验好的层面,还是得通过标准开发来实现.
好在现在的前端已经逐渐"工具化", 学一个框架搭搭积木就能满足我绝大多数需求, 觉得还是有必要学一波前端的.
Vue 的几点认识
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
对我来说, 主要是其学习成本很低, 能快速掌握, 其中几个特点我还是很感兴趣的. (我学的是3的版本哈)
- 声明式渲染
- 响应式的数据驱动
- 单文件组件 (组件即页面的一部分, 类似模块也行吧; 单文件就是将 模板, 逻辑, 样式写在一个.vue的文件中)
- Composition API
前期为了方便演示还是用 Options API 来演示组件逻辑 (即像2.x的 data, methods, mounted ...等)
HelloWorld 演示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
template: `<div>hello, world!</div>`
}).mount('#root')
</script>
</body>
</html>
这里即将这个Vue的一个实例 App 挂载到了这个 id 为 "root" 的 div元素节点上, 并将 template 的dom也挂在了该节点中.
插值表达式语法 {{ }}
其实就跟很多后端语言的模板变量一样的, 里面可以放变量, 可以放 js 表达式.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: 666
}
},
mounted () {
console.log('mounted () 页面加载就会执行这个函数哦~')
},
template: `<div>{{content}}</div>`
}).mount('#root')
</script>
</body>
</html>
data () 这里会返回一些数据, 如 content, 然后能应用于模板, 响应式变化.
案例-定时器实现数字自动累加
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: 1
}
},
mounted () {
setInterval(() => {
this.$data.content += 1
}, 1000);
},
template: `<div>{{content}}</div>`
}).mount('#root')
</script>
</body>
</html>
这样页面每隔一秒就自动加一啦. Vue的一个初体验就到这里啦, 还是蛮简单的.
耐心和恒心, 总会获得回报的.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」