Vue名字案例————温开水的复习笔记

咕噜一口温开水

已于 2022-02-05 18:16:28 修改

阅读量220

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-02-03 13:44:28 首次发布

本文链接：https://blog.csdn.net/qq_47286790/article/details/122774534

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

题目

在两个输入框中输入文字就在下面的全名栏中实时显示，有间隔符，要符合实际应用需求

方法一、原生JavaScript（无思想）

需求：两个框中的文字会被实时获取并展现在全名栏中。也就是两个框中的值会在全名栏中显示。

方法：获取input节点对象，绑定键盘事件

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件总结</title>
</head>
<body>
    <!-- 准备容器 -->
    <div>
        性: <input type="text" id="firstName"><br><br>
        名: <input type="text" id="lastName"><br><br>
        全名: <p id="fullName1"></p>-<p id="fullName2"></p>
    </div>
    <script>
        let firstName = document.querySelector('#firstName');
        let lastName = document.querySelector('#lastName');
        let fullName = document.querySelector('#fullName');
        firstName.addEventListener('keyup',function(){
            fullName1.innerHTML = this.value;
        })
        lastName.addEventListener('keyup',function(){
            fullName2.innerHTML = this.value;
        })
    </script>
</body>
</html>

评价：

感觉像屎一样，逻辑虽然好理解，但是有这些问题。

①万一input中输入的数据要保存到服务器，那么要请求多少次呢，很多很多，只要按一次键盘就请求一次。

②不能保存最后一次输入的数据，仅仅只是展示而已。

③......

方法二、原生JavaScript（有思想）

需求：有一个“数据库”（简单点就是一个保存数据的对象），input输入和获取数据，全名栏获取数据。

思想：借鉴MVVM，View就是全名栏和input框，Model就是数据，ViewModel就是用于输入和获取数据的方法。

方法三、Vue框架

需求：接着方法二来分析，有一个“数据库”（简单点就是一个保存数据的对象）就是Vue中的_data对象，input输入和获取数据就是数据双向绑定，全名栏获取数据就是模板语法-插值语法。

方法：Vue实例，v-model：，{{xxx}}

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id="root">
        姓: <input type="text" v-model:value="firstName"><br/><br/>
        名: <input type="text" v-model:value="lastName"><br/><br/>
        全名: <span>{{firstName}}-{{lastName}}</span>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            }
        })
    </script>
</body>
</html>

评价：很不错，调用接口很爽，但还是要去思考一下原理滴。

方法四、Vue框架——改进

注意：

（1）模板里调用函数 fullName 和 fullName() 区别

（2）Vue实例data中的数据任何一个发生变化，模板会重新解析，这也回答了之前模板语法中留下的一个问题，那就是为什么模板语法可以实时显示数据，数据变化对应的插值也发生变化。

（3）使用methods来封装拼接字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id="root">
        姓: <input type="text" v-model:value="firstName"><br/><br/>
        名: <input type="text" v-model:value="lastName"><br/><br/>
        全名: <span>{{fullName()}}</span>
        <!-- 写fullName有问题哦 -->
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            },
            methods:{
                fullName(){
                    return this.firstName +'-'+ this.lastName;  //要写this
                }
            }
        })
    </script>
</body>
</html>

方法五、Vue框架——计算属性

计算属性：那已有的配置属性（配置项）中数据通过加工计算来制造一个新的属性（配置项）

如果我来理解的话，会这么解释。Vue中有默认存在的配置项（配置属性），我们可以通过Vue允许的方法来计算出新的配置项。因为有可能计算比较复杂，所以Vue要求新的配置项写成对象（必须这样写）。

注意细节

①定义：要用的属性不存在，要通过已有属性计算得来。
②原理：底层借助了objcet.defineproperty方法提供的getter和setter.
③ get函数什么时候执行?
（1）初次读取时会执行一次。
（2）当依赖的数据发生改变时会被再次调用。
④优势：与methods实现相比，computed内部有缓存机制(复用)，调用少，效率更高，调试方便。
⑤备注
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。

⑥细节

（1）this被设计好了指向Vue实例vm

（2）vm中的数据发生变化。Vue重新解析模板，写了模板语法的地方也就重新读取了（模板语法的那个特性，忘了专业名词了）；对应数据的set或get函数也被调用（计算属性、数据代理、数据双向绑定）；

（3）计算属性读取缓存

数据代理和计算属性

Vue配置项data完成了vm对象对_data对象的数据代理，而配置项computed完成了vm新属性对象对vm对象（所依赖的数据）的数据代理。（两个数据代理，这个地方的理解有待验证）

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id="root">
        姓: <input type="text" v-model:value="firstName"><br/><br/>
        名: <input type="text" v-model:value="lastName"><br/><br/>
        全名: <span>{{fullName}}</span>
        <!-- 注意：写fullName.get()不行哦，新手容易犯的错误!!!!!! -->
    </div>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'温',
                lastName:'开水'
            },
            computed:{  //仔细回想一下Object.definedProperty方法看看有没有忘记 属性
                fullName:{  //属性名
                    get(){  //配置项
                        return this.firstName + '-' +this.lastName;//this已处理，指向Vue实例!!!!!!
                    },
                    set(value){
                        console.log('set');
                        let arr =  value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
</body>
</html>