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;

 到这里就写好了,额.仅为自己留念.如偶然看到,请谅解,勿喷