版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85198568
数据绑定
使用Vue时在Vue对象的el字段中要指定一下根容器，这里用id选择器。这个例子同时学习了data和methods的基本用法。
数据绑定（data-binding）可以将Vue对象中的data的值绑定到HTML标签中的某些位置，则修改时只需要修改对象中相应data的值即可。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<!--data的直接使用-->
<h3>我叫{{name}},我的job是{{job}}</h3>
<hr>
<!--methods的使用-->
<h3>{{greet("Afternoon")}}</h3>
<hr>
<!--属性绑定-->
<a v-bind:href="website">一个data绑定到了这个标签的href</a>
<br>
一个data绑定到了右边这个输入框的value
<input type="text" v-bind:value="name">
<hr>
<!--绑定到标签,v-html中的内容将以HTML标签形式插入进去-->
<p v-html="websiteTag"></p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
name: "lzh",
job: "学生",
website: "http://www.baidu.com",
websiteTag: "<a href='http://www.baidu.com'>绑定到标签</a>"
},
methods: {
greet: function (time) {
return "Good " + time + " ," + this.name + " !";
}
}
});
/*
el: element,元素,这里指HTML中的根容器
data: 用于数据的存储
methods: 用于方法的存储
*/
运行结果
事件绑定
使用v-on:或者@后跟要绑定的事件，就可以将Vue对象中的function传进去。
要注意的是，一般来说传入的回调函数有没有括号都可以。当要在HTML中为其传入参数时就必须有括号，当要使用回调的事件对象event时就必须没有括号。见下面的例子。
indexl.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:>
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<!--事件绑定,注意v-on:可以换成一个@符号-->
<h3>直接在v-on:事件里写</h3>
<button @click="age++">加一岁</button>
<button v-on:click="age--">减一岁</button>
<p>我的年龄是{{age}}</p>
<h3>写到methods里</h3>
<button @click="add()">加一岁</button>
<button v-on:click="subtract()">减一岁</button>
<p>我的年龄是{{age}}</p>
<h3>双击事件</h3>
<button v-on:dblclick="add(10)">加十岁</button>
<button v-on:dblclick="subtract(10)">减十岁</button>
<p>我的年龄是{{age}}</p>
<h3>鼠标事件</h3>
<!--这里一定不能给回调的函数加括号,否则无法获取到event对象-->
<div id="canvas" v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>
<script src="app2.js"></script>
</body>
</html>
app2.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function (inc = 1) {
this.age += inc;
},
subtract: function (dec = 1) {
this.age -= dec;
},
updateXY: function (event) {//这里event即是当事件触发时的事件对象
// console.log(event); //输出查看一下
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
style.css
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}
运行结果
