<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<!--获取方法-->
<h1>{{ greet('afternoon') }}</h1>
<!--获取data中的值-->
<h1>Name:{{ name }}</h1>
<p>Job:{{ job }}</p>
<!--属性绑定-->
<a v-bind:href="website">web开发</a>
<input type="text" v-bind:value="name">
<!--属性绑定-绑定标签-->
<p v-html="websiteTag"></p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"AAAAA",
job:"BBBBB",
website:"http://www.baidu.com",
websiteTag:"<a href='http://www.baidu.com'>Thenewstep</a>"
},
methods:{
greet:function (time) {
return "Good "+time+" "+this.name+"!!";
}
}
});
/*
* el:elsement 需要获取的元素，一定是html中的根容器元素
* data:用于数据的存储
* methods:用于存储各种方法
* data-binding：给属性绑定对应的值
* */