怎样理解 Vue 的 "Hello, World!" 代码?

直接复制以下代码到 html 文件中即可运行.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Hello World.</title>
<!-- 引入 Vue 的在线静态资源, 这是使用 Vue 最简单的方法. -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- 这里有一个特殊的语法点: 双花括号 -->
<!-- 这里借鉴了模板引擎的语法, 双花括号里面的内容是一个 "可执行" 的表达式. -->
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
// Vue 对象可以理解为是一位聪明的 "工人". 不需要让我们手动修改 DOM.
// el 表示: "element" , 通过它定位页面上的 DOM 节点. 这里的 "#app" 即为 id = "app" 的 DOM 节点.
// data 属性是一个对象, 里面的属性表示作用在 id 为 app 的节点上的 "可控变量".
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

Vue 对象可以理解为是一位聪明的工人. 不需要让我们手动修改 DOM.

el 表示: element , 通过它定位页面上的 DOM 节点. 这里的 #app 即为 id = "app" 的 DOM 节点.

data 属性是一个对象, 里面的属性表示: 作用在 id 为 app 的节点上的可控变量.

完成后保存, 我们就可以直接在浏览器中看到效果