vue-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、计算属性

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

<div id="app">

<button @click="add">点击按钮+1</button>~~{{count}}~~{{countRes}}

</div>

<script>

const app = new Vue({

el: '#app',

data() {

return {

count: 0

}

},

methods: {

add() {

this.count++

}

},

computed: {

countRes() {

return this.count > 10 ? '大' : '小'

}

}

})

结果：

2、计算属性的赋值

通常，计算属性只用来取值，不会用来存值，因此计算属性默认提供的是取值方法，通常称之为get方法。计算属性也支持赋值，计算属性也可以通过赋值进行存数据操作，存数据的方法需要我们手动实现，通常称为set方法。

<div id="app">

<button @click="add">点击按钮+1</button>~~{{count}}~~{{countRes}}

</div>

<script>

const app = new Vue({

el: '#app',

data() {

return {

count: 0

}

},

methods: {

add() {

this.count++

}

},

computed: {

countRes: {

get() {

return this.count > 10 ? '大' : '小'

},

set(newVal) {

if (newVal == '大') {

this.count = 11

} else {

this.count = 0

}

}

}

}

})

app.countRes = '大'//11

app.countRes = '小'//0

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

<div class="app">

<input type="text" v-model="keyWords">

</div>

<script>

const app = new Vue({

el: '.app',

data() {

return {

keyWords: ''

}

},

watch: {

keyWords(oldVal, newVal) {

if (newVal.length > 10) {

alert('文本太长了！')

}

}

}

})

</script>

三、函数限流与防抖

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

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

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

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

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

1、手动实现节流函数

<div class="app">
        <button @click="getTime">点我</button>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    flag: true,
                }
            }, methods: {
                getTime() {
                    if (this.flag) {
                        console.log(getNowTime());
                        this.flag = false
                        setTimeout(() => {
                            this.flag = true
                        }, 2000)
                    }
                    function getNowTime() {
                        let Time = new Date()
                        let year = Time.getFullYear()
                        year = year > 10 ? year : '0' + year
                        let month = Time.getMonth() + 1
                        month = month > 10 ? month : '0' + month
                        let date = Time.getDate()
                        date = date > 10 ? date : '0' + date
                        let hours = Time.getHours()
                        hours = hours > 10 ? hours : '0' + hours
                        let minutes = Time.getMinutes()
                        minutes = minutes > 10 ? minutes : '0' + minutes
                        let seconds = Time.getSeconds()
                        seconds = seconds > 10 ? seconds : '0' + seconds
                        let week = Time.getDay()
                        let string = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                        week = string[week]
                        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds} ${week}`
                    }

                }
            },
        })
    </script>

结果：

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

<div class="app">
        <button @click="getTime">点我</button>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {}
            },
            methods: {
                getTime: _.throttle(function () {
                    console.log(this.timeFun())
                }, 2000),
                timeFun:
                    function getNowTime() {
                        let Time = new Date()
                        let year = Time.getFullYear()
                        year = year > 10 ? year : '0' + year
                        let month = Time.getMonth() + 1
                        month = month > 10 ? month : '0' + month
                        let date = Time.getDate()
                        date = date > 10 ? date : '0' + date
                        let hours = Time.getHours()
                        hours = hours > 10 ? hours : '0' + hours
                        let minutes = Time.getMinutes()
                        minutes = minutes > 10 ? minutes : '0' + minutes
                        let seconds = Time.getSeconds()
                        seconds = seconds > 10 ? seconds : '0' + seconds
                        let week = Time.getDay()
                        let string = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                        week = string[week]
                        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds} ${week}`
                    }
            },
        })
    </script>

3、手动实现防抖函数

<div class="app">
        <button @click="getTime">点我</button>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    flag: false,
                    timeOut: null
                }
            },
            methods: {
                getTime() {
                    clearTimeout(this.timeOut)
                    this.timeOut = setTimeout(() => {
                        this.flag = true
                        console.log(getNowTime());
                    }, 2000)
                    function getNowTime() {
                        let Time = new Date()
                        let year = Time.getFullYear()
                        year = year > 10 ? year : '0' + year
                        let month = Time.getMonth() + 1
                        month = month > 10 ? month : '0' + month
                        let date = Time.getDate()
                        date = date > 10 ? date : '0' + date
                        let hours = Time.getHours()
                        hours = hours > 10 ? hours : '0' + hours
                        let minutes = Time.getMinutes()
                        minutes = minutes > 10 ? minutes : '0' + minutes
                        let seconds = Time.getSeconds()
                        seconds = seconds > 10 ? seconds : '0' + seconds
                        let week = Time.getDay()
                        let string = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                        week = string[week]
                        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds} ${week}`
                    }
                },
            },
        })
    </script>

结果：

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

<div class="app">
        <button @click="getTime">点我</button>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    flag: false,
                    timeOut: null
                }
            },
            methods: {
                getTime: _.debounce(function () {
                    console.log(this.timeFun());
                }, 2000),
                timeFun:
                    function getNowTime() {
                        let Time = new Date()
                        let year = Time.getFullYear()
                        year = year > 10 ? year : '0' + year
                        let month = Time.getMonth() + 1
                        month = month > 10 ? month : '0' + month
                        let date = Time.getDate()
                        date = date > 10 ? date : '0' + date
                        let hours = Time.getHours()
                        hours = hours > 10 ? hours : '0' + hours
                        let minutes = Time.getMinutes()
                        minutes = minutes > 10 ? minutes : '0' + minutes
                        let seconds = Time.getSeconds()
                        seconds = seconds > 10 ? seconds : '0' + seconds
                        let week = Time.getDay()
                        let string = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                        week = string[week]
                        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds} ${week}`
                    }

            },
        })
    </script>

