vue-vue组件的属性和方法

目录

一、属性与方法 

1、属性和方法基础

二、计算属性和侦听器

1、计算属性

2、计算属性的赋值

3、属性侦听属性侦听可以方便地监听某个属性的变化，已完成复杂的业务逻辑。

三、函数限流与防抖

1、手动实现节流函数

2、使用lodash库进行函数限流。

3、手动实现防抖函数

 4、使用lodash库进行函数防抖

四、表单数据的双向绑定 

1、文本输入框

2、多行文本输入框

3、复选框和单选框

4、选择列表

5、两个常用的修饰符

五、样式绑定

 1、为HTML标签绑定Class属性

2、绑定内联样式

 六、范例：实现一个功能完整的用户注册页面

---

一、属性与方法 

1、属性和方法基础

在vue组件中定义的属性数据和方法应该怎么调用呢？

可以直接使用组件来调用组件中的属性数据和方法。

const app = new Vue({

data() {

return {

count: 0

}

},

methods: {

add() {

this.count++

}

}

})

console.log(app.$data.count === app.count);//true

console.log(app.add);//f add(){}

二、计算属性和侦听器

1、计算属性

计算属性并不是用来存储数据的，而是通过一些计算逻辑来实时地维护当前属性的值。

点击按钮+1~~{{count}}~~{{countRes}}

三、函数限流与防抖

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

功能：页面中有一个按钮，单击按钮后通过打印方法在控制台输出当前时间，要求这个按钮的两次事件触发间隔不能小于2秒。

使用ludash库需要导入如下链接：

1、手动实现节流函数

        点我
    
    

结果：

2、使用lodash库进行函数限流。

        点我
    
    

3、手动实现防抖函数

        点我
    
    

结果：

 

 4、使用lodash库进行函数防抖

        点我
    
    

结果：

四、表单数据的双向绑定 

1、文本输入框

2、多行文本输入框

<!-- 在此插入text会报错{{text}} -->

3、复选框和单选框

如果只有一个复选框，在使用v-model指令进行数据绑定时，可以直接将其绑定为布尔值。

如果复选框成组出现时，通过数组属性的绑定来获取每个复选框是否被选中。

        {{checkboxList[0]}}
        {{checkboxList[1]}}
        {{checkboxList[2]}}
        {{checkboxList[3]}}
    
    

 结果：

 同一组中的某个单选框被选中时，对应的其绑定的变量的值也会替换为当前选中的单选框的值。

        
        
        {{sex}}
    
    

 结果：

4、选择列表

选择列表能给用户一组选项进行选择，可以支持单选，也可以支持多选。

        
            basketball
            football
            badminton
            tennis
        
    
    

 结果：

5、两个常用的修饰符

lazy修饰符的作用类似于属性的懒加载，用户输入完成，输入框失去焦点后，value才会同步到data中。

trim修饰符的作用就是将绑定的文本数据的首尾空格去掉。

五、样式绑定

 1、为HTML标签绑定Class属性

v-bind指令虽然可以直接对class属性进行数据绑定，但如果将绑定的值设置为一个对象，设置的对象中可以指定对应的class样式是否被选用。

结果：

 

Vue还支持使用数组对象来控制class属性：

    

        
hello
    
    

 结果：

2、绑定内联样式

内联样式是指直接通过HTML元素的style属性来设置样式，style属性可以直接通过JavaScript对象来设置样式，我们可以直接在其内部设置vue属性。

结果：

 

 六、范例：实现一个功能完整的用户注册页面

    

        

            
加入我们，一起创造美好世界
            
创建你的账号
        
        

            
用户名：
            

                
                
{{userCom}}
            

        
        

            
邮箱地址
            

                
            
            
{{emailCom}}
        
        

            
密码
            

                
            
            
{{passwordCom}}
            

            
        
        

            

                偏好设置
            
            

                

                    
                
                

                    接受更新邮件
                
            
        
        

            创建账号
            

        
    

    

结果：

​​​​​​​