直接复制以下代码到 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 的节点上的 可控变量.
完成后保存, 我们就可以直接在浏览器中看到效果
