computed 计算
1.computed 基于依赖的缓存
2.computed 用get,set可以赋值
3.computed 不能使用异步
computed 获取值
<script src="../vue.js"></script>
</head>
<body>
<div id="box">
<!-- computed -->
<p>{{getDate}}</p>
<p>{{getDate}}</p>
<!-- method -->
<p>{{getDateM()}}</p>
<p>{{getDateM()}}</p>
</div>
<script>
var obj={
data(){
return{
year:2023,
month:11,
date:15
}
},
computed:{
getDate(){
console.log(`computed:${this.year}-${this.month}-${this.date}`);
return `${this.year}-${this.month}-${this.date}`
}
},
methods:{
getDateM(){
console.log(`methods:${this.year}-${this.month}-${this.date}`);
return `${this.year}-${this.month}-${this.date}`
}
}
}
var app=Vue.createApp(obj).mount('#box')
</script>
get& set
<script src="../vue.js"></script>
</head>
<body>
<div id="box">
{{getDate}}
</div>
<script>
var obj={
data(){
return{
year:2023,
month:11,
date:15
}
},
computed:{
getDate:{
get(){
return `${this.year}-${this.month}-${this.date}`
},
set(val){
return [this.year,this.month,this.date]=val.split('-')
}
}
}
}
var app=Vue.createApp(obj).mount('#box')
</script>
watch 监听
1.可以使用异步或同步
2.监听哪个,就写个同名方法放在watch中
3.监听一个状态,计算属性监听多个状态
4,不会立即执行,除非加上 immediate:true
<div id="box">
<select v-model="obj.year">
<option :value="2023">2023</option>
<option :value="2022">2022</option>
<option :value="2018">2018</option>
</select>
<select v-model="obj.month">
<option :value="11">11</option>
<option :value="8">8</option>
<option :value="6">6</option>
</select>
<select v-model="obj.date">
<option :value="30">30</option>
<option :value="15">15</option>
<option :value="14">14</option>
</select>
</div>
<script>
var obj={
data(){
return{
obj:{
year:2023,
month:11,
date:15
}
}
},
watch:{
"obj.year":'asyfunc',
"obj.month":'asyfunc',
"obj.date":'asyfunc'
},
methods:{
asyfunc(value,oldvalue){
console.log(value);
}
}
}
var app=Vue.createApp(obj).mount('#box')
<div id="box">
<input type="text" v-model="msg" />
<ul>
<template v-for="item in dataList">
<li>{{item}}</li>
</template>
</ul>
</div>
<script>
var obj = {
data() {
return {
msg: "",
dataList: ["aa", "bb", "cc", "dd", "fa", "gh"],
checkList: ["aa", "bb", "cc", "dd", "fa", "gh"],
};
},
watch: {
msg() {
setTimeout(() => {
this.dataList=this.checkList.filter(item=>item.includes(this.msg))
}, 1000);
},
},
};
var app = Vue.createApp(obj).mount("#box");
</script>
vue中fetch
组件定义
.component 全局组件
components 局部定义组件
当前cdn中computed的缺点:
1.template没有高亮提示
2.css行内样式
3.局部定义 ,套娃
<div id="box">
<vue-aside></vue-aside>
<vue-article></vue-article>
</div>
<script>
var app=Vue.createApp()
app.component("vue-aside",{
template:`
<div>1111</div>
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
<div>{{handleBtn()}}</div>
<vue-child></vue-child>
`,
data(){
return{
dataList:['11','22','33']
}
},
methods:{
handleBtn(){
return 'aaa'
}
}
})
app.component("vue-article",{
template:`
<div>22222</div>
`
})
app.component("vue-child",{
template:`
<p style="color:red;">子组件</p>
`
})
app.mount('#box')
/*
缺点:
template不会提示,
css样式是行内式
*/
</script>
解决上述问题: 单文件组件
<style scoped></style> 局部
<style lang=scss></style> 全局
过滤
<div id="box">
{{handelFilter(date)}}
</div>
<script>
var obj = {
data() {
return {
date:1679458576574
};
},
methods:{
handelFilter(date){
var data=new Date(date)
return data.getFullYear()+'-'+data.getMonth()+1
}
}
}
var app=Vue.createApp(obj).mount('#box')
