<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- ratchet CSS -->
<link href="./bower_components/ratchet/dist/css/ratchet.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h1>{{app}}</h1>
<input type="text" v-model="app">
<input type="button" v-on:click="test" value="点击事件">
</div>
<!-- Vue JS. -->
<script src="./bower_components/vue/dist/vue.js"></script>
<script data-main="main" src="//cdn.bootcss.com/require.js/2.1.22/require.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods:{
test: function (argument) {
alert('1');
}
}
});
</script>
</body>
</html>
v-model="app",而你并没有在data中给定app键值
<h1>{{app}}</h1>
改成
<h1>{{message}}</h1>