Vue基础选项

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>