1. el
挂载点,用于挂载要管理的数据
2.data
定义数据
3.methods
定义vue对象中的一些方法
上面的三项是最基本的选项,有了他们就能有如下结构,一定要注意各个选项之间要用逗号隔开。
<div id='app> {
{
msg }} </div>
<script>
el:{
"#app",
},
data:{
msg : 'hello'//定义一些属性
},
methods:{
click(){
console.log('click...');
}
}
</script>
4.computed
计算属性
使用计算属性,通过一系列运算后得到新的值,用法和
methods
类似,但是有所不同,当计算属性返回的值发生变化时才重新运算,如果返回的值没有变化,会使用缓存,比methods
性能高。
<template>
<div>
{
{
parseDate}}
</div>
</template>
<script>
export default {
data() {
return {
date: '2020-11-05'
}
},
computed:{
parseDate(){
let arry = this.date.split('-')
return `${
arry[0]}年${
arry[1]}月${
arry[2]}日`
}
}
}
</script>
5.watch
监听器
<template>
<div>
{
{
num}}
<button @click="num++">+</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
watch: {
//监听哪个属性就写哪个属性
//第一个参数是变化后的新值,第一个参数是变化前的值
num(newNum,oldNum){
console.log(newNum,oldNum)
}
}
}
</script>
如果要监听的属性是一个对象的话,要使用深度监听,代码如下:
<template>
<div>
{
{
obj.num}}
<button @click="obj.num++">+</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
num: 0
}
}
},
watch: {
//监听哪个属性就写哪个属性
obj:{
handler(o1){
console.log(o1)
},
deep: true
}
}
}
</script>
6.filter
过滤器
<template>
<div>
{
{
date | dateFilter1 | dateFilter2}}
</div>
</template>
<script>
export default {
data() {
return {
date: '2020-11-05'
}
},
watch:{
date(str){
//此处没有执行,证明过滤器对原始数据没有做修改
console.log(str)
}
},
filters: {
dateFilter1(date){
let arry = date.split('-')
return arry
},
dateFilter2(arry){
return arry.toString()
}
}
}
</script>