（1）Vue 初识——① Hello World | Vue 基础理论实操
站长
· 阅读数 19
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏已于本月大改版，合二为一，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
1. Vue.js 是什么？
2. Vue.js 的主要功能是什么？
[编号：vue_01]
❗❗️❗️️P.s. 公众号对话框回复 vue_01、vue_02、web_01、html_01 或 css_01 查看参考答案样本~
1 如何在 div 里显示一个 Hello World 字符串
1.1 用原生 JS 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Hello World</title>
</head>
<body>
<div id="app"></div>
<script>
var dom = document.getElementById("app");
dom.innerHTML = "Hello World"
</script>
</body>
</html>
1.2 用 Vue.js 实现
1️⃣打开 Vue.js 官网，点击右上角“学习-教程”，完成 Vue.js 开发版本的安装（我们这里是把源代码下载到本地，然后进行引入）。
项目目录结构：
2️⃣将现有的 index.html 中的原生 JS 代码删除，编写 Vue 的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Hello World</title>
<script src="./vue.js"></script> <!-- 2️⃣-①：从当前目录下引入 vue.js； -->
</head>
<body>
<div id="app">
{{content}} <!-- 2️⃣-⑥：用 {{}} 包裹 content，写在 #app 这个 div 里。 -->
</div>
<script>
var app = new Vue({ // 2️⃣-②：创建一个 Vue 实例；
el: '#app', // 2️⃣-③：这个实例接收的第一个参数 el，稍后会详细讲解它，暂时不管；
data: { // 2️⃣-④：接收的第二个参数 data，它指的是数据；
content: 'hello world' /*
2️⃣-⑤：定义一个叫 content 的数据，内容是“hello world”，
与原生的作区分。
*/
}
})
</script>
</body>
</html>
写完后保存，刷新网页可以看到我们使用 Vue.js 也展示出了“hello world”。
现在来详细了解一下刚才写的这段 Vue 的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div> <!-- 3️⃣content 数据中的内容在 DOM 元素中用
插值表达式 “{{}}”来调用。 -->
<script>
var app = new Vue({ // ❗️创建一个名为 app 的实例，实例接收一些配置项：
el: '#app', /*
1️⃣el 配置项限制了一个 Vue 实例负责管理的区域，
这里即让“app 实例”去接管 id 为 app 的 DOM 元素标签里的所有内容；
*/
data: { /*
2️⃣data 配置项定义了一些数据，
这里即定义了内容为 "hello world" 的数据 content；
*/
content: 'hello world'
}
})
</script>
</body>
</html>
❗️题外话
假如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<div>{{content}}</div> <!-- ❗️再增加一个 div。
❗️使用了 {{}} 调用 content 中的内容，但无 id！ -->
<script>
var app = new Vue({
el: '#app',
data: {
content: 'hello world'
}
})
</script>
</body>
</html>
保存后，刷新页面查看，发现页面上只显示了一个“hello world”和这个新 div 中的原内容“{{content}}”：
❓为什么没有显示两个“hello world”？
答：因为 Vue 实例只接管了 el 所对应的 DOM 元素标签下的所有内容，而没有接管其他部分的内容，所以它只会替换 #app 所在 DOM 标签下的 {{content}} 内容。
2 如何在几秒后，更改 data 中数据的内容
2.1 用原生 JS
var dom = document.getElementById("app");
dom.innerHTML = "hello world"
setTimeout(function() {
dom.innerHTML = "bye world"
}, 2000)
原生 JS 将“变动的数据”集中在对 DOM 的操作上。
2.2 用 Vue.js
var app = new Vue({
el: "#app",
data: { // 2️⃣-②：$data 可以理解为 data 后面的对象。
content: "hello world"
}
})
setTimeout(function() {
app.$data.content = "bye world" // ❗️Vue 关注点在数据！
// 1️⃣app 指的是这个 Vue 实例；
// 2️⃣-①：$data 是 data 的别名；
}, 2000)
Vue.js 将“变动的数据”集中在对其的管理上：数据的内容是什么，那么页面展示的就是什么。数据改变了，页面就会跟着变！
祝好，qdywxs ♥ you！