vue2学习笔记4 - 深入学习模板语法：插值语法和指令语法

我是飞鸟呀

于 2024-07-15 12:00:00 发布

阅读量518

点赞数 4

分类专栏： Vue 文章标签：学习笔记 vue.js

本文链接：https://blog.csdn.net/l_q_l/article/details/140414095

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

在vue2学习笔记2-老规矩，从Hello World开始，了解Vue实例和模板-CSDN博客我们提到过，容器中的代码叫做Vue模板，它们遵循HTML规范，只是混入了特殊的Vue语法。这些特殊的Vue语法除了上一次我们提到的插值语法外，还有指令语法。

插值语法，可以使用js表达式，读取vue实例data中的数据。但是能实现的功能比较单一，而且，也仅限于标签体中的文本替换。如果想要与元素的属性绑定，就不起作用了。这时，我们就需要指令语法。在官网API中，专门有一个指令集合，都以v-开头：

1、想要实现的效果

同样，我们先定义一个目标，想要在页面中添加一个链接，点击实现跳转

2、传统实现方式

直接将目标URL在模板中写死了，弊端不再赘述。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!--引入vue.js，则全局就会多了一个vue的构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备一个容器-->
        <div id="root">
            <!--添加想要展示的内容：文本插值, js表达式, 读取data中的数据-->
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr>
            <h1>指令语法</h1>
            <a href="http://baidu.com">点我打开百度</a>
        </div>
        <script type="text/javascript" >
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
            const vm = new Vue({
                el:'#root',         //为当前Vue实例绑定容器，这里使用了css selector，绑定了id=‘root’的元素
                data:{              //存储数据，供el所绑定的容器所使用
                    name:'飞鸟'                    
                }
            })            
        </script>
    </body>
</html>

3、Vue实现方式

3.1、尝试插值语法

本例中，添加了一个跳转地址，但是问题是，这个地址同样是hardcode，我希望换成一个变量，这样方便维护。按照之前的方法，在vue实例data中定义一个URL，这里读取变量不就行了？试一下：

运行，查看所加载的html：

url并没有被替换，而是直接当成了一个字符串加载了。此时console中还有一个错误：

这里告诉我们属性中的插值语法已经被移除了，需要使用v-bind来实现。这就是指令语法。

3.2、指令语法

按照提示信息，使用v-bind:或其简写形式“:”，如下：

这时，属性href的值“url”会被当做js表达式执行，而非字符串。刷新后查看页面HTML，url被成功替换：

总结

1、插值语法：

功能：用于解析标签体内容。

写法：{{xxxx}}，其中xxxx是js表达式，且可以直接读取到data中的所有属性。

2、指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）

示例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????。

我是飞鸟呀

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue2学习笔记4 - 深入学习模板语法：插值语法和指令语法

1、插值语法：功能：用于解析标签体内容。写法：{{xxxx}}，其中xxxx是js表达式，且可以直接读取到data中的所有属性。2、指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）示例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????。
复制链接

扫一扫