初识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
32

# `笔记`

初始 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(){}

上次更新: 2024/02/28, 13:00:35

← SpringBoot整合SQLite 模板语法→

初识Vue

# 前言

# 初相识

# 代码

# 笔记

# `代码`

# `笔记`