vscode 插件

021_天气案例 - 图1
插件名： Vue 3 Snippets
作者：hollowtree
源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
            <!-- 可以在 @click 中写一些简单的语句。 但凡有≥2个语句，就不要这样写，而是借助函数来实现。-->
            <!-- <button @click="isHot = !isHot">切换天气</button> -->

            <!-- alert()属于 Window对象，不是Vue对象中的函数。-->

            <button @click="changeWeather">切换天气</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',

            data:{
                isHot:true, //true-炎热 false-凉爽
            },
            computed:{
                info(){
                    //注意：此处需要通过 this指向的vm实例拿到data中的属性。
                    return this.isHot ? '炎热' : '凉爽'
                }
            },

            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
        })
    </script>
</html>