vue_03_计数器案列

一、较简单的一种1、代码使用点击事件 v-on:click指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0...

Abdullahi_kanye

348人浏览 · 2019-11-10 22:56:39

Abdullahi_kanye · 2019-11-10 22:56:39 发布

一、较简单的一种

1、代码

使用点击事件 v-on:click指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 准备一个div标签，并将此挂载到vue实例中去 -->
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <!-- 定义加和减两个按钮 
        v-on：click 表示监听一个click点击事件。然后执行对应的方法或者一个函数。这里就是拿到变量counter进行++和--的响应式操作
        -->
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button>
    </div>
    <!-- 先引入vuejs文件 -->
    <script src="../js/vue.js"></script>
    <script>
        //创建一个new实例
        const app=new Vue({
            el:'#app', //通过id来挂载上div标签
            data:{
                // 定义一个变量
                counter:0
            }
        })
    </script>
</body>
</html>

2、展示效果图

在这里插入图片描述

3、直观代码截图

在这里插入图片描述

二、较高深的一种方式

使用vue实例中的methods属性，可以在其中定义很多方法

1、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 准备一个div标签，并将此挂载到vue实例中去 -->
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <!-- 定义加和减两个按钮 
        v-on：click 表示监听一个click点击事件。然后执行对应的方法或者一个函数。这里就是拿到变量counter进行++和--的响应式操作
        -->
        <!-- 第一种方式：较直观  
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button> 
         -->

         <!-- 新的指令@click，也就是v-on:click，用于监听某个元素的点击事件，当发生点击时执行方法（通常是methods属性中定义的方法） -->
         <!-- v-on:click的语法糖（简写）就是@click -->
         <button v-on:click="add">+</button>
         <button @click="subtraction">-</button>
    </div>
    <!-- 先引入vuejs文件 -->
    <script src="../js/vue.js"></script>
    <script>
        //创建一个new实例。可以定义el/data/methods，当然还有很多，之后会一一解开
        const app=new Vue({
            el:'#app', //通过id来挂载上div标签
            data:{
                // 定义一个变量
                counter:0
            },
            //新的属性methods，改属性用于在vue中定义方法
            methods:{//在vue实例中定义个methods对象，可以在里面定义很多的函数
                add:function(){//定义一个add的函数类型：按钮的增加操作
                    console.log('执行add增加操作');
                    this.counter++ //this指当前对象(想用methods外的变量，就用当前this.变量)；
                                   //然后拿到当前vue对象中的counter变量进行操作
                },
                subtraction:function(){//再定义一个subtraction函数：按钮的减少操作
                    console.log('执行subtraction减少操作');
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>

2、前台展示图

跟上面第一种方法是一样的
在这里插入图片描述

3、直观代码截图

在这里插入图片描述

三、关于vue实例中的data属性

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^