第一步导入vue,第二步在html里面写一点东西,第三步在js里面写一点东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message: "hello vue!"
}
})
</script>
</body>
</html>
data是vue实例当中的使用到的数据,你需要使用什么就写什么。
{{message}} 是模板的语法,作用是使用数据和页面结构关联起来。
vue是如何知道要去操作那个元素的呢?el:"#app"这里有el的属性,在css当中#是id选择器。这样就可以让vue去管理id为app的元素。