1 计算属性
<template>
<h3>计算属性</h3>
<p>{{ countNames1 }}</p>
<p>{{ countNames2() }}</p>
</template>
<script>
export default {
data(){
return{
names1: ["zhang", "wang", "li"],
names2: ["yuan", "ming", "qing"]
}
},
computed:{
countNames1(){
return this.names1.length > 0 ? "yes" : "no"
}
},
methods:{
countNames2(){
return this.names2.length > 0 ? "yes" : "no"
}
}
}
</script>
在上面代码中,使用computed和methods都能实现想要的功能,但是两者仍有一些区别:
计算属性---会基于其响应式依赖被缓存,仅在其响应式依赖更新时才会重新计算。
方法---调用总是会在重新渲染发生时再次被执行函数。
直观的理解就是,计算属性在多次调用时只计算一次,方法在每次调用时都要计算一次。
2 Class绑定
对象语法
<template>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
};
}
};
</script>
数组语法
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
};
}
};
</script>
对象数组混合使用
<template>
<div :class="[{ active: isActive }, errorClass]"></div>
</template>
<script>
export default {
data() {
return {
isActive: true,
errorClass: 'text-danger'
};
}
};
</script>
3 Style绑定
<template>
<h3>Style绑定</h3>
<p v-bind:style="{color:activeColor, fontSize:fontsize + 'px'}">哈哈哈1</p>
<p v-bind:style="style1">哈哈哈2</p>
</template>
<script>
export default {
data(){
return{
activeColor:"red",
fontsize:30,
style1:{
color:"green",
fontSize:"30px"
}
}
}
}
</script>
4 侦听器
当响应式数据发生变化时,如果想监听发生了怎样的变化,或者执行某个操作,就可以通过watch来实现,注意函数名必须和要监听的数据名相同:
<template>
<h3>侦听器</h3>
<p>{{ message }}</p>
<button @click="updateMessage">改变message</button>
</template>
<script>
export default {
data(){
return{
message: "i want fuck you"
}
},
methods:{
updateMessage(){
this.message = "oh ye"
}
},
watch:{
// 侦听器,当数据发生变法是执行
// 函数名必须和变量名一致,
message(newValue, oldValue){
console.log("Message发生了变化")
console.log(newValue, oldValue)
}
}
}
</script>
5 表单输入绑定
<template>
<h3>表单输入绑定</h3>
<form>
<input type="text" v-model="message">
<p>{{ message }}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</form>
</template>
<script>
export default {
data(){
return{
message: "",
checked: false
}
}
}
</script>
上面代码中,<input type="text" v-model="message">实现了实时获取用户输入,但是有些场景并不需要这样的需求,所以就需要v-model的一些修饰符:<input type="text" v-model.lazy="message">,加上修饰符.lazy后,只有当失去光标的时候,才会获取用户输入的内容。其他修饰符,如.number:只接受数字,.trim:去掉前后空格。
6 模板引用(获取DOM)
<template>
<h3>模板应用DOM</h3>
<input type="text" ref="username">
<button @click="getDomHandle">通过获取DOM获取用户输入</button>
</template>
<script>
export default {
data(){
return{
content: "qwer"
}
},
methods:{
getDomHandle(){
console.log(this.$refs.username.value)
}
}
}
</script>
一般情况下,不通过这种方式去获取元素,比较消耗性能。