天气案例————温开水的复习笔记

咕噜一口温开水

已于 2022-02-05 18:15:25 修改

阅读量214

点赞数

分类专栏： Vue 文章标签： javascript 前端开发语言

于 2022-02-05 17:55:42 首次发布

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

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

一、原生JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例(原生JavaScript)</title>
</head>
<body>
    <div id="root">
        今天天气很<h2 id="weather"></h2>
        <button id="btn">切换天气</button>
    </div>
    <script>
        let btn = document.querySelector('#btn');
        let weather = document.querySelector('#weather');
        let isHot = false;
        weather.textContent = '凉爽';
        btn.addEventListener('click',function(){
            isHot = !isHot;
            if(isHot){
                weather.textContent = '炎热';
            }
            else{
                weather.textContent = '凉爽';
            }
        })
    </script>
</body>
</html>

评价

总感觉很乱，感觉东西一旦多起来就会让可读性变差，感觉数据和操作是杂糅在一起的。

二、原生JavaScript改进

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例(原生JavaScript)</title>
</head>
<body>
    <div id="root">
        今天天气很<h2 id="weather">凉爽</h2>
        <button id="btn">切换天气</button>
    </div>
    <script>
        let btn = document.querySelector('#btn');
        let weather = document.querySelector('#weather');
        //闭包，写一个接口，数据和对应的数据操作
        function changeWeather(){
            // 数据
            let weatherAtt=[
                '凉爽','炎热'
            ];
            let isHot = false;
            // 数据操作
            function change(){
                isHot = !isHot;
                if(isHot){
                    weather.textContent = weatherAtt[1];
                }
                else{
                    weather.textContent = weatherAtt[0];
                }
            }
            // 完成闭包
            return {change:change};
        }
        const changeweather = new changeWeather();
        // 调用接口
        btn.addEventListener('click',changeweather.change);
    </script>
</body>
</html>

评价

闭包，数据和对应的接口。我感觉可读性要好一点，应该就是将事件监听里的事件内容分离开来了，让事件监听函数的理解更加清晰。业务逻辑分离开来（乱说一通，(#^.^#)）。

三、使用Vue框架

<!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">
        <p v-text="info"></p>
        <!-- 与 <p>{{info}}</p> 一样 -->
        <button @click="changeWeather">切换天气</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:false,
                info:'凉爽',
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                    if(this.isHot===true){
                        this.info = '炎热';
                        // return this.info;
                        console.log(this.info);
                    }
                    else{
                        this.info = '凉爽';
                        // return this.info;
                        console.log(this.info);
                    }
                }
            },
        })
    </script>
</body>
</html>

评价

感觉和前面JavaScript原生改进方法很相似，不过是使用了框架，自己要书写的代码更加简洁和可读性更高。不过怎么感觉有点不怎么好，就是那个data总是在变。

四、Vue改进方案一（使用计算属性）

<!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">
        (1)今天天气很<p v-text="info"></p>
        <p>(2)今天天气很{{info}}</p>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:false
            },
            computed:{
                // 简写形式
                info(){
                    return this.isHot?'凉爽':'炎热';
                }
                // 完整形式
                // weather:{
                //     get(){
                //         return this.isHot?'凉爽':'炎热';
                //     }
                //     set(){
                // 
                // }
                // }
                
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                    // return this.info;
                }
            },
        })
    </script>
</body>
</html>

评价

不断修改isHot的值来达到计算属性的改变，来达到模板语法的不断重新解析

五、Vue改进方案二（监视属性）

<!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">
        <p>今天天气很{{info}}</p>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                // 简写形式
                info(){
                    return this.isHot?'炎热':'凉爽';
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            watch:{
                isHot:{
                    immediate:true,
                    // handler什么时候被调用，当isHot发生改变时。
                    handler(newvalue,oldvalue){
                        console.log('isHot被修改了',newvalue,oldvalue);
                    }
                }
            }
            
        })
    </script>
</body>
</html>