【Vue I】从楼梯上摔下来

【Vue I】从楼梯上摔下来

anzai249 床主

目的何在?

之前零基础用Vue写了外专课媒体商城管理系统的前端界面,觉得挺好用,本来以为掌握得很不错,但是我发现我连基本的生命周期都不知道是啥。

我比较适合先做案例后学基础知识,我觉得这样不至于学到一半就觉得没意思放弃掉。

所以就来了,从楼梯上摔下来式学习,第一课!

Vue简介

Vue是一款构建用户界面的渐进式JavaScript框架,由尤雨溪(我怎么一直想读成鱿鱼须)开发。

特点

  • 组件化
  • 声明式
  • 虚拟DOM和Diff算法

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Vue3的js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Hello World</title>
</head>

<body>
<!-- 来个id为root的div -->
<div id="root">
<h1>Hello, World!</h1>
<!-- 接住a,显示出来 -->
<h1>{{a}}</h1>
</div>

<script>
// 创建实例
const { createApp } = Vue
createApp({
data() {
return {
a: 0 //扔回a
}
}
}).mount('#root') // 挂到id为root的元素上
</script>
</body>

</html>

成功引入与运行。

(如果我把这个直接让Hexo解析会怎么样

  • 标题: 【Vue I】从楼梯上摔下来
  • 作者: anzai249
  • 创建于 : 2023-07-04 16:50:37
  • 更新于 : 2023-09-01 19:38:43
  • 链接: https://anzai.sleepingbed.top/archives/posts/574e7c50.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
此页目录
【Vue I】从楼梯上摔下来