目 錄
4、事件綁定
4.1、事件綁定（點擊、雙擊、鼠標移動）
點擊按鈕-最簡單的事件綁定（無參函數）
格式
// 模板（Body）⾥⾯
<標籤 v-on:事件類型="事件函數"></標籤>
// 縮寫
<標籤 @事件類型="事件函數"></標籤>
// JS⾥⾯
new Vue({
...
methods:{ // 事件
事件函數:function(){
...
}
}
})
點擊按鈕-數字累加
數據綁定 --> js中的變量發生變化，body中的變量會隨之發生變化。
Math.random()---隨機數
Math.random() --> [0, 1)
Math.floor() --> 向下取整【floor---地板】
事件對象、節點對象（生成隨機顏色快）
4.2、事件傳參
// 縮寫
<標籤 @事件類型="事件函數(實參)"></標籤>
// JS⾥⾯
new Vue({
...
methods:{ // 事件
事件函數:function(形參){ // 形參就是上⾯調⽤時候傳遞的數據
...
}
}
})
1、調用函數的時候，不寫參數【@click="change"】，
但<script></script>標籤中Vue對象中的函數 含 參數【change: function (ev){}】，則-->ev代表事件對象。
2、【@click="change(30)"】--> ev代表30。【會報錯！！！】
3、總之，就是：不傳參，ev代表事件對象；傳參：ev代表實參數據。
4.3、事件對象
// 縮寫
<標籤 @事件類型="事件函數"></標籤>
// JS⾥⾯
new Vue({
...
methods:{ // 事件
事件函數:function(形參){ // 形參就是事件對象！ 形參⼀般⽤ e ev event 標識符表示
...
}
}
})
4.4、既要傳參又要獲取事件對象（固定格式：$event）
// 縮寫
<標籤 @事件類型="事件函數(實參,$event)"></標籤>
// JS⾥⾯
new Vue({
...
methods:{ // 事件
事件函數:function(形參,ev){ // 和上⾯實際傳⼊⼀⼀對應。 $event就表示事件對象。
...
}
}
})
事件對象-固定格式：$event
傳3個參數
4.5、代碼
運行截圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06、事件相關</title>
<script src="./vue.js"></script>
<style>
.box {
border: 2px solid blue;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
{{num}}
<!-- <button v-on:click="say">點擊一下！</button> -->
<button @click="say">點擊一下！</button>
<div class="box" @click="change"></div>
<hr>
<button @click="setNum(10)">將num設爲10</button>
<button @click="setNum(20)">將num設爲20</button>
<button @click="setNum(40)">將num設爲40</button>
<div class="box" @click="setinfo('你好',$event,'red')"></div>
<div class="box" @click="setinfo('天下第一！',$event,'blue')"></div>
</div>
</body>
<script>
new Vue({
el: "#app", // 作用的範圍
data: { // 數據
num: 1
},
methods: { // 事件
say: function () {
// console.log(this)
console.log(this.num)
this.num++;
},
change: function (ev) { // 【形參(ev)表示事件對象】
console.log(ev)
console.log(ev.target) // 就是當前這個節點對象 div#box
// Math.random() 生成一個0-1 之間的隨機小數，包含0 不包含1
// Math.floor() 向下取整
let r = Math.floor(Math.random() * 256) // [0,255]
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
ev.target.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"
console.log("change")
},
setNum: function (x) { // 【形參就是上面調用的時候,傳遞的數據！】
console.log(x)
this.num = x;
},
setinfo: function (str, event, color) { // 【既要獲得參數，又要獲得事件對象！】
console.log(str)
console.log(event)
console.log(color)
event.target.style.backgroundColor = color;
event.target.innerHTML = str;
}
}
})
</script>
</html>
樣式處理操作（模板、事件、屬性綁定）
運行圖
關鍵技術點
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07、ToDoList</title>
<script src="./vue.js"></script>
<style>
.bg {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul v-if="list.length">
<!-- v-bind:class="變量/表達式/'字符串'" -->
<li v-for="(item,index) in list" v-bind:class=" item.iscom ? 'bg':'' ">
序號：{{index+1}} ==>
主題：{{item.title}}==>
狀態：{{item.iscom ? "完成":"待完成"}}==>
操作：
<!-- change：修改這一組、這一條的數據。 -->
<button v-if="!item.iscom" @click="change(item)">完成</button>
<button @click="del(index)">刪除</button>
<hr>
</li>
</ul>
<h3 v-else>沒有數據了哦！</h3>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
list: [
{ title: "晚上出去看電影", iscom: false }, // iscom表示完成情況
{ title: "明天去游泳", iscom: false },
{ title: "做完作業", iscom: true },
{ title: "一起開黑！", iscom: false },
]
},
methods: {
change: function (val) { // val就是這一條數據
val.iscom = true;
},
del(idx) { // 刪除的數據是數組裏面的第幾條
console.log(idx)
// 數組.splice(開始的位置,刪除的個數)
this.list.splice(idx, 1)
}
}
})
</script>
</html>
樣式操作
- 操作 標籤的class
- 操作 標籤的style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08、樣式操作</title>
<script src="./vue.js"></script>
<style>
.cc {
background-color: blue;
width: 100px;
height: 100px;
margin-top: 20px;
}
.active {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div id="box" :style="cssdesc"></div>
<!-- 掌握下面的這種 樣式操作！ -->
<div :class="state ? 'cc active':'cc'" @click="toggle"></div>
</div>
</body>
<script>
// 樣式操作！
// 操作標籤的class
// 操作標籤的style
new Vue({
el: "#app",
data: {
cssdesc: {
backgroundColor: "red",
border: "2px solid blue",
width: "100px",
height: "100px"
},
state: false
},
methods: {
toggle() {
console.log(this) // Vue對象
this.state = !this.state
}
}
})
// 網頁製作的時候：
// 行爲、結構、表現三者分離！
// JS HTML CSS
</script>
</html>
Tab切換
Vue.js簡化代碼 --> 減少工作量
原生實現Tab切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09、原生實現tab切換</title>
<style>
.title span {
display: inline-block;
padding: 5px 10px;
background-color: #eee;
}
.title .active {
background-color: red;
color: #fff;
}
.box {
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="title">
<span class="active">軍事</span>
<span>音樂</span>
<span>娛樂</span>
</div>
<div class="content">
<div class="box">軍事的內容</div>
<div class="box" style="display: none;">音樂的內容</div>
<div class="box" style="display: none;">娛樂的內容</div>
</div>
</body>
<script>
// 原生實現！
// 1、給標題綁定事件
var span = document.getElementsByTagName("span"); // 找到的是一個集合
var box = document.getElementsByClassName("box");
// 2、給每個都綁定一個點擊事件
for (var index = 0; index < span.length; index++) {
// 給每個span節點對象，添加一個 xuhao 的屬性 值爲他所在的下標
span[index].xuhao = index; // 【重要！】
span[index].onclick = function () {
// 去掉所有標題的激活class
for (var idx = 0; idx < span.length; idx++) {
span[idx].className = ""
}
// console.log(this) // this就是當前點擊的這個span節點對象！
this.className = "active" // 當前這個激活！
// 遍歷下面所有的box，如果位置和 xuhao一致，就是顯示，不一致就隱藏
console.log(this.xuhao)
for (var k = 0; k < box.length; k++) {
if (k == this.xuhao) {
box[k].style.display = "block"
} else {
box[k].style.display = "none"
}
}
}
}
</script>
</html>
Vue.js實現Tab切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10、vue.js實現Tab切換</title>
<script src="./vue.js"></script>
<style>
.title span {
display: inline-block;
padding: 5px 10px;
background-color: #eee;
}
.title .active {
background-color: red;
color: #fff;
}
.box {
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="app">
<div class="title">
<span :class="curIndex==1 ?'active':''" @click="tab(1)">軍事</span>
<span :class="curIndex==2 ?'active':''" @click="tab(2)">音樂</span>
<span :class="curIndex==3 ?'active':''" @click="tab(3)">娛樂</span>
</div>
<div class="content">
<div class="box" v-if="curIndex==1">軍事的內容</div>
<div class="box" v-if="curIndex==2">音樂的內容</div>
<div class="box" v-if="curIndex==3">娛樂的內容</div>
</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
curIndex: 1
},
methods: {
tab(idx) {
this.curIndex = idx;
}
}
})
</script>
</html>
JavaScript中的this關鍵字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11、JavaScript中的this</title>
</head>
<body>
</body>
<script>
// 1、函數裏面的this 【情況1】 window
function show() {
console.log(this) // window
}
show();
console.log(window.show == show)
// 2、對象裏面方法的this 【情況2】 當前對象
var person = {
name: "張飛",
age: 20,
say: function () {
console.log(this) // person
}
}
person.say();
// 3、對象裏面的方法裏面的函數裏面的this
var person2 = {
name: "張飛",
age: 20,
say: function () {
console.log(this) // person2
function tt() {
console.log(this) // window
}
tt();
}
}
person2.say();
// 4、函數裏面的 對象裏面的方法裏面的this
function go() {
console.log(this) // window
let obj = {
name: "李四啊",
run: function () {
console.log(this) // obj
}
}
obj.run();
}
go()
// 5、 es5定時器裏面的this 是window。
// 6、節點對象的事件函數裏面this 是當前節點
var body = document.getElementsByTagName("body");
console.log(body)
body[0].onclick = function () {
console.log(this) // body節點！
}
// 7、構造函數裏面的this 指的是實例化出出來的對象！ 【3、構造函數裏this】
function Cat(name) {
this.name = name;
this.sayName = function () {
console.log(this)
}
}
var c1 = new Cat('波斯貓');
var c2 = new Cat('黑貓警長')
c1.sayName();
c2.sayName();
// 8、 call/apply/bind 【4、改變this的指向 （借用,誰借this就是指的誰！） 】
var p1 = {
name: "小明",
cc: function () {
console.log(this)
}
}
var p2 = {
name: "李四",
age: 20
}
// 函數.apply(借用者) 函數裏面的this就指向這個借用者！
show.apply(p1) // p1這對象 調用 show方法。 那麼show方法裏面的this就是p1
p1.cc.apply(p2) // p2這個對象 調用了p1對象的cc方法，所以cc方法裏面的this指向p2
</script>
</html>
多謝觀看~