vue-vue组件的属性和方法
vue组件的属性和方法
目录
3、属性侦听属性侦听可以方便地监听某个属性的变化,已完成复杂的业务逻辑。
一、属性与方法
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、计算属性
计算属性并不是用来存储数据的,而是通过一些计算逻辑来实时地维护当前属性的值。
<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"><!-- 在此插入text会报错{{text}} --></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>
结果:
更多推荐
所有评论(0)