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"】，

• 但标签中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、代码

运行截图

代码

    
    
    
    



    

        {{num}}
        
        点击一下！

        


        


        将num设为10
        将num设为20
        将num设为40

        

        

    

样式处理操作（模板、事件、属性绑定）

运行图

 

关键技术点

代码

    
    
    
    



    

        

            
            

                序号：{{index+1}} ==>
                主题：{{item.title}}==>
                状态：{{item.iscom ? "完成":"待完成"}}==>
                操作：
                
                完成
                删除
                

            
        
        
没有数据了哦！
    

样式操作

1. 操作 标签的class
2. 操作 标签的style

 

Tab切换

Vue.js简化代码 --> 减少工作量

原生实现Tab切换

    
    
    



    

        军事
        音乐
        娱乐
    
    

        
军事的内容
        
音乐的内容
        
娱乐的内容
    

Vue.js实现Tab切换

    
    
    
    



    

        

            军事
            音乐
            娱乐
        
        

            
军事的内容
            
音乐的内容
            
娱乐的内容
        
    

JavaScript中的this关键字

多谢观看~