06-基础-系统指令-v-model-语法糖原理

最新推荐文章于 2024-02-19 08:15:00 发布

weixin_30621959

最新推荐文章于 2024-02-19 08:15:00 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/divtab/p/10940240.html

版权

<!DOCTYPE html>
<html>

<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 id='app'>
        {{msg}}
        <br>
        <input type="text" v-model="msg">

        <!-- v-model原理->
        需求-> 使用vue学过的知识实现v-model的效果(假设没有v-model)
        1. 学过哪些知识->复习
        2. v-model效果
        2.1 运行文件->value的值就是msg的初始值
        2.2 当进行UI操作(输入新值)->value变化->msg=最新的value
        > 补充: js有事件->当input值变化时 触发 
        @input事件
        @onchange事件 -->
        <!--  v-model是vue提供的简化写法->语法糖  -->

        {{msg}}
        <br>
        <input type="text" :value="msg" @input="msg=$event.target.value">
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "abc"
            },
            methods: {
                fn(e) {
                    // console.log(e);
                    // msg=最新的value
                    // 给msg赋值->修改msg->获取msg->js代码获取data中msg->this.msg
                    // 最新的value-> 获取input标签->获取当前事件->获取事件对象e
                    console.log(this);
                    this.msg = e.target.value;
                }
            }
        });
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/divtab/p/10940240.html

weixin_30621959

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-基础-系统指令-v-model-语法糖原理

<!DOCTYPE html><html><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width,initial-scale=1.0'> <meta http-equiv='X-UA-Compatib...
复制链接

扫一扫