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

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样设置虚线样式讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。