Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
生活随笔
收集整理的這篇文章主要介紹了
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Vue.js實訓(xùn)【基礎(chǔ)理論(5天)+項目實戰(zhàn)(5天)】博客匯總表【詳細(xì)筆記】?
目? ?錄
4、事件綁定
4.1、事件綁定（點擊、雙擊、鼠標(biāo)移動）
點擊按鈕-最簡單的事件綁定（無參函數(shù)）
格式
點擊按鈕-數(shù)字累加
Math.random()---隨機數(shù)
事件對象、節(jié)點對象（生成隨機顏色快）
4.2、事件傳參
4.3、事件對象
4.4、既要傳參又要獲取事件對象（固定格式：$event）
事件對象-固定格式：$event
傳3個參數(shù)
4.5、代碼
運行截圖
代碼
樣式處理操作（模板、事件、屬性綁定）
運行圖
關(guān)鍵技術(shù)點
代碼
樣式操作
Tab切換
原生實現(xiàn)Tab切換
Vue.js實現(xiàn)Tab切換
JavaScript中的this關(guān)鍵字
4、事件綁定
4.1、事件綁定（點擊、雙擊、鼠標(biāo)移動）
點擊按鈕-最簡單的事件綁定（無參函數(shù)）
格式
// 模板（Body）?? <標(biāo)簽 v-on:事件類型="事件函數(shù)"></標(biāo)簽> // 縮寫 <標(biāo)簽 @事件類型="事件函數(shù)"></標(biāo)簽>// JS?? new Vue({...methods:{ // 事件事件函數(shù):function(){...}} })點擊按鈕-數(shù)字累加
數(shù)據(jù)綁定?--> js中的變量發(fā)生變化，body中的變量會隨之發(fā)生變化。
Math.random()---隨機數(shù)
Math.random()? ?-->? ?[0, 1)
Math.floor()? ?-->? ?向下取整【floor---地板】
事件對象、節(jié)點對象（生成隨機顏色快）
4.2、事件傳參
// 縮寫 <標(biāo)簽 @事件類型="事件函數(shù)(實參)"></標(biāo)簽>// JS?? new Vue({...methods:{ // 事件事件函數(shù):function(形參){ // 形參就是上?調(diào)?時候傳遞的數(shù)據(jù)...}} })1、調(diào)用函數(shù)的時候，不寫參數(shù)【@click="change"】，
- 但<script></script>標(biāo)簽中Vue對象中的函數(shù) 含 參數(shù)【change:?function?(ev){}】，則-->ev代表事件對象。
2、【@click="change(30)"】--> ev代表30。【會報錯！！！】
3、總之，就是：不傳參，ev代表事件對象；傳參：ev代表實參數(shù)據(jù)。
4.3、事件對象
// 縮寫 <標(biāo)簽 @事件類型="事件函數(shù)"></標(biāo)簽>// JS?? new Vue({...methods:{ // 事件事件函數(shù):function(形參){ // 形參就是事件對象！ 形參?般? e ev event 標(biāo)識符表示...}} })4.4、既要傳參又要獲取事件對象（固定格式：$event）
// 縮寫 <標(biāo)簽 @事件類型="事件函數(shù)(實參,$event)"></標(biāo)簽>// JS?? new Vue({...methods:{ // 事件事件函數(shù):function(形參,ev){ // 和上?實際傳???對應(yīng)。 $event就表示事件對象。...}} })事件對象-固定格式：$event
傳3個參數(shù)
4.5、代碼
運行截圖
代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>06、事件相關(guān)</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設(shè)為10</button><button @click="setNum(20)">將num設(shè)為20</button><button @click="setNum(40)">將num設(shè)為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: { // 數(shù)據(jù)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) // 就是當(dāng)前這個節(jié)點對象 div#box// Math.random() 生成一個0-1 之間的隨機小數(shù)，包含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) { // 【形參就是上面調(diào)用的時候,傳遞的數(shù)據(jù)！】 console.log(x)this.num = x;},setinfo: function (str, event, color) { // 【既要獲得參數(shù)，又要獲得事件對象！】console.log(str)console.log(event)console.log(color)event.target.style.backgroundColor = color;event.target.innerHTML = str;}}}) </script></html>樣式處理操作（模板、事件、屬性綁定）
運行圖
?
關(guān)鍵技術(shù)點
代碼
<!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="變量/表達(dá)式/'字符串'" --><li v-for="(item,index) in list" v-bind:class=" item.iscom ? 'bg':'' ">序號：{{index+1}} ==>主題：{{item.title}}==>狀態(tài)：{{item.iscom ? "完成":"待完成"}}==>操作：<!-- change：修改這一組、這一條的數(shù)據(jù)。 --><button v-if="!item.iscom" @click="change(item)">完成</button><button @click="del(index)">刪除</button><hr></li></ul><h3 v-else>沒有數(shù)據(jù)了哦！</h3></div> </body> <script>new Vue({el: "#app",data: {list: [{ title: "晚上出去看電影", iscom: false }, // iscom表示完成情況{ title: "明天去游泳", iscom: false },{ title: "做完作業(yè)", iscom: true },{ title: "一起開黑！", iscom: false },]},methods: {change: function (val) { // val就是這一條數(shù)據(jù)val.iscom = true;},del(idx) { // 刪除的數(shù)據(jù)是數(shù)組里面的第幾條console.log(idx)// 數(shù)組.splice(開始的位置,刪除的個數(shù))this.list.splice(idx, 1)}}}) </script></html>樣式操作
?
<!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>// 樣式操作！// 操作標(biāo)簽的class// 操作標(biāo)簽的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}}})// 網(wǎng)頁制作的時候：// 行為、結(jié)構(gòu)、表現(xiàn)三者分離！// JS HTML CSS </script></html>Tab切換
Vue.js簡化代碼 --> 減少工作量
原生實現(xiàn)Tab切換
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>09、原生實現(xiàn)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">軍事的內(nèi)容</div><div class="box" style="display: none;">音樂的內(nèi)容</div><div class="box" style="display: none;">娛樂的內(nèi)容</div></div> </body> <script>// 原生實現(xiàn)！// 1、給標(biāo)題綁定事件var span = document.getElementsByTagName("span"); // 找到的是一個集合var box = document.getElementsByClassName("box");// 2、給每個都綁定一個點擊事件for (var index = 0; index < span.length; index++) {// 給每個span節(jié)點對象，添加一個 xuhao 的屬性 值為他所在的下標(biāo)span[index].xuhao = index; // 【重要！】span[index].onclick = function () {// 去掉所有標(biāo)題的激活class for (var idx = 0; idx < span.length; idx++) {span[idx].className = ""}// console.log(this) // this就是當(dāng)前點擊的這個span節(jié)點對象！this.className = "active" // 當(dāng)前這個激活！// 遍歷下面所有的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實現(xiàn)Tab切換
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>10、vue.js實現(xiàn)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">軍事的內(nèi)容</div><div class="box" v-if="curIndex==2">音樂的內(nèi)容</div><div class="box" v-if="curIndex==3">娛樂的內(nèi)容</div></div></div> </body> <script>new Vue({el: "#app",data: {curIndex: 1},methods: {tab(idx) {this.curIndex = idx;}}})</script></html>JavaScript中的this關(guān)鍵字
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>11、JavaScript中的this</title> </head><body> </body> <script>// 1、函數(shù)里面的this 【情況1】 windowfunction show() {console.log(this) // window }show();console.log(window.show == show)// 2、對象里面方法的this 【情況2】 當(dāng)前對象var person = {name: "張飛",age: 20,say: function () {console.log(this) // person}}person.say();// 3、對象里面的方法里面的函數(shù)里面的thisvar person2 = {name: "張飛",age: 20,say: function () {console.log(this) // person2function tt() {console.log(this) // window}tt();}}person2.say();// 4、函數(shù)里面的 對象里面的方法里面的thisfunction go() {console.log(this) // windowlet obj = {name: "李四啊",run: function () {console.log(this) // obj}}obj.run();}go()// 5、 es5定時器里面的this 是window。 // 6、節(jié)點對象的事件函數(shù)里面this 是當(dāng)前節(jié)點var body = document.getElementsByTagName("body");console.log(body)body[0].onclick = function () {console.log(this) // body節(jié)點！}// 7、構(gòu)造函數(shù)里面的this 指的是實例化出出來的對象！ 【3、構(gòu)造函數(shù)里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}// 函數(shù).apply(借用者) 函數(shù)里面的this就指向這個借用者！show.apply(p1) // p1這對象 調(diào)用 show方法。 那么show方法里面的this就是p1p1.cc.apply(p2) // p2這個對象 調(diào)用了p1對象的cc方法，所以cc方法里面的this指向p2 </script></html>多謝觀看~
總結(jié)
以上是生活随笔為你收集整理的Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue.js-Day01-AM【第一次学
- 下一篇： Vue.js-Day02-AM【Vue表