html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>{{greet('afternoon')}}</h1> <!--方法绑定-->
<p>{{name}}</p>
<p>{{ job }}</p>
<a v-bind:href="website"> web开发</a> <!--属性绑定-->
<input type="" v-bind:value="job"/> <!--属性绑定-->
<br/>
<p v-html="websiteTag"></p> <!--标签绑定-->
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>js代码：
new Vue({
el: '#app',
data: {
name: 'king',
job: 'web development',
website: 'http://www.baidu.com',
websiteTag: '<a href="http://www.baidu.com/">baidu</a>'
},
methods: {
greet: function (time) {
return 'good '+ time + ' '+this.name +'!';
}
}
});