Vue 計數器

首先.我們先導入vue插件:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 然后建立一個<div>

    <div id="app">
        <button>-</button>
        <span></span>
        <button>+</button>
    </div>

然后我們在<script>中綁定到這個id='app'的div,在data中聲明一個num,值為1;

 var vm = new Vue({
        el:"#app",
        data:{
            num:1
        }
    })

然后我們在<span>{{num}}</span>這樣,運行就會顯示出

的效果圖了.    {{定義的值}} ===  v-text="定義的值",簡單的說 兩個大括號{{}}就是v-text指令的簡寫;

現在效果已經顯示出來了.但是"-" 和"+"兩個按鈕並沒什么用,我們寫兩個方法在<script>中

 var vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
       methods:{ jian :function () { if(this.num>0){ this.num--; }else{ alert('最小了') } }, jia :function(){ if(this.num<10){ this.num++; }else{ alert('最大了') } } }
    })

上圖中標紅的字體就是我們新加的方法,方法名,我就用拼音來寫了.在方法中寫邏輯,最小值為0.最大值為10

寫完方法之后,要去調用,

 <div id="app">
        <button @click='jian'>-</button>
        <span>{{num}}</span>
        <button @click="jia">+</button>
    </div>

如上圖所示我們給這兩個按鈕加上對應的方法.  @click= v-on:click;

 到這里就寫好了,額.僅為自己留念.如偶然看到,請諒解,勿噴