1.3 第一个vue页面
这是一个简单的html页面,带有vue的渲染功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="">
var app=new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
})
</script>
</body>
</html>
1.第4行代码是引入vue.js
2.第9行代码的{{message}}是等待vue渲染的变量
3.第12行代码到17是绑定一个数据
el代表element,元素,el:#app指定了id是app的元素,也就是第8行的div
data是el绑定的数据,可以绑定多个数据,这里只有一个数据message,它最终使用在第9行代码处
本页面运行的结果就是页面上出现Hello Vue
新建一个html文件,将上面的代码复制进去后,用浏览器打开,可以看到: