怎样理解 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 的节点上的可控变量.

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

巴特西

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

最新文章

热门文章