初识Vue
文章发布较早,内容可能过时,阅读注意甄别。
# 前言
这次契机难得,终于能有一个整块儿的时间学习一下 Vue,而今学习基本到一个段落,过程中紧紧跟随做了笔记,不敢怠慢,整理到这里。这个整理更多是给自己的,便于以后翻看查阅!
特别鸣谢:尚硅谷 张天禹
老师的 尚硅谷 Vue2.0+Vue3.0 全套教程丨 vuejs 从入门到精通 (opens new window) 。
这个课程真的是说多少夸奖的话都是不够的,视频中弹幕也有很多很多感恩的话,张老师的课程由浅入深,细致入微,引人入胜,即便是一个外行人,也能很快就会被课程吸引,让我在学习过程中不至于枯燥,这真的是一个宝藏老师,的确 YYDS。
笔记里边大部分都是代码,以及一些简短的记录,这里就也采用代码与说明的方式进行记录。
学习过程中的代码,统一发布在: https://github.com/eryajf/vue-learn-code (opens new window)
# 初相识
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初识Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- toUpperCase: 转为大写 -->
<h1>Hello {{name.toUpperCase()}},{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
// 创建Vue实例
new Vue({
el: "#root", // el 用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data: {
// 用于存储数据,数据供el指定的容器使用,值先写死成一个对象
name: "eryajf",
age: "3",
},
});
</script>
</body>
</html>
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
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
# 笔记
初始 Vue:
- 想让
Vue
工作,就必须创建一个Vue
实例,且要传入一个配置对象。 root 容器
里的代码依然遵循html
规范,只不过混入了一些特殊的Vue
语法。root 容器
里的代码被称为Vue 模板
Vue 实例
和容器
是一一对应的。- 真实开发中只有一个
Vue 实例
,并且会配合组件一起使用。 {{xxx}}
中的 xxx 要写js 表达式
,且 xxx 可以自动读取到 data 中的所有属性- 一旦 data 中的数据发生改变,那么页面中用到该数据的地方也会自动更新
注意区分:
js 表达式 和 js 代码(语句) - 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
a
a+b
demo(1)
x === y ? 'a' : 'b'
- js 代码
if(){}
for(){}
:::
![微信](https://t.eryajf.net/imgs/2023/01/834f12107ebc432a.png)
![支付宝](https://t.eryajf.net/imgs/2023/01/fc21022aadd292ca.png)
上次更新: 2024/06/13, 22:13:45
- 01
- 学习周刊-总第175期-2024年第36周09-05
- 02
- 魔方复原-记录个人理解的教程09-01