vue进阶-笔记

1.绑定事件指令 v-on(掌握)

<button v-on:click="num++">点击1</button>
<button @click="num++">点击2</button>
<button @click="countSum()">点击3</button>
<button @click="countSum">点击4</button>

<button @click="say('今天天气好冷了')">点击5</button>

<script>
    new Vue({
    
        el:"#app",
        data:{
    
            num:0
        },
        methods:{
    
            countSum(){
    
                this.num = this.num + 1
            },
            say(msg){
    
                console.log(msg);
            }
        }
    })
</script>

2 计算属性(掌握)

作用:可以代替的复杂的表达式

比如下面:

<div id="app">
    {
  {new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}
    {
  {birth1}}
    {
  {getBirth1()}}
</div>
<script>
    new Vue({
    
        el:"#app",
        data:{
    
            num:0,
            birthday:1529032123201
        },
        methods:{
    
            getBirth1(){
    
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        },
        computed:{
    
            //计算属性
            birth1(){
    
              return  new Date(this.birthday).getFullYear() +"年"+