SOURCE

console 命令行工具 X clear

                    
>
console
 var app= new Vue({
        el:"#app",
        data:{
            message:" ",
            counter:0,
            counter1:0
       
        },
        watch:{

        },
        
        computed:{
            output:function(){
                console.log("computed");
                return this.counter>10?"大于10":"小于10";
            }
        },

        methods:{
            alertMe:function(){
                alert("Pressed");
            },

            showResult:function(){
                console.log("result");
                return this.counter>10?"大于10":"小于10";
            }

            // increase:function(){
            //     this.counter++;
            //     this.result=this.counter>10?"大于10":"小于10";

            // },
            //  decrease:function(){
            //      this.counter--;
            //     this.result=this.counter>10?"大于10":"小于10";
            //  }

        
            }

            
        
    })
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <!-- v-model 得到用户输入的data -->
    <input type="text" v-model="message" placeholder="输入的东西会显示在下方"/>
    <p>{{message}}</p>

   <!-- keyup触发alert -->
    <p>
        keyup:<input type="text" v-on:keyup="alertMe">
    </p>

    <!-- keyup触发alert, 加上.enter限制 -->
        <p>
        keyup.enter:<input type="text" v-on:keyup.enter="alertMe">
    </p>

     <!-- keyup触发alert, 加上.enter和.space, 按下其中一个都会弹出来 -->
        <p>
        keyup.enter.sapce:<input type="text" v-on:keyup.enter="alertMe">
    </p>

    <!-- 用表达式代替写方法的位置 -->
    <button @click="counter++">加1</button>
    {{counter}}-----{{counter>10?"大于10":"小于10"}}

    <br><!-- 用方法return 大于10, 小于10 -->
    <!-- <button @click="increase()">加1</button>
    <button @click="decrease()">减1</button> -->
    <!-- {{counter}}----{{result}} -->

    <br>
    <!-- 结合表达式和方法return 大于10, 小于10 -->
    <button @click="counter++">加1</button>
    <button @click="counter--">减1</button> 
    <!-- counter1虽然没有用到showResult方法,可是点击counter1的时候仍然会把所有方法运行一遍 -->
    <button @click="counter1++">counter1加1</button> 
    {{counter1}}
    <!-- output作为一个计算属性 -->
    {{counter}}----{{showResult()}}---{{output}}
</div>
.left{
    float: left;
    
}
.right{
    float: left;
    
}