本节尝试使用 Vue.js 来输出Hello World。

首先在HTML文件中引入Vue.js 文件




页面输入下列内容：




{{ message }}





var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})



HTML完整代码如下：


<!DOCTYPE html>





 

 

 Document

 





 

 {{ message }}

 

 

 var app = new Vue({

 el: '#app',

 data: {

 message: 'Hello World ! '

 }

 })





页面输出


Hello World !

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

打开你浏览器的控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到页面在同步更新。


app.message = 'Hello Liuweb !';

修改后，页面发生了变化

file

我们并没有通过诸如 document.querySelector 等方式拿到DOM节点再进行数据修改，只是通过修改变量就实现了页面DOM元素更新，这就是Vue的魅力所在。