當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】

發布時間：2024/9/30 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】?

目? ?錄

4、事件綁定

4.1、事件綁定（點擊、雙擊、鼠標移動）

點擊按鈕-最簡單的事件綁定（無參函數）

格式

點擊按鈕-數字累加

Math.random()---隨機數

事件對象、節點對象（生成隨機顏色快）

4.2、事件傳參

4.3、事件對象

4.4、既要傳參又要獲取事件對象（固定格式：$event）

事件對象-固定格式：$event

傳3個參數

4.5、代碼

運行截圖

代碼

樣式處理操作（模板、事件、屬性綁定）

運行圖

關鍵技術點

代碼

樣式操作

Tab切換

原生實現Tab切換

Vue.js實現Tab切換

JavaScript中的this關鍵字

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 @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"><li v-for="(item,index) in list" v-bind:class=" item.iscom ? 'bg':'' ">序號：{{index+1}} ==>主題：{{item.title}}==>狀態：{{item.iscom ? "完成":"待完成"}}==>操作：<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// 操作標簽的stylenew 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】 windowfunction 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、對象里面的方法里面的函數里面的thisvar person2 = {name: "張飛",age: 20,say: function () {console.log(this) // person2function tt() {console.log(this) // window}tt();}}person2.say();// 4、函數里面的對象里面的方法里面的thisfunction go() {console.log(this) // windowlet 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就是p1p1.cc.apply(p2) // p2這個對象調用了p1對象的cc方法，所以cc方法里面的this指向p2 </script></html>

多謝觀看~

總結

以上是生活随笔為你收集整理的Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue.js-Day01-AM【第一次学
下一篇： Vue.js-Day02-AM【Vue表