【Vue.js學習筆記】3：資料繫結,事件繫結
阿新 • • 發佈：2018-12-26
資料繫結
使用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">
< 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;
}
執行結果
