Vue模板，数据和指令

2023-12-02 11:18:46

模板，数据和指令

三者的英文名称也有必要列举一下：

模板： Template
数据：Data
指令：Directive

在学习Vue的概念框架时，要时刻回想到Vue的核心是什么。

Vue的核心是将数据显示到页面上。

为达到这一目的，我们使用模板来实现。

而为普通的HTML添加特殊属性，则需要借助指令来完成。

指令非常强大，可以用它来告诉Vue要实现的效果以及如何处理提供给Vue的数据。

下面看个例子：

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
    <div id="app">
        <p v-if="isMorning">早上好！</p>
        <p v-if="isAfternoon">中午好！</p>
        <p v-if="isEvening">下午好！</p>
    </div>

    <script>
        var hours = new Date().getHours()
        var app = new Vue(
            {
                el: '#app',
                data: {
                    isMorning: hours < 12,
                    isAfternoon: hours >= 12 && hours < 18,
                    isEvening: hours >= 18

                },
                created() {
                    // 应用启动时执行
                    console.log("应用启动...")
                }

            }
        )
    </script>
</body>
</html>

在div中，可以用v-if来做判断，使用定义在data字段中的属性来决定输出的结果。

不过这种写法本身并不是响应式编程，因为随着时间变化，页面并不会随之更新。

就上面这种写法而言，可以优化为下面的方式：

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
    <div id="app">
        <p v-if="hours < 12">早上好！</p>
        <p v-if="hours >= 12 && hours < 18">中午好！</p>
        <p v-if="hours >= 18">下午好！</p>
    </div>

    <script>
        var app = new Vue(
            {
                el: '#app',
                data: {
                    hours: new Date().getHours()
                },
                created() {
                    // 应用启动时执行
                    console.log("应用启动...")
                }
            }
        )
    </script>
</body>
</html>

核心在于，虽然v-if后面跟着的是字符串，但是能用被el指向的Vue实例中定义的数据。

通过这两个简单例子，可以看到一种编程模式：在JS中实现业务逻辑，在模板中实现视图逻辑。

暂时还没开始的话题是，计算属性，后面会展开。

小总结

模板就是能够用非HTML元素编码的显示标签，这和在Python Flask框架中用得到的Jinja模板是相同的道理，在模板中使用的简单的逻辑称之为指令。在JS代码块中定义函数和数据，主要关注的是业务逻辑。

参考

《Vue.js快跑：构建触手可及的高性能Web应用》

END.

码农公寓

模板，数据和指令

参考

相关文章