通过案例入门Vue(一) v-model 和方法绑定

Lockie89

已于 2022-11-09 15:00:55 修改

阅读量2.2k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-11-09 14:59:49 首次发布

本文链接：https://blog.csdn.net/Lockie89/article/details/127769510

版权

本章我们通过两个案例来入门Vue. 案例一中通过v-model实现双向绑定, 案例二中学习方法的绑定.

Vue的依赖导入

依赖在<head>中进行导入.

<!-- 导入依赖大集合, 以下是本地文件添加依赖-->
<!--    导入bootstrap 依赖-->
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--    导入vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

Vue的模板

    <script>
        //新建一个vue对象
        new Vue({
            el:'#app',  //将id='app'的div的管理权交给Vue
            data:{  //需要绑定的数据	声明属性

            },
            methods:{   //所有声明的函数都放在methods中

            },
            created:function () {   //页面加载完成后执行(声明周期函数)

            }
        });
    </script>

案例一:v-model双向绑定

需求: 文本框可以输入的同时显示输入的内容在旁边. 如下图所示:

思路: 页面input一个文本框, 再使用一个段落p来输出内容. 但问题是如何实现文本框输入数据的传输, 以及段落p如何承接数据呢?

使用Vue框架, 就能够实现data属性的传递.

使用v-model来实现文本框数据与我们自定义的属性"msg"之间的绑定;

使用插值表达式{{msg}}就能实现将msg打印出来, 而不是"msg"的打印.

<head>
    <!--导入vue -->
    <script src="...vue.min-v2.5.16.js">
    </script>
</head>
<div id="app">
    <input type ="text" v-model="msg"/>
    <p>{{msg}}</p>	<!--插值表达式, 注意上方v-model的V为小写 -->
</div>
<!-- 主功能实现, 使用div进行环绕, 因为vue只能管理div, 所以需要一个div容器-->
<script>
	//创建vue实例
    new Vue({
        el:'#app',	//将id为app的div的管理权交给vue
        data:{	//用户共享的数据
            msg:null
        }
    });
</script>

使用vue , 需要有容器(代码中设置id="app"的那个div),div好一点 .

案例二: 方法的绑定

需求, 如下图所示, 水平线下方显示输入的账号和密码, 如果账号=admin, 密码=123, 则登录成功, 否则弹窗提醒登录失败;

思路: 用户名和密码的输出和案例一相同.

但如何为按钮添加事件, 绑定方法, 来实现"登录"功能呢?

在button中添加@click="" 属性, 能够为button添加事件click事件, 同时=""实现了方法的绑定.在script中实现方法的功能, 即判读登录的内容.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <h1>用户登录</h1>
    <div id="a">
        用户名:<input type="text" / v-model="msg"><br>
        密码:<input type = "password" / v-model="msg2"><br>
        <button @click="doLogin()">登录</button>		<!--为按钮添加事件, 不传参数的情况下函数的()可以省去-->
        <hr>
       用户名:{{msg}}&nbsp;密码:{{msg2}}
    </div>
    <script>
        new Vue({		//注意Vue的V要大写
            el:'#a',
            data:{	//声明属性
                msg:null,
                msg2:null
            },
            methods:{//要绑定的函数
                //声明函数
                doLogin(){
                    if(this.msg == 'admin' && this.msg2 =='123'){
                        document.write('登陆成功!');
                    }else{
                        alert('登录失败!');
                    }
                }
            }
        });
    </script>

</body>
</html>

知识点:
1. button 添加事件, 在vue 中使用"@click="方法()" ;
2. vue中函数的声明: 在vue对象中声明函数的方法, 是通过methods{}, 而上个案例中使用的data:{}是绑定数据. 其中msg是自定义名称.

易错点:
   1.   new Vue(); 中的V是大写, 小写则失效;
   2. script 不能写在div里面;
  3. el:'#' 中的#号容易忘记;