vue1.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!--变量和方法调用-->
<h1>{{ greet("night") }}</h1>
<p>{{ message }}</p>
<hr> <p>
<!--数据绑定-->
<a v-bind:href="website">百度</a>
</p>
<p v-html="websiteTag"></p>
<hr> <div>
<div>
<!--事件绑定-->
<button v-on:click="add(1)">单击加一岁</button>
<button @click="sub(1)">单击减一岁</button>
<!--双击操作-->
<button v-on:dblclick="add(10)">双击加十岁</button>
<button @dblclick="sub(10)">双击减十岁</button>
</div>
<p>我的年龄是{{age}}</p> <hr>
<div id="canvas" v-on:mousemove="updateXY">
{{x}} ,{{y}}
</div>
</div> </div>
<script src="app.js"></script> <hr>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script src="app2.js"></script> </body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
name: "Tom",
message: 'Hello Vue!',
website: "http://www.baidu.com",
websiteTag: "<a href='http://www.baidu.com'>百度Tag</a>",
age: 30,
x: 0,
y: 0,
},
methods: {
greet: function (time) {
return 'Good ' + time + '！' + this.name;
},
// 事件绑定
add: function (n) {
this.age += n;
},
sub: function (n) {
this.age -= n;
},
updateXY: function (event) {
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
},
})
app2.js
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
style.css
#canvas {
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid;
}
截图：