结果：

四、表单数据的双向绑定

1、文本输入框

<div class="app">

<input type="text" v-model="value">

</div>

<script>

const app = new Vue({

el: '.app',

data() {

return {

value: ''

}

},

})

</script>

2、多行文本输入框

<div class="app">

<textarea name="" id="" cols="30" rows="10" v-model="value"></textarea>

</div>

<script>

const app = new Vue({

el: '.app',

data() {

return {

value: ''

}

},

})

</script>

3、复选框和单选框

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

<div class="app">

<input type="checkbox" v-model="value">

</div>

<script>

const app = new Vue({

el: '.app',

data() {

return {

value: true

}

},

})

</script>

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

<div class="app">
        <input type="checkbox" value="basketball" v-model="checkboxList">{{checkboxList[0]}}
        <input type="checkbox" value="football" v-model="checkboxList">{{checkboxList[1]}}
        <input type="checkbox" value="badminton" v-model="checkboxList">{{checkboxList[2]}}
        <input type="checkbox" value="tennis" v-model="checkboxList">{{checkboxList[3]}}
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    checkboxList: []
                }
            },
        })
    </script>

结果：

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

<div class="app">
        <input type="radio" value="男" v-model="sex">
        <input type="radio" value="女" v-model="sex">
        {{sex}}
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    sex: ''
                }
            }
        })
    </script>

结果：

4、选择列表

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

<div class="app">
        <select multiple v-model="selectList">
            <option value="basketball">basketball</option>
            <option value="football">football</option>
            <option value="badminton">badminton</option>
            <option value="tennis">tennis</option>
        </select>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    selectList: []
                }
            }
        })
    </script>

结果：

5、两个常用的修饰符

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

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

五、样式绑定

1、为HTML标签绑定Class属性

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

<style>
        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
    <div class="app">
        <div class="box" :class="{blue:isBlue,red:isRed}"></div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    isBlue: true,
                    isRed: false,
                }
            }
        })
    </script>

结果：

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

<style>
        .red {
            color: red;
        }

        .fs {
            font-size: 20px;
        }
    </style>
    <div class="app">
        <h2 :class="[redClass,fsClass]">hello</h2>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    redClass: "red",
                    fsClass: "fs"
                }
            }
        })
    </script>

结果：

2、绑定内联样式

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

<div class="app">
        <div class="box" :style="{width:width,height:height,backgroundColor:backgroundColor}"></div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    width: "200px",
                    height: '200px',
                    backgroundColor: 'pink'
                }
            }
        })
    </script>

结果：

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

<style>
        .app {
            width: 25%;
            height: 800px;
            margin: auto;
            margin-top: 20px;
        }

        .app .title {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .app .title .title-info {
            font-size: 12px;
        }

        .app .title .title-title {
            margin-top: 20px;
            font-size: 40px;
        }

        .fs {
            font-size: 15px;
        }

        input {
            width: 250px;
            height: 25px;
            border-radius: 5px;
            background-color: #ccc;
            color: #fff;
        }

        .app .preferences {
            display: flex;
            flex-direction: column;
        }

        .app .preferences .preferences-box {
            display: flex;
        }

        .app .preferences .preferences-radio input {
            width: 15px;
            height: 15px;
        }

        .app .password .password-message {
            font-size: 12px;
            color: #ccc;
        }

        .app .subBtn button {
            width: 250px;
            height: 25px;
            border-radius: 10px;
            background-color: #fff;
        }

        .mt {
            margin-top: 20px;
        }

        .text {
            font-size: 12px;
            color: red;
        }
    </style>

    <div class="app">
        <div class="title">
            <div class="title-info">加入我们，一起创造美好世界</div>
            <div class="title-title">创建你的账号</div>
        </div>
        <div class="user mt">
            <div class="user-info fs">用户名：</div>
            <div class="user-input iptcom">
                <input type="text" v-model="user">
                <div class="text">{{userCom}}</div>
            </div>

        </div>
        <div class="email mt">
            <div class="email-info fs">邮箱地址</div>
            <div class="email-input iptcom">
                <input type="text" v-model="email">
            </div>
            <div class="text">{{emailCom}}</div>
        </div>
        <div class="password mt">
            <div class="password-info fs">密码</div>
            <div class="password-input">
                <input type="text" v-model="password">
            </div>
            <div class="text">{{passwordCom}}</div>
            <div class="password-message fs">
            </div>
        </div>
        <div class="preferences mt">
            <div class="preferences-title fs">
                偏好设置
            </div>
            <div class="preferences-box">
                <div class="preferences-radio">
                    <input type="checkbox" name="" id="" :checked="radioStatus" v-model="radioStatus">
                </div>
                <div class="preferences-text fs">
                    接受更新邮件
                </div>
            </div>
        </div>
        <div class="subBtn mt">
            <button @click="submit">创建账号</button>
            <div class="text"></div>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    user: '',
                    password: '',
                    email: '',
                    radioStatus: false,
                }
            },
            computed: {
                userCom() {
                    if (this.user.length < 5 || this.user.length > 13) {
                        return '用户名必需是5到12个字符！'
                    }
                },
                emailCom() {
                    var patt = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/g
                    if (!patt.test(this.email)) {
                        return '请输入正确的邮箱格式'
                    }
                },
                passwordCom() {
                    if (this.password.length < 6) {
                        return '密码不能少于六位'
                    }
                },
            },
            methods: {
                submit() {
                    if (this.userCom == undefined && this.emailCom == undefined && this.passwordCom == undefined && this.radioStatus == true) {
                        alert('提交信息成功')
                    } else {
                        alert('提交信息失败')
                    }
                }
            },
        })
    </script>

结果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...